Using source maps in DevTools

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


Duration: 6:59
7,241 views
265

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:
https://goo.gle/devtools-source-maps
https://goo.gle/ignore-list

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-10What's new in Chrome Extensions
2023-05-10The 9 most effective Core Web Vitals opportunities of 2023
2023-05-10How to optimize web responsiveness with Interaction to Next Paint
2023-05-10Building communications and contact center apps for the Web
2023-05-10How to develop kiosk apps for ChromeOS
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


Tags:
Chrome
Developers
Google
Web
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
sourcemaps