Debugging JavaScript in Visual Studio Code and Google Chrome

Debugging is an essential skill for any JavaScript developer. In this video, we will explore two different options to do so in Chrome and in Visual Studio Code.

Taking advantage of the wide array of development tools can help developers take the next step in their career. It's not just about writing better code, but really being tied into the ecosystem as a whole. Proper debugging skills can drastically increase your efficiency as a Web Developer dramatically. In this video, we will explore debugging in the Chrome Developer Tools as well as Visual Studio Code. We will create/explore breakpoints, investigate variables, and more.

*** Starter Project ***

*** Resources ***

_____________________________________________

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

Connect with me 😀
_____________________________________________

COURSES 💻

[mrRetteketet]

To the point, yet very thorough. Best video I have watched today! 🙌

[mayank_upadhyay_]

I am facing unbound breakpoint issue, the breakpoints are getting unbound as soon as I start debug session, I have tried every launch.json configuration available on the internet, not still working.

Edit: I am running react inside a docker container

[iShubhamPrakash]

Can you tell me which theme are you using in your vs code? By the way, Very nicely demonstrated.

[Hamza-gncg]

%10 CODING
%90 DEBUGGING





THAT IS WHAT HAPPENS TO ME, LIKE EVERY 2 LINES OF CODE, THERE IS A MISTAKE. I HATE MY LIFE

[whilelab]

Nice man I've been trying to stop console logging, and I finally will, Thank You.

[stlaurent]

Thank you James! Wonder lesson, very useful for newbie like me, keep up the good work!

[RaviShankar-jmqw]

Simply superb!!! loved the way you explained stuff @James

[TheGoldens]

12:07 "So you open up that d-bag" 😂😂

[ParasBansal]

Thanks a lot. You explained it in the best way possible.

[prim]

Nice, wasn't even aware that Chrome had a debugger. Visual Studio (not Code) has certainly adapted me to thinking the IDE was the only way to launch a debugger, even if it's a server!

[Jonathan-odxc]

Ah, nailed it, this is so helpful thank you!

[kullakarthik]

Thats awsome much better than chrome debugger . I can edit code as well as debug it now :)

[analyticalsolution]

Thank you James. You've got straight to the point. I always had problems running debugging with Chrome's developer tool. This is a really good solution. Why others could not address such a simple problem that every beginner has?

[annhalgren]

I really needed this video today. Thanks for being so clear and straightforward in your explanations instead of just whizzing through stuff.

[ragu]

I get the following error when I debug with chrome. Port 8080 & 3000 did not work.
This site can’t be reached localhost refused to connect.
Try:
Checking the connection
Checking the proxy and the firewall
ERR_CONNECTION_REFUSED
I just figured out the fix.

[jameslemayian]

Really awesome video. Love it. Thanks man.

[serendipity]

Hi
I'm trying to learn JavaScript myself but.... I have a problem because when I write Console.log I can't run it
That's why I installed nodejs but it doesn't work on my computer because my Windows is 7
Not 10 or 8
I really don't know what to do
I hope this video can help me
Thank you so much

[Vikram]

Can you please explain how to debug plain HTML, CSS and JS project ? I couldn't get it working as per steps mentioned in this tutorial

[hongzhang]

could the same debug feature work with visual studio 2019?

[antoniohaluzan]

It is stupid how there is no textual documentation on how to setup debugger in VS Code for Chrome. Tnx for the video.