Using source maps in DevTools #DevToolsTips

Understand how DevTools uses source maps, and how you can disable, configure and load source maps.

Chapters:
0:00 Intro
0:13 Developer resources tab
0:40 Identify the generated file
1:15 Auto pretty-print
1:28 Disable source maps
2:07 Debug with source maps
2:19 Add source map
3:03 Debugging preview with source maps
3:28 Source map limitation: JavaScript
4:04 Source map limitation: CSS
4:58 How DevTools display source files
5:55 View authored files first
6:21 x_google_ignoreList

Resources:

Questions? Tweet to us:

#DevToolsTips #Chrome #Developer

[riddixdan]

great video, right what I needed but one thing though, wish we could somehow apply sourcemap to stacktraces after the fact. basically, some error happens, we send an api request to save the stacktrace, but that stacktrace is minified, question is, how could we unminify the stacktrace. or is the solution just finding the js asset that threw and apply sourcemap visualisation to the whole file and then go function call by function call?

[tomaszojko]

please consider updating this tutorial. were is the "developer options" tab in the current version ?

[daa]

please help : i got this popup called about:blank but it's in Devtool, in source under page and not some empty page . the site always pauses debugger when ad is around but my attempts to remove it for good aren't working as ad blocker can't detect it/ can't hide it as i can't click it to remove it when ad blocker has the hide ad interface open and google completely has no idea what i'm asking so any suggestions? while ad is open call stack is full of annoymous and stuff when it should be empty.