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
Subscribe to Blog updates
Thanks, we've got you!
WebStorm 2023.3 Release Candidate Is Here!
The WebStorm 2023.3 RC is now available! Read about some of the most exciting improvements making it into the release.
WebStorm 2023.3 EAP Digest #3: Angular, React, and Vue Improvements and More
Read our third 2023.3 EAP digest to learn about the latest changes in the upcoming release.
WebStorm 2023.3 EAP Digest #2: Improvements for Type Only Import, Angular, Svelte, and More
Read our second 2023.3 EAP digest to learn about the latest changes that will make it into the upcoming release.