Now the Chrome developer tools are pretty amazing and as you saw, you can do a lot there
and I personally prefer working with those
but you can actually also use your IDE to set breakpoint and so on.
Now for that here in Visual Studio Code, you just need to make sure that you got a special extension installed
and for that you can search for Chrome debug and you should find the debugger for a Chrome extension
which I have installed,
if you haven't, make sure you do install it because this will allow you to connect your Visual Studio Code
editor to the Chrome debugging tools.
So with that installed, let me go back to the explorer view here and
let's say we have the same problem we had before, so we want to debug this here and now we want to be
able to run this code with the help of the Chrome debugger but also connect it to our editor
here, so that we can set breakpoints here and we can indeed set breakpoints here.
Let's say we have the suspicion that something goes wrong when we click the add button and this function executes.
Now you can set a breakpoint here by clicking on the left of the line number and now we got the red
dot here which means this is a breakpoint.
Now we just need to run this application,
this website here with the help of our editor.
So instead of manually opening the browser and opening our index.html file in there,
now we need to go to debug here and then start debugging.
Now the first time you click this, you might be asked in which environment to run, though this probably
is only the case if you've got other environments installed, so it might also just automatically pick
Chrome if you don't have other environments otherwise choose Chrome here and now it adds such
a launch.json
file in vscode.
This configures how it launches your application in the browser because it will open up a new browser
window.
Now here, this is generally OK but this URL is wrong.
This would be right if you had a local development server which we don't have here so that will not
work for us here,
I'll dive into local development servers later,
for now we should just copy and paste this URL which we opened in the browser and basically paste
this in here, using the file protocol and then the path to your index.html file ultimately. With that
if you save that, the rest can stay as it is, you can now press debug, start debugging again and what this
will do is it will now launch the app here, enter this debugging view here which you can always switch
with view, go back to the explorer or go back to the debugging view which we have here and we can also
back to our code now, have the breakpoint set here and go to that window which it opened which in
my case is this browser window.
Now if I now enter something here and I click plus, you see it goes back to the editor and pauses the
code execution here.
Now just as in the Chrome development tools, here we also see which variables are available in this execution
context, local and global variables, we can add watch expressions here just as I showed it to you in
the Chrome developer tools. We see the call stack and we see it's getting paused here, we can hover over
things to see their result and we also get controls to step into a function for example and see the
updated call stack, see values if we hover over them and of course step out of them, resume execution,
stop debugging and close the debugger with this red square and so on.
So you can essentially do the same as in the Chrome debugger but now directly in your IDE, which you
might or might not find more convenient.
Now I, as I said, personally like the Chrome debugging tools, also because some of the extra features we
have here, that we can change the code without really changing the code but that's up to you, if you like
to use your local editor,
this is how easy you can get started with Visual Studio Code. Now you can always clear breakpoints here by
just clicking on them again.
So this is how you can leverage the IDE for that in case you prefer that
and once you stop debugging by the way, which you do by pressing the red square here, this will automatically
close the browser window which it opened for you.
You can also start the app in non-debugging mode here if you prefer to do that but you can also just double
click the index.html file in your explorer or finder as we did. One note about the console that opened
down there,
this debug console opened during debugging, it outputs log messages here and you can also evaluate expressions
in here at runtime to run some quick calculations or get the value of a certain variable.
So whilst the debugging process is running,
you can use that console here to see what's going on in your code.