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

VS Code now has built-in debugging. This means you don't need to install an extra extension to get started debugging JavaScript. In this video, I'll show you how to set it up;.
BenQ Monitor Light
BenQ Website: www.benq.com/e...
Amazon Link: www.amazon.com...
_____________________________________________
Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
www.jamesqquic...
_____________________________________________
Connect with me 😀
Live streams on Twitch - / jamesqquick
Follow me on Twitter - / jamesqquick
Join the 💬 Discord Server 💬 - / discord
_____________________________________________
COURSES 💻
Learn how to build Fullstack apps with React and Serverless Functions - www.jamesqquic...
Learn everything you need to know about Visual Studio Code - www.udemy.com/...
Build a Quiz App - www.udemy.com/...

[@NedumEze]

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.

[@JamesQQuick]

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

[@francescociulla]

I need more James Quick videos in my life.

[@hardwired89]

me too

[@nicholashallahan4635]

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

[@rajlakhanpal]

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.

[@yassminh]

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.

[@nolatone]

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.

[@ChristianHeilmann]

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.

[@howTo_79]

will devin take SWE jobs xD

[@krtirtho]

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🙂

[@normanneal35]

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.

[@krtirtho]

Man I was making joke😅

[@normanneal35]

@@krtirtho Anyway, my comment is useful for any joker like you

[@andrewcathcart]

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?

[@dv4able]

+++++

[@jamesjones2212]

Yeah, preferable using a frontend ui framework like react or vue

[@Miketar2424]

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.

[@chefbennyj]

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!

[@billburch4374]

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!

[@JTTTTTT]

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

[@EduardKaresli]

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!

[@TesterAnimal1]

Erm… Chrome has a debugger.

[@alexdonofrio6140]

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.

[@rmohanmenneni9716]

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!

[@ChristianHeilmann]

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.

[@farhanaditya2647]

You don't need Debugger for that.

[@hayatasuenaga9671]

I always find your contents so helpful. Thank you!

[@gilbertojunior1712]

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

[@joshnishikawa]

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

[@MrArbelzis]

Hey James thx for the video! What is your VSC theme?

[@bluematter435]

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.

[@ashbloomingdale935]

This would be very convenient for server side code, but could not see myself using this for front end work.

[@dgonch]

Simple yet elegant explanation. Thank you!

[@bscodev]

Thanks! Hey James what is the name of theme you VS Code?

[@TheDenga147]

I think it is Dracula Official

[@ahmedma527]

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.

[@bluemonkeygolf]

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.

[@Pareshbpatel]

Great illustration of using the built-in debugger in VS-Code. Thanks, James {2020-04-04}

[@JamesQQuick]

Glad you enjoyed it!

[@timbittins]

That's really cool and seems more efficient if the code gets complex. I will try this out in the pool tonight.

[@kalyanchatterjee8624]

Very helpful - exactly what I was looking for.

[@petregluiz]

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.

[@edcoronado]

Awesome video! What theme are you using for the IDE and the terminal? They’re really nice

[@DelannaLeonard]

What theme are you using it’s so cute

[@hachikoi-san3901]

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

[@JamesQQuick]

You're very welcome!

[@redgreengrass]

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]

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.

[@DuneKraftwerk]

You are right and you have access not only to js but also to html css events etc..

[@lukejagodzinski]

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

[@shaunlobsinger]

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.

[@saminyasar004]

I love this video. Hey James take love from Bangladesh

[@henrichsury98]

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

[@theleeclan00]

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

[@alessiortu]

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

[@sahotahappy]

I did tried debugging few times but I'm more consol.log person.. 😜

[@sumertheory]

code inside an anonymous function, e.g. a return from a rxjs call is still unable to show the this operator value

[@charliewills8049]

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.

[@jimmyj.6792]

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 😀

[@AlphaTacDef1]

Great material 👏🏽. Thank you for sharing🙏🏽.

[@khaledkhan1439]

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

[@skaffen]

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

[@JamesQQuick]

it's always the simple things lol

[@abdillahihussein1816]

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

[@JamesQQuick]

That's a great idea I'll add it to the backlog!

[@TarekFaham]

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?

[@robertstrunk5514]

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.

[@ChristianHeilmann]

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.

[@ub-relax6800]

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.

[@V9Void]

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

[@kronatankristof8804]

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

[@JimKernix]

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.

[@mohammadmohseni4862]

Thank you for your very informative tutorial

[@mikehurtado4772]

Colors in Terminal. Which extension?

[@GustavAgar]

great video as always 😊

[@nicolasm.bronner2747]

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 😑

[@LGmediaGlobal]

Thanks for this!

[@joshuadickerson1902]

What is the difference between vanilla HTML and other types of HTML? Also what are the other kinds of HTML examples.

[@Imaginativeone_DF]

Loved this video!

[@amirghiasi100]

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?

[@kicn]

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

[@ericolson6135]

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?

[@JamesQQuick]

Unfortunately, I can't help you with Salesforce. I've never used it :(

[@CTBell-uy7ri]

Please show how to do this with React.

[@ombhosale8090]

tysm. really helpfull video

[@JamesQQuick]

Happy to help :)

[@Confusedcapybara8772]

Can you do this while working with Nextjs?

[@maniratnaguptayekkala387]

Very helpful😍

[@quanbuithanh6775]

I'm so sorry but can we debug our project by reactjs and vuejs with this extension?

[@robertzeurunkl8401]

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.

[@stephenoshaughnessy2279]

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.

[@hishamelfangary722]

Any advantages over the in-built browser debuggers in chrome or Firefox?

[@hasanism]

any way of doing it with iisexpress?

[@tan2cang93]

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.

[@ChristianHeilmann]

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?

[@rix-dev]

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

[@i2l193]

What vscode theme that he used? Anyone knows?

[@mrohailiqbal]

Really useful. Thumbs up

[@bayliner4387]

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?

[@MaximumTheRayRay]

What is that theme?

[@SuperQuwertz]

How can I change the browser to debug with? I want to use Brave as my default

[@harag9]

You can change the launch.json file in the .vscode and setup multiple browsers, then you can select which one you want to use.

[@udittyagi6325]

Sir, which theme you are using in your vs code . What's the name of this theme .please tell me this theme looking osm

[@TheDenga147]

I think it is Dracula Official

[@antoniogiroz]

Great! But is it work bundles like vue or react?

[@rob10eSF]

Just tested this on my React application. Yes it does work.

[@antoniogiroz]

@@rob10eSF Great!

[@tomer_stern]

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?

[@paolo.iulita]

Just a question: why? All of this is already available in the browser inspector

[@JamesQQuick]

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.

[@juliasetiawan9784]

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

[@akhileshwarreddy6790]

I've been using this feature for a long time

[@uprightnesseziukwu8283]

One question please 🥺. Can JavaScript be used to link a html for to a database? I mean ordinary JavaScript by the way 🙏

[@NelRodriguez22]

Does anyone know font's name? the theme is dracula soft i think in case you wonder..thanks!

[@rickyalmeida]

I think it's JetBrains Mono.

[@NelRodriguez22]

@@rickyalmeida thanks im gonna try that!

[@CarlosMartinezTech]

What theme and font do you use ?

[@rickyalmeida]

Probably Dracula Official with JetBrains Mono.

[@luis.carlosrodriguez1561]

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

[@JamesQQuick]

Unfortunately not. I spent 99% of time using javascriot

[@ashotjanibekyan4163]

7:05, I don't like debugging so I spend 0 seconds per year on it. I prefer bugging ^_^

[@thomasstambaugh5181]

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!

[@johnpope1473]

be careful with memory blowouts on server .... if you have more extensions locally - can mean more memory required on server.

[@thomasstambaugh5181]

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

[@loradio537]

No Opera GX support though?

[@workingTchr]

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.

[@malipetek]

But does it work with sourcemaps?

[@abeythomas8458]

How is VScode debugging better than using chrome debugger?

[@stormy1514]

chrome debugger is deprecated, and they wont update it anymore. It's exactly the same thing now that VSCode made it a built-in feature, but they will actually update it. Same goes for edge debugger

[@NitinPasumarthy]

How is your experience using it with transpiled code? I often found chrome sources tab a little bit buggy when debugging transpiled code

[@robertluong3024]

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?

[@gerardsk8ordie]

But chrome does this too when debugging

[@siemen_subbaiah]

Using brave browser. It's pretty smooth than chrome

[@rickyalmeida]

How do you attach the debugger to Brave Browser? I've tried once but can't make it work.

[@islamibrahim8121]

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

[@maxd7228]

Yep, I use this on the regular when debugging my Java code.

[@mrookeward]

For me, Edge has a slight advantage at the moment (i.e., it's slightly better) - both have good debuggers built in, since both use chromium anyway. Debugging via the "sources" in-browser is so easy to use that I've never bothered trying the debugger in VSCode, but I'll give it a go to see if it's worth switching to - thanks for the video.

[@dkalnz3394]

you could also say it has an edge (i.e. edge over say, IE) lol. Edge edges IE