What are source maps? #DevToolsTips
Channel: Chrome for Developers
Date: 2023-03-30

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