We can use CSS source map files to aid CSS debugging

1

We don’t have to be embarrassed by large, undebugable CSS files any longer!

I discovered this while working with Sass in another project. The .scss files are both compiled and minified into an equally-useless CSS file that is parsed by the browser. But then I realized while inspecting the page that I could navigate to the styles and Chrome DevTools brought me straight to the raw scss file. I think we can use CSS source map files to do the same thing for EWL.

2 Likes
2

Sounds pretty awesome. Questions:

  1. Do you have to expose the source file (.scss in this case) to the browser in addition to the compiled CSS file?
  2. Do you have to expose the source map file to the browser?
  3. What does a source map file look like? Will be be able to easily generate it?
  4. Does this only work in Chrome?
3
  1. Yes
    *Source file can be anything, does not need to be .scss
  2. Yes
  3. Well, the entire spec is 8 pages. I don’t totally understand what they’re saying yet, but it appears you basically just give a coordinate (row,column) mapping the lines of the input and output.
  4. “The Chrome and Firefox developer tools both ship with built-in support for source maps.” - Treehouse

Great blog post about them: http://blog.teamtreehouse.com/introduction-source-maps

CSS source map spec: https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit

1 Like