Debugging JavaScript (Google Chrome and Visual Studio Code)




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)”

  1. 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.

  2. 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…"

  3. 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

  4. 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."

  5. 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.

  6. 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!

Leave a Reply