The New Way To Debug JavaScript in VS Code - No Extension Required

VS Code now has built-in debugging. This means you don't need to install an extra extension to get started debugging JavaScript. In this video, I'll show you how to set it up;.

BenQ Monitor Light

_____________________________________________

Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
_____________________________________________

Connect with me 😀
_____________________________________________

COURSES 💻

[NedumEze]

Hi! James.
Thanks for the demo. For me, something is missing.
I think that I can connect better if you did a full Debug demo, beginning with a script full of bugs. Then, setting up for Debugging, clarifying what you're looking for and how to recognize it when discovered by the Debugger. May make better sense to newbies like me. Kinda take out a bit of the mystery in JS.

[rajlakhanpal]

I am so grateful for the video. I am new to programming and this debug technique is helping me to understand what the code is doing for nested loops. Thank you for your time and hard work.

[nicholashallahan]

It's great to have all the tools at your disposal. A debugger is useful in that it helps you follow execution flow, see your stack, and see all of the variables in your context. Sometimes you find mistakes this way...

[francescociulla]

I need more James Quick videos in my life.

[andrewcathcart]

Could you do more svelte videos, making an app that's a bit more involved / complicated, showing how you structure your front end for reusability etc?

[yassminh]

This is amazing! Thank you so much for doing this video. I've been studying JavaScript with a few online resources and none of them have taught me how to debug as clearly as this.

[krtirtho]

What I always do to avoid console.log

// top level script
console.log = ()=>Error("Stop using this sh*t console. Use debugger instead")


This really helps me🙂

[JTTTTTT]

AWESOME JAMES! I love vscode for innumerable reasons and it's good to have someone out there helping me to make it even more practical

[gilbertojunior]

this video is wonderful and helped me a lot, thank you very much.

I'm watching all your videos, and I've learned a lot

[Miketar]

For me, true debugging is the ability to see every variable and possible state of the code to pinpoint an error as it happens. Even for advanced coders, you can discover not only flaws and inefficiencies in the logic, but you can even make it better through stepping through it line by line. BTW, in the example the program started because you pointed the url to 5500 when the html was named index.html. If it was named differently you will need 5500/<name of your homepage.html> in order to get into the js code that would run for that page.

[nolatone]

I write a lot of code from the debugger. Anytime I have something tricky that I need to develop logic for, I will set a dummy line like “const n = 0” and set a break point there. I can then test expressions on the data at the console prompt.

When debugging loops, conditional break points are a lifesaver.
Note that is using chrome Dev tools, I’m wanting to move to VS code for this which is why I’m watching your video.

[billburch]

WOW! Thank you! This video just saved me about 2 hours of trouble shooting on a NodeJS project hot-fix. Using the VS Code Debugger is so much faster that switching back and forth between the browser and the editor. Thanks again and keep the helpful hints coming!

[ashbloomingdale]

This would be very convenient for server side code, but could not see myself using this for front end work.

[ChristianHeilmann]

Another interesting bit here is that the VS Code Debug Console now is the same as the Console in the Browser developer tools. If you launched the browser with the debugger, you can for example use $('body') to get a reference to the HTML body or try out any JavaScript expressions.

[chefbennyj]

When writing JavaScript, I always have to open live server, and debug in dev tools. This might actually be faster. It allows me to stay in visual studio code instead of switching constantly. This is why coding c# is faster because I can stay in visual studio. Thanks for this!

[hayatasuenaga]

I always find your contents so helpful. Thank you!

[MrArbelzis]

Hey James thx for the video!
What is your VSC theme?

[ChristianHeilmann]

Excellent walkthrough. If you use Edge instead of Chrome you also get an extra inspect button which allows you to debug CSS/DOM directly in VS Code without jumping in between browser and editor all the time. I'm the PM for Edge Devtools and happy to answer any questions about the integration. As Edge is Chromium based the functionality is the same in terms of JS/CSS support.

[rmohanmenneni]

Great! It did help me when I am stuck! Realized that my launch.json was being created outside the .vscode folder and losing sight of that file when start debugging without success. In these times of WFH, with lack of an instant collective wisdom of the teams, people like you are saviours!

[joshnishikawa]

"This is what I used to would have had to install." Nailed it!