VS Code has a lot of follower in the modern web development community. It’s a light weighted IDE with a lot of functionality. One of my personal most important feature is the capability to debug JavaScript applications. In the past I have used an extension called Chrome Debugger, where I had to create a launch.json file and edit the configurations. But this is not possible anymore! If you take a look on the extension you will see a commend [Deprecated] with a remark to use JavaScript Debugger now.
To make the transition easy you will find here a guide how to debug your JavaScript applications from now on!
Disable JavaScript Debugger
First of all navigate to the extensions tab and search for “JavaScript Debugger” and click on disable.
Install and run JavaScript Debugger (Nightly)
Than search for the extension “JavaScript Debugger (Nightly) and install it!
Open the command palette with shift + command + p on Mac and search for Debug: JavaScript Debug Terminal.
That will open a new integrated terminal where you start your React app as usual with npm start or yarn start.
Start the Debugger
Open the command palette again and look for Debug: Open Link.
Insert the URL where your app is running, this is usually http://localhost:3000.
Debug your Application
If you set breakpoints and run your app on a Chrome browser with the given URL, it is possible to debug your app again!
