VSCode debugging tools and Facebook’s Jest Gone are the days where I spend my time bouncing back and forth between the terminal, browser and editor. Ain’t nobody got time for that! In this guide I will show you how to supercharge your React workflow with Visual Studio Code’s debugging features. You will learn how to hook up VSCode and Chrome so you can debug browser code directly from VSCode 😎 Setup the Test Project Before we begin with the tutorial we need to create a test application that we’ll use later in the article. I use a lot of the time because I hate writing boilerplate. We will use it for this tutorial too. Alternatively if you have an existing application you can use that. create-react-app First create the test project: Install globally by running create-react-app npm i -g create-react-app Once installed create a new project by running create-react-app vscode-tutorial This will create a new directory that contains the new React application. Setting Up VSCode Next up we need to install the VSCode extension so it knows how to talk to Chrome. VSCode connects to Chrome through Chrome’s . This is the same debugger protocol that Chrome’s developer tools use. Instead of using Chrome’s developer tools you can use VSCode to debug browser code. debugger protocol Installing Debugger for Chrome Extension To get VSCode and Chrome communicating with each other we need to install an extension called . Install it by navigating to the extensions pane and searching for: . It should look similar to below: Debugger for Chrome debugger for chrome Debugger for Chrome VSCode Extension Configuring VSCode to Connect to Chrome Next we need to configure VSCode to use connect to Chrome. Click on the debugging icon Click the dropdown menu (next to the play button) and press “Add Configuration …” Select “Chrome” from the “Select Environment” dropdown. Confused? Here’s a gif … A new directory will automatically be added to your project’s root directory. The directory will contain a file which is used to configure VSCode’s debugger for your current project. Each time you create a new project you will have to follow the same steps to setup remote debugging (or copy the directory from one project to the next). .vscode launch.json .vscode Modify the property to point to the URL of the development server. For it’s . Your should look like this (thanks to from VSCode for the launch suggestion) … url create-react-app [http://localhost:3000](http://localhost:3000) launch.json Kenneth Auchenberg A full list of configuration options can be . found here Running The Debugger Don’t worry we’re almost done now. Next up we need to use our test project to test the debugger is working. Start The Debugger You can start the debugger by doing one of the following: Press F5 Press the green play button in the debug pane From the menu Debug > Start Debugger If the debugger starts successfully you will see a small toolbar appear at the top of VSCode similar to the image below … Set a Breakpoint A breakpoint is used to tell the debugger to pause the execution of code at a specific point in the code. This allows you to inspect variables, the call stack, and make modifications to code as the application is running. Let’s set a breakpoint in the test app. Open and click the mouse in the gutter next to line 11. A red dot should appear to indicate a breakpoint has been added. If you’re a bit confused see the gif below … src/App.js Start The Development Server And finally to see everything working in unison start the development server buy running in the terminal. This will start a new server that can be access at the address npm start http://localhost:3000/ Navigate to and you should see the page “freeze”. This is because the application has hit the breakpoint. If you switch back to VSCode you will notice line 11 is highlighted and the debug pane is updated to reflect the call stack. http://localhost:3000/ If everything worked successfully congratulations! You have just learned how to setup remote debugging in VSCode. If you want to learn more about debugging in VSCode . read this Continuous Testing With Jest It’s helpful for me to have my unit tests running alongside the debugger. I like my tests to run every time I make modifications to the implementation. Thankfully is automatically setup to do this. Simply type at the terminal to start jest. It will automatically watch your files and run on save. It looks like this … create-react-app npm test Pretty cool huh? In future articles I will go into more detail on how to debug JavaScript. If you found this article helpful and want to keep up to date with all the shiny things in the JavaScript and web development world . follow me on Twitter Happy debugging! Further Reading https://code.visualstudio.com/docs/editor/debugging https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code https://github.com/Microsoft/vscode-chrome-debug https://facebook.github.io/jest/
