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?

Answers:

Answer

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

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.