Problem

A lot of times, I want to be able to quickly find out which part of my codebase was responsible for rendering a DOM element. Maybe I want to temporarily get rid of a button that was added by another team member. Maybe the project has 100K+ lines of code and I dont remember which one of my Rails/backbone/ember views the UI element came from. While grep or ack usually does the job, it can sometimes take a while to filter through all those potential matches.

Solution

To make my life easier, I built a tool that shows you the exact file and line number origin of a DOM element in its data-attribute. You can check it out at https://github.com/redgetan/view_inspect. It only works for Rails, but it supports both server-side or client-side templates.

How it Works

<li>
  <%= download_count rubygem %>
  <a href="<%= rubygem_path(rubygem) %>">
    <strong><%= rubygem %></strong>
    <%= short_info(rubygem.versions.most_recent) %>
  </a>
</li>

We preprocess the templates with an HTML Parser. As crazy as it sounds, it actually works and this method alone accounts for majority of templating engine support (i.e. ERB, JST, Handlebars, EJS, Eco). Basically, we first stub out template expressions such as <%= download_count rubygem %> in the sample ERB snippet shown above. Then, we use the Nokogiri HTML Parser to parse the resulting valid HTML fragment, and add file:line information to its child nodes. Once that’s done, we bring back the original ERB expressions and remove the stubs.

This doesn’t work on templates such as Haml or Slim though since they’re not HTML. What we do instead is monkeypatch the template engine’s compiler or parser to add file:line information whenever it encounters a tag element.

Examples

Conclusion

If you think library would help you, give it a try, head over to redgetan/view_inspect and start using it in your Rails app.