Prepare to set up some rocket science debugging toolkit in VS Code for Javascript. After this, you can start kicking ass and showing off your debugging skills to your peers.

To be precise and not only provide generic instructions on how to setup debugging in VS Code I will provide a step by step guide based on a real open source project so that you can checkout the config and how all the pieces come together. Without further ado I present to you el-conversor. The project uses ES6, and the build tool is webpack, this is important to mention because because if you're using ES6 you will need to properly configure source maps. At the end of the how to guide section you should have this amazing development setup.

How to

Next we will dive deep into this pull request and go step by step on how to set up the perfect debugging environment.

Javascript debugger

1. Install Debugger for Chrome.
2. On your root folder create a .vscode folder (it may already exist, in that case, jump this step).
3. Create a launch.json file inside the .vscode directory with the following configuration or click on the gear icon in the debug tab on vscode:

Copy.vscode/launch.json: copy code to clipboard
1{
2  "version": "0.2.0",
3  "configurations": [
4    {
5      "type": "chrome",
6      "request": "launch",
7      "name": "JS Debugger",
8      "userDataDir": true,
9      "url": "http://localhost:3002/",
10      "webRoot": "${workspaceFolder}",
11      "sourceMapPathOverrides": {
12        "webpack:///*": "${webRoot}/*"
13      }
14    }
15  ]
16}

4. The only thing that you would need to eventually fine tune is the url parameter in order to point to your local dev server.

Now running your development server and simultaneously activating the vscode javascript debugger you're finally able to debug your code!

Redux DevTools

⚠️ Although this setup is handy it adds considerable overhead to your development setup. Maybe in the future, better integrations (maybe natively integrated with the IDE) will be available, or maybe there's already some better integration that I might not be aware of, please comment this page if that's the case.

If you're using Redux there is a strong possibility that you're debugging your application state with Redux DevTools. Wouldn't it be nice to run the Redux DevTools on a VS Code tab, along side with your shinny new debugger? 😎

To bring all this convenience into your favorite IDE, you need to perform the following steps.

1. Install Redux DevTools extension for VS Code.

2. Create a remote devserver to broadcast actions to the VS Code extension. For this you need to:

   • Install as a dev dependency remotedev-server.
   • Create a js script with the following snippet:

   Copycopy code to clipboard
   1// remotedev-server.js
   2const remotedev = require("remotedev-server");
   3remotedev({ hostname: "127.0.0.1", port: 1024 });

3. Now considering you are already running your local dev server, run the above snippet with node remotedev-server.js(this will launch the remote dev server and you should keep it running in some terminal in order to continuously broadcast actions for the extension).

4. Open the extension Redux DevTools (it should open a tab with the empty devtools).

5. Go to settings.

6. Select use local (custom) server and set the hostname and port to the same values that you defined on the script of step 2.b. (default being 127.0.0.1 and 1024).

7. Integrate the remote-redux-devtools in you project:

   Copycopy code to clipboard
   1// el-conversor/app/common/store.js
   2import { createStore, applyMiddleware } from "redux";
   3import { createLogger } from "redux-logger";
   4import promise from "redux-promise-middleware";
   5import { composeWithDevTools } from "remote-redux-devtools";
   6
   7import reducer from "./reducers";
   8
   9const ENV = window.ENV;
   10
   11const middleware =
   12  ENV.NAME === "production" ? applyMiddleware(promise()) : applyMiddleware(promise(), createLogger());
   13
   14const composeEnhancers = composeWithDevTools({
   15  realtime: true,
   16  name: "store",
   17  host: "localhost",
   18  port: 1024,
   19});
   20
   21export default createStore(reducer, {}, composeEnhancers(middleware));

8. Launch the VS Code debugger.

9. Go back to the Redux DevTools and click the connect button.

10. You're good to go! If everything went as expected you should have a similar setup to the one below.

Conclusions

I might have spent one or two days trying to figure out how to bring all these pieces together, but having done it, believe that it increased my productivity in ways that by far compensate the invested time. I hope you find this article useful especially if it saves you one day of trouble trying to figure out the right configs.

If you liked this article, consider sharing (tweeting) it to your followers.