Debug JavaScript code from WebStorm or IntelliJ IDEA

Recently I was asked how to debug the JavaScript code in JetBrains IDEs. Some people feel more familiar and comfortable in IDEs than in browser based debug environments like Chrome Dev Tools oder Firebug. The debugging of JavaScript code in WebStorm or IntelliJ IDEA ist straightforward. There is a smooth integration between them and Google Chrome browser. Here all steps:

1. First of all you have to install the JetBrains Chrome Extension for your Chrome browser.

You will see a small JetBrains icon in the browser’s toolbar after that.

2. Run you project. As reference project, I will use my PoC which I can run with npm start. This is a TypeScript, AngularJS 2 application built by Webpack. It’s very important to generate source map files in order to be able to debug original TypeScript files. The application is available at http://localhost:3000/.

3. Create a new JavaScript Run/Debug configuration. The URL should point to the web application root http://localhost:3000/.

4. Set a breakpoint in your source file and click on debug icon (shift+F9) for the just created debug configuration. The IDE and the browser are connected now. When the browser fetches JavaScript files (from the dist folder in the PoC), the breakpoint in the original file gets jumped up. This is possible due to the source map files which exist along with the JavaScript files in the dist folder.

All console.log, console.warn, etc. outputs will be forwarded to the IDE’s Console tab. Nice. I’ve captured a video which demonstrates how to debug the JavaScript code from WebStorm or IntelliJ IDEA using JetBrains Chrome Extension.

Have fun!