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

JavaScript
#1

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?

image
image1324×662 38.3 KB

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

#2

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

#3

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.