Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How not to show transpiled files in Chrome Developer Tools when Ctrl + O

Both original & transpiled files are displayed when opening a file. I'd like only to show original files (Firefox dev tools do this). Possible ?

like image 707
Florian F Avatar asked Oct 17 '14 10:10

Florian F


People also ask

How do I stop Chrome DevTools from popping up?

Go to chrome://serviceworker-internals/?devtools and uncheck the "Open DevTools window and pause JavaScript execution on Service Worker startup for debugging" check box.

How do you stop an infinite loop DevTools?

click Chrome DevTools window to get focus on it, pause script with F8, Ctrl+\ or by clicking Pause script execution button, press mouse button for 1-3 seconds on the button again to see more options, move click action to square stop button on expanded menu to stop permanently script execution.


1 Answers

Firefox 23+ has the option to show original sources instead of transpiled scripts:

FF show original sources

Unfortunately, it seems you cannot enjoy this in Chrome. You can enable script mapping, or not, but you will always see the actual included files that are included in the source HTML file.

All of these tutorials and references seem to agree:

  • Source Maps 101 (Chrome, Windows)

Both files shown

  • Source Maps With CoffeeScript and Uglify.js (Chrome, OSX)

Both files shown

  • Using Source Maps with TypeScript (Chrome, Windows)

Both files shown

  • The Breakpoint Ep 3: The Sourcemap Spectacular with Paul Irish and Addy Osmani (Chrome Developers video)

Source and mapped files are shown

  • Source Maps in Chrome Dev Tools

Source and mapped files are shown

  • Enhance your JavaScript debugging life (Chrome, Windows)

Both original and compiled versions appear


It seems that if one really wants to hide the transpiled JavaScript files in DevTools, FireFox is the way to go for now (as of Chrome Canary 49).

like image 51
Drakes Avatar answered Sep 22 '22 08:09

Drakes