How to run html & javascript in VS Code

user_2741445 0
Viewed 3096

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)
vscode-debugger html javascript
3 Answers

You can install the following extensions.

  1. Live Server.
  2. 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");
};
user_146187890

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>
user_148984670

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

  1. Run this command in terminal inside project folder to initialize project with npm init -y

  2. Add lite-server to your devDependencies with npm install lite-server --save-dev

  3. Add start command to run server to package.json

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

To start server use npm start

user_78905370
Related