DOM source location finder for Rails
Ruby
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
test
.document
.gitignore
Gemfile
LICENSE.txt
README.markdown
Rakefile
view_inspect.gemspec

README.markdown

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.