How to run html & javascript in VS Code

Question

I have the following code. How do I run this in VS Code with the debugger. I installed and tried live-server but maybe not doing it correctly.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>Test</button>
  <script src="index.js"></script>
</body>
</html>

index.js

var button = document.querySelector('button');
var fn = () => console.log(this)

function fn() {
  console.log(this);
}

button.addEventListener('click', fn)

Lakindu Hewawasam · Accepted Answer · 2020-12-28 01:54:48Z

8

You can install the following extensions.

Live Server.
Chrome Debugger.

Once you have these two extensions installed, open the page index.html using the live server and then press F12 to open the developer tools for chrome.

And then you can paste a single line of code on the debugger like this.

document.querySelector('button').addEventListener('click',()=>{
     console.log("Event Raised");
};

answered Dec 28, 2020 at 1:54

Lakindu Hewawasam

7606 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Krasen Feb 27 at 19:38

Interestingly if the server is running on my desktop PC and i connect using 192.168.0.xx:someport then I still get the error, so really it must be a localhost not just a live server...

Kenedi Novriansyah · Accepted Answer · 2020-12-28 02:04:49Z

1

You can do like this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>Test</button>
  <script>
    const button = documnet.querySelector("button")
    if(button) {
       button.addEventListener("click", () => {
          console.log("This Works")
       })
    }
  </script>
</body>
</html>

answered Dec 28, 2020 at 2:04

Kenedi Novriansyah

73 bronze badges

Comments

Qui-Gon Jinn · Accepted Answer · 2020-12-28 02:27:51Z

1

You can run live server but I suggest you to use lite-server library.

Run this command in terminal inside project folder to initialize project with npm init -y
Add lite-server to your devDependencies with npm install lite-server --save-dev
Add start command to run server to package.json

"scripts": { "start": "lite-server" },

To start server use npm start

answered Dec 28, 2020 at 2:27

Qui-Gon Jinn

4,5283 gold badges30 silver badges39 bronze badges

Collectives™ on Stack Overflow

How to run html & javascript in VS Code

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related