137

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

Alexander Abakumov
  • 13,617
  • 16
  • 88
  • 129
Jack Allan
  • 14,554
  • 11
  • 45
  • 57

2 Answers2

205

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

Garbee
  • 10,581
  • 5
  • 38
  • 41
  • 11
    Thanks I saw that. Unfortunately changing this option requires a refresh before it takes effect. I was hoping there would be some way to toggle the option without a refresh. – Jack Allan Jan 26 '16 at 01:27
  • 2
    Thanks, I'm curious as to why this is necessary as surely it's always running the es5 under the hood and the source mapping simply informs the debugger as to which line the current statement is on in the source code? – Jack Allan Jan 26 '16 at 10:49
  • Because the sourcemap settings are checked at load-time and not during run-time. Most likely for memory and performance reasons due to overhead being required for this to be handled at run-time. You can file a feature request on the [issue tracker](http://crbug.com/new) to see if it can be re-configured to be done at runtime. – Garbee Jan 26 '16 at 11:02
  • 11
    For those struggling to find these settings like me, see this: https://i.imgur.com/9aMlBfg.png – joshcomley Oct 24 '16 at 10:22
  • just great. I cannot even find and inspect static variables with source maps. What a stupid solution. – user1050755 May 05 '17 at 19:07
  • 4
    I just tried this and it does seem to have an immediate effect, i.e. no page refresh seems to be required any more. – Jackson Aug 16 '17 at 18:02
  • I tried it in Node.js Chrome dev tools and I needed to restart my app. – vaughan Aug 08 '18 at 11:45
  • This appears to have changed for my version of chrome. – jgmjgm Apr 01 '19 at 10:29
  • Is the any command line flag to disabled this automatically? I have a test runner that forgets my preference every time it is launched. – kiewic Aug 28 '20 at 05:42
  • No way to turn off automatically. Flags do not exist for individual devtools settings – Garbee Aug 28 '20 at 10:41
0

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

Scotty Waggoner
  • 3,083
  • 2
  • 26
  • 40
  • 12
    When I double-click on a line number, it adds and then removes a breakpoint. Am I missing something? – emclain Aug 30 '17 at 22:29
  • Idk. It only seems to do it some of the time. And only if Chrome seems to like the sourcemap. You could try some different lines or different projects but I don't really have any better suggestions. Chrome should support this better. – Scotty Waggoner Aug 30 '17 at 22:33
  • In case that works, how will you toggle breakpoints on a line? :) – loopmode Nov 24 '21 at 07:55