Search code examples
cssgoogle-chromewebkitsource-maps

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?

Solution

  • 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.