Skip to content

Instantly share code, notes, and snippets.

@jakebellacera
Last active March 13, 2023 13:01
Show Gist options
  • Save jakebellacera/336c4982194bcb02ef8a to your computer and use it in GitHub Desktop.
Save jakebellacera/336c4982194bcb02ef8a to your computer and use it in GitHub Desktop.
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.

@VadimCpp
Copy link

@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