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.
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.
Great feedback. I’ve done different videos talking about the why of debugging. This was more specifically targeted at how to set it up. I agree that would be some nice context to add though
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.
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...
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!
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.
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!
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🙂
logging and debugging are different techniques, please do not confuse them with each other. Redefining ‘log’ method does not make sense. ‘console.log’ is useful in Web Workers and you can use it to print the element in an HTML-like trees.
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/ in order to get into the js code that would run for that page.
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.
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.
Coming from C++, debugging means true debugging to me, i.e. using a fully blown debugger like that in Visual Studio or using GDB. I've been completely disgusted by the amount of console.log() statements I had to write to output every piece of data before I could find the source of my bugs. Being able to debug within VS Code will help a lot. Thanks a million for this video, nice job!
Right! Couldn't agree more, so glad I'm not the only one who was forced to practically code verbose output into everything to see what the hell was going on!. This should of been a necessity the second node became more popular.
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!
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?
Can you please how to attach to a process instead of launching a new one ("request": "attach")? it is very helpful because with attaching I would not lose all my bookmarks also I do not have to reload the page and lose the app state. It worked perfectly in Visual Studio but (same concept) and that exists here in vs code as well but we need to figure out how to do that (attach). I tried my self and I checked the documentation and other source but did not work out. Waiting for your help, please. Thank you in advance.
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.
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.
What are the benefits of using VS Code's debugger vs Chrome's? typically set up my breakpoints right in there. Maybe this would save me a step using VS Code?
@@ChristianHeilmann you would still have to jump between browser and IDE to just cause app to go to the breakpoint. I don't see a lot of benefit with this. For server side debugging yes but for client side code I would always go with Chrome debugger as it offers similar experience.
I would agree with the other commenters regarding front-end debugging. Chrome’s debugging tools are robust and work pretty well for what I need. I typically will fall back to the chrome ‘debugger’ syntax to pop a break point into my code quickly.
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?
Does MS Code offer any support for server side components like Generic Handlers? That's the last obstacle preventing me from switching from VS to Code.
Is there any reason to use this debugger over the debugger that is in chrome dev tools in the sources tab? The chrome debugger appears to do all this and more and there isn't any setup needed. The chrome debugger supports a multitude of types of breakpoints to include line breakpoints, dom node breakpoints, event listener breakpoints, and XMLHttpRequest breakpoints. The pause on exception feature is another good chrome debugger feature too.
The main benefit I see is that you have a better editor to work with and more space on the screen. The built-in sources tool in Chromium DevTools is based on an older version of CodeMirror and shows its age, VS Code has Monaco and thus more insights via Intellisense and you can add a truckload of extensions to it. And you don't need to jump from your source code to browser and back all the time.
hm...do you ever tryed "debugger;"? It stops at this string if your developer panel is opened (f12 for chrome). So you can open "watch" tab and check eveything you need. Do step by step etc. In fact I dont even understand how ppl can debug something with just console.log w/o analyzing context "here and now".
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?
great Set up video. I stopped using this way of debugging since it does not allow me to use the extensions within chrome. For example, redux / React Dev tools. If anyone firgures out a way to mount the debug to an existing profile within chrome please let me know.
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
Your channel is amazing, it has helped me countless times. It would be nice for you to allow collaborative subtitles, so that you can translate them, with the help of the community, into several languages.
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
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.
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 😑
Using debugger for chrome, I always attach the debugger to chrome vs the way you showed, which is launching it. Can you still configure the "attach to chrome" option using this non extention new method?
nice bro, another way to launch debug in VS Code. anyways, I am using Edge because I think they are in MS's environment and will be more feature on Edge.
Up until this evening debugging js has always been console.log. Last year when I started programming I couldn't wrap my head around .json configuration files, so the barrier was pretty high for me and I pretty much fell into the console.log flow. Tip: checkout console.error, console.time and console.timeend
I do all of my debugging using the RemoteSSH extension. My target system is always an AWS EC2 instance running Linux. I run VSC locally with its server counterpart installed on the target system. I've also been using the Debugger for Chrome extension. I'm curious about whether this new approach will work using Remote SSH. I guess I'll try it tomorrow and find out! Thanks for the tip!
great debug session, however, I'm begining to do a lot of coding with something called "ELIXIR" which is a fine programming language but unfortunately the available debugger sucks big time. do you have any debugging tips other than in JS., thanks
Being able to work with your code in the place where you write it is ideal to me. VS Code is so powerful. I prefer to use it for debugging because that's where I actually write the code.
I've done it with webpack and typescript. You need to tell the debugger where they are and its a bit tricky but entirely doable. What problems are you having?
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...
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.
The difference is that the debugger is now built in and you don't need the extension any longer. The extension isn't maintained any more and new features will get into the one that comes with VS Code. Same goes for the Edge debugger.
I use VS Code, because I write code in Typescript which then gets converted to JS which is then minimized, so debugging in devtools is basically impossible - by doing it through VS Code, I can step through my TYPESCRIPT code line by line
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.
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.
Great feedback. I’ve done different videos talking about the why of debugging. This was more specifically targeted at how to set it up. I agree that would be some nice context to add though
I need more James Quick videos in my life.
me too
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.
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...
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?
+++++
Yeah, preferable using a frontend ui framework like react or vue
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!
I always find your contents so helpful. Thank you!
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
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.
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!
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🙂
logging and debugging are different techniques, please do not confuse them with each other.
Redefining ‘log’ method does not make sense. ‘console.log’ is useful in Web Workers and you can use it to print the element in an HTML-like trees.
Man I was making joke😅
@@krtirtho Anyway, my comment is useful for any joker like you
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/ in order to get into the js code that would run for that page.
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.
You don't need Debugger for that.
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
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.
will devin take SWE jobs xD
This would be very convenient for server side code, but could not see myself using this for front end work.
Coming from C++, debugging means true debugging to me, i.e. using a fully blown debugger like that in Visual Studio or using GDB.
I've been completely disgusted by the amount of console.log() statements I had to write to output every piece of data before I could find the source of my bugs.
Being able to debug within VS Code will help a lot.
Thanks a million for this video, nice job!
Erm… Chrome has a debugger.
Right! Couldn't agree more, so glad I'm not the only one who was forced to practically code verbose output into everything to see what the hell was going on!.
This should of been a necessity the second node became more popular.
Great illustration of using the built-in debugger in VS-Code. Thanks, James
{2020-04-04}
Glad you enjoyed it!
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!
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?
Hey James thx for the video!
What is your VSC theme?
Can you please how to attach to a process instead of launching a new one ("request": "attach")? it is very helpful because with attaching I would not lose all my bookmarks also I do not have to reload the page and lose the app state. It worked perfectly in Visual Studio but (same concept) and that exists here in vs code as well but we need to figure out how to do that (attach). I tried my self and I checked the documentation and other source but did not work out. Waiting for your help, please. Thank you in advance.
"This is what I used to would have had to install." Nailed it!
What theme is it you have? Font color and bg is awesome
How do you attach the debugger to an open existing browser instance instead of opening a new one while keeping the live server functionality?
Very helpful - exactly what I was looking for.
Thanks! Hey James what is the name of theme you VS Code?
I think it is Dracula Official
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.
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.
Thank you very much, you helped me, i use this method for debug my code in vueJS ♥
It’s only for vanilla js project or it could possible to use with a vue3 project with vite for example ? Thanks a lot for this content 😀
I love this video. Hey James take love from Bangladesh
Interesting to see the Stir Trek plaque on your wall… I’ve been a regular attendee for quite a few years now and have always enjoyed it.
code inside an anonymous function, e.g. a return from a rxjs call is still unable to show the this operator value
What are the benefits of using VS Code's debugger vs Chrome's? typically set up my breakpoints right in there.
Maybe this would save me a step using VS Code?
That is the main difference. With the debugger shown here you're staying in one editing environment and you don't jump between browser and IDE.
You are right and you have access not only to js but also to html css events etc..
@@ChristianHeilmann you would still have to jump between browser and IDE to just cause app to go to the breakpoint. I don't see a lot of benefit with this. For server side debugging yes but for client side code I would always go with Chrome debugger as it offers similar experience.
I would agree with the other commenters regarding front-end debugging. Chrome’s debugging tools are robust and work pretty well for what I need. I typically will fall back to the chrome ‘debugger’ syntax to pop a break point into my code quickly.
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?
Does MS Code offer any support for server side components like Generic Handlers? That's the last obstacle preventing me from switching from VS to Code.
Is there any reason to use this debugger over the debugger that is in chrome dev tools in the sources tab? The chrome debugger appears to do all this and more and there isn't any setup needed. The chrome debugger supports a multitude of types of breakpoints to include line breakpoints, dom node breakpoints, event listener breakpoints, and XMLHttpRequest breakpoints. The pause on exception feature is another good chrome debugger feature too.
The main benefit I see is that you have a better editor to work with and more space on the screen. The built-in sources tool in Chromium DevTools is based on an older version of CodeMirror and shows its age, VS Code has Monaco and thus more insights via Intellisense and you can add a truckload of extensions to it. And you don't need to jump from your source code to browser and back all the time.
i do as you done but when i put breakpoint and press f5 ,nothing happen , can you tell me why plz?
Simple yet elegant explanation. Thank you!
hm...do you ever tryed "debugger;"? It stops at this string if your developer panel is opened (f12 for chrome). So you can open "watch" tab and check eveything you need. Do step by step etc. In fact I dont even understand how ppl can debug something with just console.log w/o analyzing context "here and now".
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?
That's really cool and seems more efficient if the code gets complex.
I will try this out in the pool tonight.
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!!
You're very welcome!
great Set up video. I stopped using this way of debugging since it does not allow me to use the extensions within chrome. For example, redux / React Dev tools. If anyone firgures out a way to mount the debug to an existing profile within chrome please let me know.
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.
What theme are you using it’s so cute
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
Awesome video! What theme are you using for the IDE and the terminal? They’re really nice
Your channel is amazing, it has helped me countless times. It would be nice for you to allow collaborative subtitles, so that you can translate them, with the help of the community, into several languages.
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
This was so much useful. My main problem was using the wrong port lol.
it's always the simple things lol
Any advantages over the in-built browser debuggers in chrome or Firefox?
What is the difference between vanilla HTML and other types of HTML?
Also what are the other kinds of HTML examples.
Colors in Terminal. Which extension?
Great material 👏🏽. Thank you for sharing🙏🏽.
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.
Thank you for your very informative tutorial
What vscode theme that he used? Anyone knows?
Can you do this while working with Nextjs?
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 😑
Using debugger for chrome, I always attach the debugger to chrome vs the way you showed, which is launching it.
Can you still configure the "attach to chrome" option using this non extention new method?
any way of doing it with iisexpress?
Have you tried the performance on this if we use it oftenly? In my case it slows than the vs code and had to restart the computer
I did tried debugging few times but I'm more consol.log person.. 😜
great video as always 😊
This is great information and thank you for sharing. I am curious if you are able to use this debugging method inside of a Salesforce instance?
Unfortunately, I can't help you with Salesforce. I've never used it :(
Can you please make a video how you customized your terminal?
That's a great idea I'll add it to the backlog!
One question please 🥺.
Can JavaScript be used to link a html for to a database?
I mean ordinary JavaScript by the way 🙏
Thanks for this!
Does anyone know font's name? the theme is dracula soft i think in case you wonder..thanks!
I think it's JetBrains Mono.
@@rickyalmeida thanks im gonna try that!
7:05, I don't like debugging so I spend 0 seconds per year on it. I prefer bugging ^_^
nice bro, another way to launch debug in VS Code. anyways, I am using Edge because I think they are in MS's environment and will be more feature on Edge.
You are correct, with Edge you get an inspect button to launch CSS/DOM debugging inside VS Code, too. Got anything else you're missing?
Up until this evening debugging js has always been console.log.
Last year when I started programming I couldn't wrap my head around .json configuration files, so the barrier was pretty high for me and I pretty much fell into the console.log flow.
Tip: checkout console.error, console.time and console.timeend
tysm. really helpfull video
Happy to help :)
I'm so sorry but can we debug our project by reactjs and vuejs with this extension?
What is that theme?
Loved this video!
Sir, which theme you are using in your vs code . What's the name of this theme .please tell me this theme looking osm
I think it is Dracula Official
How can I change the browser to debug with?
I want to use Brave as my default
You can change the launch.json file in the .vscode and setup multiple browsers, then you can select which one you want to use.
Please show how to do this with React.
Very helpful😍
Great! But is it work bundles like vue or react?
Just tested this on my React application. Yes it does work.
@@rob10eSF Great!
I do all of my debugging using the RemoteSSH extension. My target system is always an AWS EC2 instance running Linux. I run VSC locally with its server counterpart installed on the target system. I've also been using the Debugger for Chrome extension.
I'm curious about whether this new approach will work using Remote SSH. I guess I'll try it tomorrow and find out!
Thanks for the tip!
be careful with memory blowouts on server .... if you have more extensions locally - can mean more memory required on server.
@@johnpope1473 So far as I know, it's working fine. It isn't hard to spin up EC2 instances with more memory, but so far it hasn't been necessary.
Really useful. Thumbs up
great debug session, however, I'm begining to do a lot of coding with something called "ELIXIR" which is a fine programming language but unfortunately the available debugger sucks big time. do you have any debugging tips other than in JS., thanks
Unfortunately not. I spent 99% of time using javascriot
Just a question: why? All of this is already available in the browser inspector
Being able to work with your code in the place where you write it is ideal to me. VS Code is so powerful. I prefer to use it for debugging because that's where I actually write the code.
No Opera GX support though?
But does it work with sourcemaps?
How is your experience using it with transpiled code? I often found chrome sources tab a little bit buggy when debugging transpiled code
I've done it with webpack and typescript. You need to tell the debugger where they are and its a bit tricky but entirely doable. What problems are you having?
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...
What theme and font do you use ?
Probably Dracula Official with JetBrains Mono.
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.
Not sure how this is different from the Chrome Extension. Did the Chrome extension allow you to debug in vscode ?
The difference is that the debugger is now built in and you don't need the extension any longer. The extension isn't maintained any more and new features will get into the one that comes with VS Code. Same goes for the Edge debugger.
I've been using this feature for a long time
Seems quite broken. I can't breakpoint after line 39 for every file.
The source of your eye strain is more likely your VSCode theme. :)
But chrome does this too when debugging
Why not just debug with Chrome DevTools?
I wanted to ask the exact same thing. If you have chrome installed you can debug with the built in debugger.
I use VS Code, because I write code in Typescript which then gets converted to JS which is then minimized, so debugging in devtools is basically impossible - by doing it through VS Code, I can step through my TYPESCRIPT code line by line
@@harag9 Well, that's one good reason. ;-)