Open Rails Partial Chrome Extension

Open the nearest Rails partial, action, ViewComponent, or layout file containing a given element on the page in your editor of choice directly from the browser by inspecting an element. This extension will list all of the parent views that were rendered in the process so you can choose which file you'd like to open.

Install the Chrome Extension.

Usage

Installing the VS Code extension

Currently the only editor supported is VS Code using the dewski.open-rails-partial VS Code extension. The VS Code extension is required because the filenames in the HTML comments generated by Rails are relative to the root of your project.

<!-- BEGIN app/users/index.html.erb -->
  <h1>Users</h1>
<!-- END app/users/index.html.erb -->

VS Code requires the fullpath to open a file using the built-in URI handler (vscode://file/path/to/file). The VS Code extension will open the relative path in your most recent window. If you attempt to open a file that doesn't exist in the current workspace, make sure you switch to the workspace window containing your Rails project.

Enabling annotate_rendered_view_with_filenames

For the Open Rails Partial browser extension to work, you must enable the annotate_rendered_view_with_filenames option in your Rails application. This will add HTML comments to the rendered view with the file name of each partial, action, ViewComponent, and layout for the rendered page.

# config/environments/development.rb

Rails.application.configure do
  # Annotate rendered view with file names.
  config.action_view.annotate_rendered_view_with_filenames = true
end

It's recommended to only enable this option in development or staging environments.

Browser Support

• ✅ Chrome
• ❌ Safari - Coming soon

Extension Development

To develop the extension, you'll need to install the dependencies and build the extension.

Setup

npm install

Build in watch mode

terminal

npm run watch

Visual Studio Code

Press Ctrl + Shift + B or Cmd + Shift + B to build the extension and listen for changes in development.

Load extension to Google Chrome

1. Visit chrome://extensions
2. Enable Developer mode in the top right of your window
3. Click Load unpacked in the top left of your window
4. Locate and select the dist directory containing the built extension

Test

npx jest or npm run test

Prepare for distribution

To prepare the extension for distribution to the Chrome Web Store, you'll need to build the extension:

npm run build