Is there a quick way to switch from the jsx code shown in Chrome DevTools to the raw ES5 and back again?
Add a comment
|
3 Answers
Open Developer Tools, go to "Settings" for Developer Tools, then uncheck Enable JavaScript Sourcemaps under the "Sources" settings.
10 Comments
Jack Allan
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
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?
Garbee
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 to see if it can be re-configured to be done at runtime.
joshcomley
For those struggling to find these settings like me, see this: i.imgur.com/9aMlBfg.png
Jackson Ray Hamilton
I just tried this and it does seem to have an immediate effect, i.e. no page refresh seems to be required any more.
|
The easiest and fastest way to toggle CSS or JS source maps in the Chrome debugger is to use Chrome's command palette:
- On macOS type cmd+shift+p (on Windows type ctrl+shift+p)
- Search for "source map"
- Select enable/disable for CSS or JS source maps, whichever you want to toggle:
Comments
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
3 Comments
emclain
When I double-click on a line number, it adds and then removes a breakpoint. Am I missing something?
Scotty Waggoner
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.
loopmode
In case that works, how will you toggle breakpoints on a line? :)