In this tutorial, you will learn how to set up Visual Studio code to debug a ReactJS application. First, in the extension manager, download the debugger for chrome:
Next, open your VS-Code terminal. If you use MAC, you can open the terminal using (⇧ + '). Navigate to the root directory of your project and open the debug tab in Chrome (⇧⌘D) and click on the gear button. You should notice that this will create to create a launch.json configuration file within the root project directory:
To configure your debugging experience you need to update this file. The first thing you need to do is to ensure the URL matches the start URL you have specified in your application:
Next, place some breakpoints in your code. You can do this by clicking next to the line numbers in the editor. If successful a red dot should appear:
Ensure your project is running, using whatever NPM or yarn command you've set up for your project. Next, open your application within Chrome and watch the magic happen. You should now be able to step through your source code (F10) and figure out what's going wrong! Happy Coding 🤘
