Tagging HTML elements with the source file

Question

Problem

So we have quite a big project with lots of different Partial Views and a client side data binding framework (Knockout.js in our case).

One of the more problemtic parts is that is getting harder and harder to figure out which partial view is rendering an element that I see on my page.

So I need to debug this particular DIV. Okay, where do I find it?

Usually I try to find a very specific class or ID close by this element and do a search through the whole platform - far from ideal.

Question

So I was thinking about the following; tagging all elements (in debug mode) with the source file where they have been generated.

Right now I'm thinking about something like a precompiler that adds a data-source="" to every element. I might refer to an ID within a dictionary to prevent repeating all the long filenames.

Before I'm reinventing the wheel:

• is there already something similar?
• are there better alternatives?

We're using ASP.NET MVC, but any hints to how other platforms do this are perfect too.

Answer 1

If you are using Visual Studio, I highly recommend the Web Essentials extension. Among many great features, it has one called "Inspect Mode", part of the larger "Browser Link" feature, that does exactly what you are looking for; it identifies the file that a particular DOM element came from. It might be worth a shot if that option is open to you.