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

(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 …


This content originally appeared on DEV Community and was authored by Junichi Ito

(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.

Animated screenshot

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!

GitHub logo 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.

Demo

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.2.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


This content originally appeared on DEV Community and was authored by Junichi Ito


Print Share Comment Cite Upload Translate Updates
APA

Junichi Ito | Sciencx (2022-07-12T03:02:51+00:00) Introducing rails-template-inspector: Open your view files by clicking browser elements. Retrieved from https://www.scien.cx/2022/07/12/introducing-rails-template-inspector-open-your-view-files-by-clicking-browser-elements/

MLA
" » Introducing rails-template-inspector: Open your view files by clicking browser elements." Junichi Ito | Sciencx - Tuesday July 12, 2022, https://www.scien.cx/2022/07/12/introducing-rails-template-inspector-open-your-view-files-by-clicking-browser-elements/
HARVARD
Junichi Ito | Sciencx Tuesday July 12, 2022 » Introducing rails-template-inspector: Open your view files by clicking browser elements., viewed ,<https://www.scien.cx/2022/07/12/introducing-rails-template-inspector-open-your-view-files-by-clicking-browser-elements/>
VANCOUVER
Junichi Ito | Sciencx - » Introducing rails-template-inspector: Open your view files by clicking browser elements. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/07/12/introducing-rails-template-inspector-open-your-view-files-by-clicking-browser-elements/
CHICAGO
" » Introducing rails-template-inspector: Open your view files by clicking browser elements." Junichi Ito | Sciencx - Accessed . https://www.scien.cx/2022/07/12/introducing-rails-template-inspector-open-your-view-files-by-clicking-browser-elements/
IEEE
" » Introducing rails-template-inspector: Open your view files by clicking browser elements." Junichi Ito | Sciencx [Online]. Available: https://www.scien.cx/2022/07/12/introducing-rails-template-inspector-open-your-view-files-by-clicking-browser-elements/. [Accessed: ]
rf:citation
» Introducing rails-template-inspector: Open your view files by clicking browser elements | Junichi Ito | Sciencx | https://www.scien.cx/2022/07/12/introducing-rails-template-inspector-open-your-view-files-by-clicking-browser-elements/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts