Watch How to Debug JavaScript in Visual Studio Code Video Tutorial

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: https://youtu.be/geIztShEk6I — Follow Me — Twitter: https://www.twitter.com/codebubb Facebook: https://www.facebook.com/juniordevelopercentral/ Blog: https://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: https://youtu.be/geIztShEk6I 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