1375887 - Feature Request: support source maps for HTML (DOM inspector)

Status: NEW

(DevTools :: Inspector, enhancement, P5)

Description

[Kyle Simpson]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.109 Safari/537.36

Steps to reproduce:

I use a template engine for my websites and I would like to be able to view the original template content, rather than the composited DOM, when I open the DOM inspector. My template engine is capable of producing the appropriate source maps, I just need the support in devtools to use it.


Actual results:

Source maps are not currently supported for HTML/DOM Inspector.


Expected results:

I would propose to use:

<!--# sourceMappingURL=/path/to/map -->

...at the bottom of the main HTML page response sent to the browser, to signal needing to get the sourcemap for the HTML/DOM.

Of course, the HTTP header approach to this should also be made to work.

Comment 1

[Tom Tromey :tromey]

It is a not unreasonable approach, but I think the inspector works by just
examining the existing DOM, and as far as I know it doesn't have access to the
line or column numbers; or the ability to display something "more synthetic".

Comment 2

[Kyle Simpson]

I get your point about line numbers.

It may perhaps be more appropriate to think about this feature in reference to the "View Source" tool instead of the DOM inspector. For some pages, the DOM is constantly changing, so keeping a mapping back from live DOM elements to the original source (templates) may not make sense. But it should be straightforward to map from the originally delivered HTML to the original source. Of course, just like with code, it'd be helpful if I could see both the actual HTML the page was built from AND the original template content. Switching between them is quite useful to handle different use cases.

Alternately, I would be OK if the DOM Inspector had an "Original Source" kind of tab added to it. The default view of the inspector can still be the live DOM, but I can click to switch into that other mode if I'm trying to see where the page state came from. For example, there may very well be sites where the dynamic nature of the DOM isn't much if any, so the original source templates are closely related to the current state of the page.

I should also mention that some sites (like mine) not only are delivered by templates from the server, but also use dynamic templates in page to create dynamic DOM elements. So in that scenario, if the page/app had a way to "inject" the sourcemaps info dynamically for each newly templated item (maybe on a per-DOM-element basis), then it would still be reasonable to still show these templates in the DOM inspector instead of only in view-source.