CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-devtoolssource-maps
Jack Allan
Jack Allan

Reputation: 15004

Disable source maps in Chrome DevTools

Is there a quick way to switch from the jsx code shown in Chrome DevTools to the raw ES5 and back again?

Upvotes: 146

Views: 105874

Answers (3)

Alan
Alan

Reputation: 458

The easiest and fastest way to toggle CSS or JS source maps in the Chrome debugger is to use Chrome's command palette:

  1. On macOS type cmd+shift+p (on Windows type ctrl+shift+p)
  2. Search for "source map"
  3. Select enable/disable for CSS or JS source maps, whichever you want to toggle:

a screenshot of the Chrome command palette, showing options to toggle CSS source maps and JavaScript source maps

Upvotes: 4

Garbee
Garbee

Reputation: 10981

Open Developer Tools, go to "Settings" for Developer Tools, then uncheck Enable JavaScript Sourcemaps under the "Sources" settings.

Settings for Developer Tools

JS sourcemaps toggle

Upvotes: 216

Scotty Waggoner
Scotty Waggoner

Reputation: 3380

You can double click line numbers to jump from source files to unminified output files. Other than that it seems limited. See the comment below.

I found this to be useful during development. When using webpack-dev-server (or some other tooling) without minifying js, you can double click line numbers in the source files to jump to the compiled but unminified output file.

I just discovered this by accident and then found this comment from Dec 21, 2016: https://bugs.chromium.org/p/chromium/issues/detail?id=532174#c7

You can double click on the line number to jump into the original file, but that's pretty useless if the minified file has all newlines removed :(

Having word wrap would make this work better https://bugs.chromium.org/p/chromium/issues/detail?id=167287

I think there was some support for double clicking on a section of the minified file to jump into the source mapped file, but it seems to have regressed of late.

Ideally in a minified file with a source map, right clicking (or double clicking) anywhere in the minified file should allow jumping to that exact file, line and column

Upvotes: 0

Related Questions