Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
How to enable source maps for your browser.

How to enable source maps

Source mapping is a technique that "maps" your browser inspector's line numbers to the source file. This is useful when working with assets that are compiled from LESS, SASS, Coffeescript and so on. Source maps can also be used with minified assets that would normally have their line numbers removed. If you're curious, here's some more information regarding source maps.

Chrome

  1. Open Developer Tools.
    • Mac users: View > Developer > Developer Tools.
  2. Click the Settings cog icon in the upper-right corner of the Developer Tools window.
  3. Under the Sources section, check the box(es) for the source maps you want to enable.

Firefox

  1. Open the Developer Tools.
    • Mac users: Tools > Web Developer > Toggle Tools
  2. Click the Settings cog icon in the upper-left corner of the Developer Tools window.
  3. Under the Style Editor section, check the box for Show original sources.

Safari

Source-mapping is enabled by default.

Internet Explorer

Source-mapping is enabled by default in IE 11 with the Windows 8.1 update installed. No other versions of IE support source-mapping. Here's some more information from MSDN regarding IE11 and source maps.

thefonso commented Jun 22, 2016

Does IE 11 and/or EDGE support "CSS" source maps? the link provided regarding IE refers only to "Javascript" source maps.

I am using SASS and Edge is not using source maps, returning 404 as it's looking for .scss files on the server. Is there any information on Edge supporting source maps for CSS.

@jakebellacera, is it possible to disable source-mapping in Safari?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment