How to Debug JavaScript in Visual Studio Code
ฝัง
- เผยแพร่เมื่อ 12 ก.ค. 2024
- In this tutorial, I’ll show you how to set up JavaScript debugging for Visual Studio code, including debugging React applications.
Also, check out my previous tutorial on using the debugging tools in Chrome for a more in-depth look at how to debug code: • How To Debug JavaScrip...
- Follow Me -
Twitter: / codebubb
Facebook: / juniordevelopercentral
Blog: www.juniordevelopercentral.com/
- Thanks! -
JavaScript Debugging in Visual Studio Code
-----------------------------------------------------------------------
00:00 Introduction
00:57 Simple example
05:52 Attaching to Chrome
09:10 Working with build tools / pre-processors
13:36 React App
So in this web development tutorial, I’ll be taking you through setting up and configuring VS Code to debug your JavaScript code.
So you may have seen and used the debugging tools available in Chrome (see the video here: • How To Debug JavaScrip... for an overview!) but sometimes you might want to put your breakpoints directly in your source code.
The good news is, using VS code you can easily debug your JavaScript code.
In the tutorial, I’ll show you how to debug a simple bit of JavaScript code running locally and then you’ll also see how you can run Chrome with a remote debugging session to easily ‘attach’ the code your have in VS Code to Chrome and inspect what’s going on.
I’ll also give you a quick overview of the debugging tools available and how you can use them to inspect values that are populated in your variables in your source code.
We’ll then look at a more complicated example that has some build tools running that creates a bundle of JavaScript code and how you need to adjust your settings to allow VSCode to still use breakpoints and the debugger.
Finally, we’ll wrap up the tutorial by taking a look at a simple bit of React code that is setup with all the necessary pre-processing to get your React code to work in the browser and how you might use the debugger to inspect what is going on with the various bits of code in your React app.
Thanks as always for watching
#javascript Channel Handle @codebubb - วิทยาศาสตร์และเทคโนโลยี
![fellow fellow - Proud [OFFICIAL MV]](http://i.ytimg.com/vi/9uZF7BlUQPE/mqdefault.jpg)
Did a bit better on the camera position for the intro this week (but not perfect!). Check out the tutorial on debugging in Chrome if you want a bit more depth on debugging code: th-cam.com/video/geIztShEk6I/w-d-xo.html
Hey, btw, did you use any "Always On Top" extension? So the window stop switching automatically from Chrome to VScode every time a breakpoint is hit? Mine always does that... I want to use it on chrome but, I also wanna check it in VScode every once in a while... how do I make the window stop switching from Chrome to VScode every time a breakpoint is hit?
@@MyALPHAguy Hey do we need to install any extension first?, when the give the value of "type" in in configurations as "chrome", I get the following warning:=> "The debug type is not recognized. Make sure that you have a corresponding debug extension installed and that it is enabled.(1)"
@@janmejaysingh7402 Only in vscode, I installed Debugger For Microsoft Edge extension and then fixed the launch.json file in it... but the launch.json file in the .vscode folder needs to be in the same folder your index.html is.
I had deferred this requirement because I could not get it working for a while. You video helped! Thank you.
Literlly in time 😂
I just got stuck on how to debugging my cod in vscod, thank you so much
Ah! Awesome - hope you find it useful 😀
Thank you for helping me understand JavaScript better
You're welcome - glad you found it useful!
nice
Awesome thanks!
Hey, btw, did you use any "Always On Top" extension? So the window stop switching automatically from Chrome to VScode every time a breakpoint is hit? Mine always does that... I want to use it on chrome but, I also wanna check it in VScode every once in a while... how do I make the window stop switching from Chrome to VScode every time a breakpoint is hit?
Excellent video, very well explained. In your parcel script "parcel serve -t browser src..." what does "-t browser" do? I couldn't find -t anywhere in parcel documentation and for me the script works the same with and without it.
Hi Sharon, do you know what? I can't actually remember? Oh wait, actually I think the -t was to 'target' the browser (instead of 'node' for example). I think it should work fine without it (as you've mentioned) and it may have been removed in later versions of Parcel.
@@codewithbubb Thanks for your quick reply! Another q: When I run the debugger with parceled code, I get "scrbug/1173575, non-JS module files deprecated." It points to the original HTML, I tried using "sourceMapPathOverrides": {
"../*": "${webRoot)/*"
} but get same problem. Any suggestions? Much appreciated!
It's very good vedio to understand how debugger works. could you please make another example for how to debug nextjs13, because it's realy confuse me. thank you very much.
Thanks for tutorial. I find it the steps involved to be lengthy. If run a code I feel that using console.log easier. I just check the value in the console.log in chrome dev tools. I have been using this for some years now and it help its straight forward and fast.
Yeah, console.log still has lots of uses but when you want to step through a problem and see exactly what the state of your app is when a problem occurs, using a debugger in some form is really useful.
@@codewithbubb Thanks for the reply. I will try to move out of my comfort zone and use it.
If you're happy troubleshooting problems just do whatever feels easiest to you - just remember if you can't solve a problem with your normal methods (i.e. console.log) you always have other options.
@@codewithbubb Thanks again for the reply.
ohhhhh and I thought this is going to be the EASY way, silly me. thanks anyway 😵
Yeah, it's not the simplest. Maybe checkout debugging in Chrome - might be easier: th-cam.com/video/geIztShEk6I/w-d-xo.html
Totally voodoo. A php configuration I'm using uses "php" for "type" and won't accept "firefox" for "type". And "${workspaceFolder}""? You'd think VSCode would have a more straightforward way of doing this.
My english isn't good. I want know. How can I use VS Code debugging without web-browser? Is it possible?
windows?????
please remove background music.