What are source maps?

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=FIYkjjFYvoI


Duration: 6:26
10,562 views
518

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



Other Videos By Chrome for Developers


2023-05-10Getting started with Attribution Reporting
2023-05-10What's new in Web on Android - updates to WebView, Custom Tabs, and more
2023-05-10How to build and integrate education apps with Google
2023-05-10What’s new in ChromeOS | Google I/O 2023
2023-05-03New in Chrome 113: WebGPU is here, First-Party Sets are rolling out, and more!
2023-04-27Using source maps in DevTools
2023-04-20View Transitions API rocks
2023-04-13Whats New In DevTools: Debugging, testing and CSS (Chrome 110 - 112)
2023-04-12Thinking on ways to solve 3D sci-fi text
2023-04-04New in Chrome 112: CSS nesting rules, no-op fetch handlers skipped, and more!
2023-03-30What are source maps?
2023-03-29Switch groups #Shorts
2023-03-17Privacy Sandbox: A view into industry's feedback
2023-03-09Thinking on ways to solve SWITCH GROUPS
2023-03-08New in Chrome 111: View transitions API, CSS color level 4 and more!
2023-03-03Privacy Sandbox: Preserving trust & usability with new APIs for a private web
2023-02-27Privacy Sandbox: Current stages of ads, measurement and content APIs
2023-02-24Prepare for Chrome's user-agent reduction
2023-02-23Discover CSS issues with DevTools | DevTools Tips
2023-02-17Privacy Sandbox: Journey and outlook
2023-02-15Improving your web app’s install experience


Tags:
What are source maps
how to use source maps
source map
source maps
Chrome Devtools
chrome developer tools
intro to devtools tips
what are devtools tips
how to use devtools tips
devtools tips tutorial
devtools
chrome
developer
developers
google developer
google developers
google chrome developers
chrome developer
chrome developers
google chrome
Jecelyn Yeen
sourcemap
source-maps
debugging
vite
angular
nuxt
webpack