Is there something like source maps for CSS?

问题

I'm dynamically adding CSS tags to a page with jQuery:

$('<style type="text/css"/>').text(css).appendTo(document.head);

When viewed in the Chrome Developer Tools, all of the CSS appears as "localhost", which isn't always helpful:

Is there anything like Source Maps for CSS which would let me identify the source of the CSS to the debugger?

回答1:

Add a sourceURL to the inline style tag as you add it.

/*@ sourceURL=mystyles.css */

This will give that inline style tag a temporary name that will be used inside of the DevTools for navigation.

回答2:

It is identifying the source of the CSS. It only shows up as localhost because the source of the style is from the internal javascript on your localhost homepage. if you click the link to the rule location, it should still take you to the in-line javascript that dynamically set your style.

As for a source map, have you tried expanding the "Computed Style" section and then expanding the specific style with which you want to view the inheritance hierarchy?

来源：https://stackoverflow.com/questions/15818636/is-there-something-like-source-maps-for-css