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.
- Install Chrome
- Install the JetBrains IDE Support browser extension from the Chrome store
Project configuration (inside Webstorm, based on the blog post from Jetbrains)
- Right click on „gulpfile.js“ in the project tree and select „Show Gulp Tasks“
- Double click on the „serve“ task to build the app and serve it using Browsersync. This also creates the temporary build directory „.tmp“
- Add a debug configuration
- Select „Run“ -> „Edit Configurations…“
- Set the URL to „http://localhost:3000/“
- Select Chrome as Browser
- 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.