What are source maps?

Join Jecelyn in this episode of DevTools Tips and discover how source maps can improve your debugging workflow. Learn why source maps are essential, how they enable us to debug code in its original form, and get tips on how to generate and use them efficiently.

Chapters:
0:00 Intro
0:20 World without source maps
1:05 Front end build process
1:46 Compare compressed and original code
2:12 Debugging compressed code
2:35 Identify source map files
2:44 Configure source map settings
2:49 Anatomy of source maps
3:15 Understand and visualize mappings in source maps
4:16 Source map extensions
5:00 Improve debugging with x_google_ignoreList
5:40 Configure x_google_ignoreList
5:53 Upcoming & learn more

Resources:
What are source maps → https://goo.gle/source-maps
Source maps specifications → https://bit.ly/sourcemap
Understanding x_google_ignoreList → https://goo.gle/ignore-list
Source map visualizer → https://bit.ly/sourcemap-visualize
Variable-length quantity (VLQ) → https://bit.ly/vlq-wiki

Questions? Tweet to us:
Jecelyn Yeen → https://goo.gle/jecfish
Chrome DevTools → https://goo.gle/chromedevtools

Catch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

#DevToolsTips #Chrome #Developer