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

This is was 7 min talk and 0.20 seconds work

i used to always use print,
i did this for a decade,
now i use the debugger.
its like using print, but better,
and i can set breakpoints at runtime.

logging is still important for bigger picture things, to tell you when a chunk of your system has gone tits up.

What theme are you using it’s so cute

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.

You quickly glossed over points that an intermediate like myself could not follow. I'm trying to figure out how a complex callback function is working with an arrow function. I've got console.log all over the place but I'd prefer a step by step process.

I always find your contents so helpful. Thank you!

This was so much useful. My main problem was using the wrong port lol.

The debugger never worked for me, i manage to set it up as you show, changing the port, but i have no variables etc appearing on the debugger... if i try to call a function on the debugging console, it says it's not defined... i still can't debug javascript anywhere else then in the google chrome development tool 😑

Uggghhh, I really hate having to mess with Javascript ... or Python for that matter ... but another developer at work wrote some stuff in javascript that I've got to run/debug and make some changes to so I can make an external tool for the company. I'm really a low-level software and graphics/game/engine developer, this high-level web stuff isn't my cup of tea and drives me insane. Everything about it feels so loose, sketchy and dirty, lol, I feel like I've sinned and need to go say 1,000 Hail Mary's and flagellate myself over the back with a sanctified whip ... when my shirt is falling apart and my back is bloodied, maybe then the Lord will wash away my sin of using Satan's favorite language, lmao 🤣🤣🤣

I wouldn't ever think there was a language that could make C development feel pleasant and smooth, but Javascript is indeed that language, lol. Most javascript devs, I've noticed, don't even use a debugger, they just sort of wing it and slap log statements all over the place to figure out what code is running or try to see the value of a variable, and this really shows ... I can't even stand the workflows and the developer experience of it all, it's so sketchy and unpleasant overall that, like I said, I'm more comfortable writing old-school ANSI C with a legacy compiler for 1989, lol ... give me one of the schitzo-level paranoid and strict C compilers that wigs out about not declaring all locals at the beginning of a function block before writing any logic and complains about weird stuff with cryptic warning and error messages, I'll even edit my .c/.h files in notepad.exe, build with command-line compilation and batch scripts and use only an assembly-level debugging tool and do hex dumps, anything for the Lord to forgive me and help me to avoid Javascript, lol. 😅

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.

Way back in the old VB5/6 days it was possible to debug while running. Essentially you run your code and if it crashes inside of an "On Error" you could then move your execution point to a line before the crash, check all your vars or syntax, make the changes then continue running. I have done this many times over the years and while it didn't work all the time and eventually the interpreter would get messed up resulting in the need to restart the code it did save a lot of time particularly when there may be a number of cascading bugs.

Is there anything like this in Java Script?

OH GOD, it's ways easier thane expected, even whit node apps!! Ty for the inspiration I only needed to read a bit more carefully!!

Fine tutorial here. I still use console.log()

Greetings.. Great video.. As for the browser for debugging, Chrome is good but I have found 'Firefox Developer" a lot better in terms of compatibility with new and | or experimental functionalities...

Can you please make a video how you customized your terminal?

chrome debugger deprecated!!!

Hey, i want to view console log in vscode after going live with live server without run debug, like showing in chorm console, is there any way to do that?

What is the difference between vanilla HTML and other types of HTML?

Also what are the other kinds of HTML examples.

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

Dude, it's like so impossible, since what I',m trying to do is console.log("text"); but every time I load up the chrome console, it shows some kind of error

Thank you for your very informative tutorial

How do you attach the debugger to an open existing browser instance instead of opening a new one while keeping the live server functionality?

debugger for chrome has been deprecated in favor of vscode inbuilt js debugger

Very helpful😍

moço eu te amo!!

Great illustration of using the built-in debugger in VS-Code. Thanks, James

{2020-04-04}

Very helpful - exactly what I was looking for.

Thanks for the video. I've been using Brave but that is not an option. Chrome just seems too slow anymore but I guess I'll have to switch back.

Thank you very much, you helped me, i use this method for debug my code in vueJS ♥

How do I do the opposite? I need to debug my nodejs app which I normally run with vscode debugger but I need to debug it with chrome debugger so I can go into the Network tab.

Brave Browser FTW

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

i do as you done but when i put breakpoint and press f5 ,nothing happen , can you tell me why plz?

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.

What vscode theme that he used? Anyone knows?

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.

tysm. really helpfull video <3

Thanks for this!

What theme is it you have? Font color and bg is awesome

HI
First of all this "magnificent" built-in debugger seems to have totally screwed the Angular debugging using karma/jasmine. When you launch "ng test" from VS code it automatically attaches to it and does not stop on breakpoints. If you try to use the "old" Chrome debugger it interferes with it because now you have 2 debuggers fighting to debug the same instance of karma. If you try to disable it, firstly it is not listed in "extensions" tab because it is a built-in plugin. After finding out that you can "search" for it in there (type "@builtin @id:ms-vscode.js-debug") and disabling it..suprise ..suprise that disables somehow the old Chrome debugging too, because now, in launch.json " "type": "pwa-chrome"," is no longer supported..
As to why the buit-in debugger does not stop for breakpoints...I suspect it is because it does not have a path mapping like the "deprecated" Chrome has.

SO : debugging with console log is not debugging it self-torture.
Debugging means being able to set breakpoints and inspect values, at a _minimum_. You should also be able to change values of anything from the debugger and you should also have the possibility of changing the code and recompile it on the go.

Simple yet elegant explanation. Thank you!

I came here because I couldn't get my regular debugger, Chrome, to effectively black box script libraries I was using. Firefox Developer however could do it easily and so I'm using that now instead of Chrome. VSCode's debugger didn't work for me because, I guess, it didn't expect to find javascript inside my PHP files and so the debugger skipped right over them. And, I have to say, having to manually edit launch.json configuration files seems pretty archaic in this day and age. It makes me feel like I'm in DOS-land from the 90s.

Please show how to do this with React.

Fantastic... How do you debug web app with javascript running on a remote server such as Tomcat and you have access to the source code via a network shared folder?

welcome to the 80s... hilarious how backwards the web dev world is...

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!

80% of the time I use debugging

i use debugging through editor using break points most, but today i faced issue saying chrome has stopped support for .json and it took hours to sort it. ghhhh

Can you do this while working with Nextjs?