Skip to content
Advertisement

How to run html & javascript in VS Code

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)

Advertisement

Answer

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");
};
Advertisement