Debug Rails and JavaScript together

Add a controller

1. Press Ctrl twice and start typing controller. Select rails generate controller and press Enter.

2. In the Add New Controller dialog, set the controller name to Welcome and add an action named index. Click OK.

3. Open config/routes.rb and add the following line inside the Rails.application.routes.draw do ... end block:

   root "welcome#index"

Update a view

Add a button to the generated view.

1. In the Project view (Alt+1), open app/views/welcome/index.html.erb.

2. Replace the contents of the file with the following code:

   <h1>Hello, Rails!</h1> <button id="greet-user-button" type="button">Hello!</button>

   The button has an identifier that the JavaScript handler will use.

Add a JavaScript handler

Create a JavaScript file that handles the button click.

1. In the Project view, select the app/javascript directory.

2. Press Alt+Insert and select JavaScript File.

3. Enter hello as the file name and press Enter.

4. Add the following code to hello.js:

   const button = document.getElementById("greet-user-button") if (button) { button.addEventListener("click", () => { alert("Hello, JavaScript!") }) }

   This script finds the button and attaches a click handler to it.

5. Open app/javascript/application.js and add the following import, keeping the imports generated by Rails:

   import "./hello"

6. Open app/views/layouts/application.html.erb and verify that it loads the generated application bundle:

   <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>

Build the JavaScript bundle

1. In the Project view, open package.json.

2. Verify that the scripts section contains the following build command:

   { "scripts": { "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets" } }

   The --sourcemap option is what makes the breakpoints in hello.js work: it generates the source maps that connect the bundle running in the browser back to your original files.

3. Click the Run icon in the gutter next to the build script and select Run 'build'.

   RubyMine runs yarn build and displays the result in the Run tool window.

   

1. Go to Run | Edit Configurations and select the automatically created development configuration in the Rails group.

2. Specify the following options:

   

   • Enable the Run browser option and specify http://127.0.0.1:3000. This URL opens the app/views/welcome/index.html.erb view that uses the JavaScript asset.

   • Enable Start JavaScript debugger automatically when debugging.

1. Open app/javascript/hello.js and set a breakpoint on the line that calls alert.

   

2. To start debugging, press Ctrl twice and start typing the name of the Development configuration. Select the configuration, press and hold Shift (the dialog title changes to Debug), and press Enter.

3. On the opened http://127.0.0.1:3000 page, click Hello!. The debugger pauses at the breakpoint and enables you to examine the application state. To learn more, refer to Debug JavaScript in Chrome.