(This post was originally written by @aki77 in Japanese. @aki77 is a co-worker of mine. You can read the original post here.)

I'm pleased to announce the release of rails-template-inspector which is a JS package for Rails applications. You can do the following things by using it:

You can confirm in which template the element is written by mouse hover.
You can open template files in your local editor by clicking elements.
No Bundler, no npm. You can just use it via CDN because it's provided in vanilla JS.
Unlike xray-rails, it supports the latest Rails environment.

How to use

Set the following value to true in config/environments/development.rb:

config.action_view.annotate_rendered_view_with_filenames = true

Add the <% if Rails.env.development? %> block in your
layout file:

<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>

<%= yield %>

<% if Rails.env.development? %>
  <script type="module" src="https://cdn.skypack.dev/@aki77/rails-template-inspector"></script>
  <rails-inspector url-prefix="vscode://file" root="<%= Rails.root %>" combo-key="command-shift-v"></rails-inspector>
<% end %>
</body>
</html>

This package uses custom URL scheme to open view files in editors, so please change url-prefix attribute in <rails-inspector> element per your favorite editor. Here are examples:

Visual Studio Code: vscode://file
RubyMine: x-mine://open?file=
MacVIM: mvim://open?url=file://
Emacs: emacs://open?url=file://

How to work

By enabling config.action_view.annotate_rendered_view_with_filenames, this package can search HTML comments generated by Rails. It also uses Lit to implement custom <rails-inspector> elements.

I hope you enjoy rails-template-inspector!

aki77 / rails-template-inspector

<rails-inspector>

This custom element allows users to jump to local IDE code directly from browser element by just a simple click. It supports Rails templates.

Usage

In config/environments/development.rb:

config.action_view.annotate_rendered_view_with_filenames = true

In app/views/layouts/application.html.haml:

<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>

<%= yield %>

<% if Rails.env.development? %>
  <script type="module" src="https://cdn.skypack.dev/@aki77/rails-template-inspector@^0.3.0"></script>
  <rails-inspector url-prefix="vscode://file" root="<%= Rails.root %>" combo-key="command-shift-v"></rails-inspector>
<% end %>
</body>
</html>

Attributes

url-prefix: Custom URL Scheme for editor. (default: vscode://file)
- Examples
  - Visual Studio Code: vscode://file
  - RubyMine: x-mine://open?file=
  - MacVIM: mvim://open?url=file://
  - Emacs: emacs://open?url=file://
combo-key: Key to toggle inspector. (default: meta-shift-v)
- any number of modifiers…

View on GitHub

Blog

Introducing rails-template-inspector: Open your view files by clicking browser elements

Junichi Ito