How to debug JavaScript code on Chrome browser and Vs code?

I just want to debug this code :

var x = 1;
a();
b();
console.log(x);

function a()
{
  var x = 10;
  console.log(x);
}

function b()
{
    var x = 100;
    console.log(x);
}

I simply made an index.js file and want to debug the code line by line? Then how to connect with the chrome dev tools?


It also gives me “Debug with Js terminal” option which I am not getting how to do.

If you open the Inspector (F12) in Google Chrome there is a tab called Sources. Your JavaScript files should be visible there. Clicking one of the files should open a small text editor in the center of the Inspector. in here you can make changes to your code and set breakpoints to stop the code from running on a particular line. This website explains everything you need to know: https://developer.chrome.com/docs/devtools/javascript/sources/

I am not really familiar with debugging JavaScript code in VsCode so maybe this source will help you out: https://code.visualstudio.com/docs/editor/debugging

If you look at the top-left of the screen, there’s a ‘Launch Chrome…’ button. Clicking that should do what you need, and you’d be able to set breakpoints, read variable values and so on, as you step through the code.