For my AngularJS webapps I use the gulp-angular generator for Yeoman to get me started. It includes awesome features like preconfigured gulp tasks, Typescript as well as Webpack and Browsersync support.

In this post I will describe the steps required to setup Webstorms Javascript debugger to work with this project configuration.

Prepare Webstorm

  1. Install Chrome
  2. Install the JetBrains IDE Support browser extension from the Chrome store

Project configuration (inside Webstorm, based on the blog post from Jetbrains)

  1. Right click on „gulpfile.js“ in the project tree and select „Show Gulp Tasks“
  2. Double click on the „serve“ task to build the app and serve it using Browsersync. This also creates the temporary build directory „.tmp“
  3. Add a debug configuration
    1. Select „Run“ -> „Edit Configurations…“
    2. Add a new configuration using the „+“ button and select „JavaScript Debug“
    3. Set the URL to „http://localhost:3000/“
    4. Select Chrome as Browser
    5. Add the Webpack mapping to the topmost project directory (section „Remote URLs of local files (optional)“) by adding „webpack:///.“ as „Remote URL“

Now it’s possible to debug AngularJS webapps using Webstorms integrated debugger. To launch the debug session run it either by selecting „Run“ -> „Debug ‚<new configuration>'“ or by selecting the new configuration in the dropdown box on the toolbar and clicking on the debug icon.

Note: Before starting the debug session, Browsersync needs to be started first using the „gulp serve“ tasks. This task also rebuilds the app if required and reloads the page.