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.
If you’re interested in learning more about VS Code, check out the “Learn VS Code” course to learn everything you need to know!
http://learnvscode.com/
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 ***
https://github.com/jamesqquick/Design-and-Build-a-Chat-Application-with-Socket.io
*** Resources ***
https://developers.google.com/web/tools/chrome-devtools/javascript/
https://code.visualstudio.com/docs/editor/debugging
-~-~~-~~~-~~-~-
Please watch: “5 Ways To Improve Your Speed With Visual Studio Code”
-~-~~-~~~-~~-~-
Original source
45 responses to “Debugging JavaScript (Google Chrome and Visual Studio Code)”
How to attach to current Chrome i can't find out 🙁 , it gives error
Great ! I like the detailed and clear explanations! Thank you James 😎
Step Over, Step In, Step Out are there But Where Is Step (F9)???
AMAZING VIDEO! +1 SUB
I try to run the debugger like this and it doesn't work, but it works when i run the node.js debug. does anyone know how to fix?
learnt new things! thanks
All I can say is.. better late than never, thank you so much!!!
this is innovation
Launch with chrome opens a new chrome instance without any data. Can I launch it as I normally use (with all extensions, history, web logins)?
I'd appreciate any help.
It is stupid how there is no textual documentation on how to setup debugger in VS Code for Chrome. Tnx for the video.
Great video, thx! Big thumbs up. That said, I laughed after slowing down to 0.25x at 12:30 so as to watch carefully and understand what special devilry you were doing. Turned out you just added a configuration (an identical one, I might add) to the one that was already there by default. At that point I returned to normal speed just in time to hear you say, "Looks like it created two of them for us…"
When I try and debug any file. Literally any file, I get some random VM{random int} file that is paused… wtf? It's pretty annoying and I can't figure out what is going on. Just a basic HTML file and app.js file and trying to debug my algorithm, but I can't because Devtools hates me lol not lol
why do you have to move your mouse so fast ? i am not going to pause and backup 900 times just because you are running a race.
Thanks man !!
I can't start the debug with vscode, i'm getting this error
"Error processing "launch": Error: Can't find Chrome – install it or set the "runtimeExecutable" field in the launch config."
So incredibly useful,valuable and time saving
which theme you use??
13:20 For me this procedure opens a new chrome window with localhost:3000 unreachable
Дякую за гарне пояснення!
Mine didn’t work..
Thanks.
To the point, yet very thorough. Best video I have watched today! 🙌
it was amazing, thank you
I've been missing out
Is it possible to debug JavaScript code that is not part of the Web UI code, looking at this for debugging JavaScript/jQery that is utilized for testing. Currently I can open the site url in Chrome and execute the code in the Debug Console, but cannot figure out a way to execute/debug code in a file.
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!
Great video! 2 quick questions: can I debugg a JS script inside a PHP file? I've got a "this site can't be reached"
I only want to debug a javascript, do I have to put in a html file?
This was great I just wished it was for server side js not client only client side.
Worst video. Why you doing 20 minutes tutorial not 1 minute? It's fking useless
Good tutorial. Keep it up.
Great video, thanks a lot.
Really helpful. 🙂
Thanks for this video! There is a similar VS Code debug extension for Firefox, and I was able to figure out how to use it by watching this video. Thanks again!
I really needed this video today. Thanks for being so clear and straightforward in your explanations instead of just whizzing through stuff.
Would such flow work with Live Server instead of Node.js app?
Wow, that was helpful! Thank you very much.
I tried debugger, nothing happens
12:07 "So you open up that d-bag" 😂😂
I love you
speak alot
Thanks, very helpful!!!!
Awesome job James on this video! Much appreciated.
Newbbie here. You forgot to say how you set it it up.
Awesome video, straight to the point, thanks!