How to Debug JavaScript in Visual Studio Code

In this tutorial, I’ll show you how to set up JavaScript debugging for Visual Studio code, including debugging React applications.

— Follow Me —
— 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.

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

[Abdullah]

Literlly in time 😂

I just got stuck on how to debugging my cod in vscod, thank you so much

[securedfront]

I had deferred this requirement because I could not get it working for a while. You video helped! Thank you.

[streaky]

Thank you for helping me understand JavaScript better

[MyALPHAguy]

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?

[keiji]

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.

[sharonlandis]

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.

[avivaben]

and I thought this is going to be the EASY way, silly me. thanks anyway 😵

[paulfleischer-djoleto]

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.

[workingTchr]

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.

[rosgrad]

My english isn't good. I want know. How can I use VS Code debugging without web-browser? Is it possible?