CoffeeScript Debugging with Sourcemaps in WebStorm 6
Users of other JetBrains IDEs (RubyMine, PyCharm, IntelliJ IDEA, …) will need to download and install the File Watchers plugin to use this functionality (available for free).
To debug a CoffeeScript File:
1. Install CoffeeScriptRedux (Redux is still in beta, but it is *required* for generated sourcemaps for debugging. As it nears release, we’ll improve support and make this process much smoother with much less configuration)
2. Set up a CoffeeScript file watcher using Redux (this is a bit different from the default template which uses the non-Redux version of the CoffeeScript compiler, so follow this screenshot carefully):
3. Set up a CoffeeScript Sourcemap Compiler watcher:
5. Add the “sourcemapping url” to your generated JS file (this process will improve as the CoffeeScript Redux project improves! We may add our own support, but for now it’s best to create a reusable live template snippet you can add quickly):
6. Start a debug session from your HTML file:
6. Add breakpoints to your CoffeeScript code:
Debugging other types of files that support sourcemaps (TypeScript, etc) is even easier: just set up the watcher, put breakpoints and start a debug session.
Develop with pleasure!
-JetBrains WebStorm Team