Does source-maps in style tags work?
Asked Answered
M

1

10

I'm having problems with CSS within a tag and source-maps.

In order to improve the load time of my project, I have changed the way I put the CSS in my HTML, turning this:

<html>
    <head>
      <link rel="stylesheet" href="css/styles.css">
    </head>
  <body>
    <h1>Source-maps working wonderfully</h1>
  </body>
</html>

Into this:

<html>
    <head>
      <style>
        h1 { color: red };

        //more css

        /*# sourceMappingURL=css/style.css.map */
      </style>
    </head>
  <body>
    <h1>Source-maps not working :(</h1>
  </body>
</html>

Basically, during the building process, the original CSS file generated with sassc (with sourcemaps flag) is dumped into the html that will be served.

I am having troubles because it does not recognise the source-maps when the CSS is inside a tag but it does it perfectly when i use the tag . Am I missing an extra annotation or it is not supported?

I'm using chrome.

Malignancy answered 19/8, 2015 at 8:47 Comment(4)
There is a bug about this in Chromium about source maps in inline style tags, but based on this link, it should be fixed a long time ago: code.google.com/p/chromium/issues/detail?id=456062 Not sure if Google Chrome is using the fixed Chromium core or not ...Satin
Source maps should work from the style tags however I suggest that you combine all your CSS files into a single CSS and load that the first way - this may slow down the first page but all the rest of the website pages will load faster.Glinys
This might be an ugly hack, but you could also generate the embedded source map and then drop it inline in the tag... again, pretty ugly but if you're using a templating language for HTML it could be manageable.Blob
In Chrome it currently kinda works/kinda fails, no matter if the sourcemap itself is external or embedded as a data uri. In my case it shows me a source, but the wrong position in a wrong file, as if it uses the wrong line for evaluating the source. Btw. the same approach for script tags work in Chrome, but fails in Firefox.Antiparticle
W
2

/*@ sourceMappingURL= is the old syntax, /*# sourceMappingURL= should be used instead.

The new Syntax is implemented in all major browser source and Internet explorer 11+ source.

Chrome dev tools

  1. Open Developer Tools F12
  2. Open Settings F1.
  3. Click "Enable CSS source maps" checkbox

Firefox dev tools

  1. Open Developer Tools F12
  2. Open Toolbar Options (Cog on right).
  3. Click "Show original sources" checkbox

Internet Explorer dev tools

  1. Open Developer Tools F12
  2. Open Debugger panel Ctrl+3
  3. click the last icon on the right

Safari dev tools & Firebug

  • enabled by default.
Whiny answered 12/5, 2016 at 14:38 Comment(1)
The OP used the new syntax, so this is not really an answer to his problem. But how they can be enabled, may be useful for others.Antiparticle

© 2022 - 2024 — McMap. All rights reserved.