View Inspect
View Inspect shows you the exact file and line number of the server-side or client-side template that's responsible for rendering a DOM element. Instead of using grep to filter through a large codebase, the source location can be found right away in its data-attribute when you open up web inspector. Works with Rails 3 and 4. See below for templates supported and their required libraries.
Demo
Support
| Template | Required Library |
|---|---|
| Haml | haml |
| Slim | slim |
| ERB | any erb implementation |
| Handlebars | ember-rails, handlebars_assets |
| EJS | sprockets |
| JST | sprockets |
| Eco | sprockets |
Installation
group :development do
gem "view_inspect"
end
Warning
By default, this is only enabled for development to avoid exposing source code filepath information publicly. If you want to disable it in development (i.e you want to benchmark/profile your app), add this line on config/environments/development.rb
ViewInspect.disable = true
How it Works
Except for Haml and Slim where the compiler/parser is monkeypatched, view templates are augmented with source location metadata by preprocessing them with an HTML parser. Basically, we first stub out all template specific expressions (i.e. <% %> for erb) from a template file. Then, we use the Nokogiri HTML Parser to parse the resulting valid HTML fragment, and add file:line information to its child nodes. Once this is done, we bring back our original template expressions and remove the stubs. A little bit hacky but it works.
Server-Side Templates
If you just want to track file:line origin of server-side templates such as ERB and Haml, you don't have to do anything else. It should just work after enabling it on development.rb
Client-Side Templates
For client-side templates to work, they have to live in separate files as opposed to being embedded in script tags. Also, you might need to clear the sprockets cache on initial use and cache directory is usually stored in tmp/cache/assets. Alternatively, you can just clear the whole cache via:
rake tmp:clear
HTML Syntax Errors
ViewInspect depends on Nokogiri to preprocess a template and add file:line information to each node. If there's any invalid HTML in your file, Nokogiri would delete it, and sometimes your HTML would look different in the browser because of this.
If such errors exist, view_inspect would simply return the original file template without the source location metadata to avoid malformed html.
An alternative solution is to show a warning message to the user detailing where the HTML syntax errors are located so that the user can remove it. To enable this, you can set it by adding this line to config/environments/development.rb
ViewInspect.show_html_syntax_error = true
Copyright
Copyright (c) 2014 Reginald Tan. See LICENSE.txt for further details.
