Debugging CoffeeScript Code

0. Prerequisites
1. Turn On Source Maps Generation
2. Create CoffeeScript Debug Run Configuration
3. Connect to Chrome
4. Debug Your Code

Debugging CoffeeScript Code

CoffeeScript is becoming more and more essential for Web-development. With RubyMine 5 the support of this effective language includes debugging options. Now you can set breakpoints and debug your CoffeeScript code as you used to with Ruby or JavaScript.

0. Prerequisites

Make sure JetBrains Chrome Extension is installed. If it is not, please install it to your browser.

1. Turn On Source Maps Generation

Add the following line to a Gemfile:

Please note that we use CoffeeScriptRedux instead of CoffeeScript itself in coffee-script-redux-debugger gem because of source maps generation is needed for debug to work correctly. As soon as source map generation for CoffeeScript becomes available, we will switch to it. Before that please be aware of a difference between CoffeeScriptRedux and CoffeeScript, for example don't use symbol ";" to terminate statement.

2. Create CoffeeScript Debug Run Configuration

Go to Run | Edit Configurations... and press + to add a new run/debug configuration. Choose JavaScript Debug -> Remote configuration:

For the configuration created add the following settings:

specify URL you're running your app at;
change a browser type to "Chrome";
provide the mapping to an assets directory.

3. Connect to Chrome

Run your application and make sure the URL specified in the settings works without errors.

Run CoffeeScript debug configuration and make sure there is a yellow bar with the text "JetBrains Chrome Extension is debugging this tab." on the top of the page you are working with:

To disconnect the debugging session you should close the yellow bar.

4. Debug Your Code

Go to a .coffee file and put a breakpoint. Now you can start debugging: