CODEWITHSUNDEEP
cssgoogle-chromewebkitsource-maps
a paid nerd
a paid nerd

Reputation: 31512

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:

enter image description here

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

Upvotes: 10

Views: 863

Answers (2)

Paul Irish
Paul Irish

Reputation: 49142

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.

Upvotes: 10

liurr90
liurr90

Reputation: 1780

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?

Upvotes: 0

Related Questions