Step-by-Step Guide to Debugging JavaScript Frontend Applications with IntelliJ

Recently, I learned that IntelliJ supports debugging JavaScript frontend applications. This article explains, step by step, how to use the debugger.

Prerequisites

This article assumes that you have a Javascript frontend application which has a script to run the Javascript application and IntelliJ Ultimate is installed. I guess that Webstorm also comes with the necessary plugins “Javascript and TypeScript” and ”JavaScript Debugger“.

Configuring IntelliJ for JavaScript Debugging

First, ensure you can start your application from within IntelliJ. Open your project’s package.json and start the application:

Upon successful start, configure the debugger in IntelliJ. Navigate to “Run - Edit Configurations” under the Run Configurations menu:

1. Add a new configuration
2. Set the name
3. Choose a URL
4. Choose Chrome or Chromium as browser (others are not supported)
5. Add the start script of your application

To configure your application’s script:

1. Choose the package.json that contains the script to run your application
2. Choose “Run”
3. Choose the script that runs your application
4. Check the other environment settings (IntelliJ chooses sensible defaults)

Finally, initiate the Debug configuration by selecting the “Run” icon (not “Debug”) and examine the debug output:

This will open the Debug console and start a browser window. Now, you can set breakpoints in IntelliJ and inspect the execution stack by selecting “Threads and Variables.”

1. Set breakpoints
2. Select “Threads and Variables” to inspect your application.