Modern Web Debugging

on YouTube ↗28m

" summary

Chrome DevTools shows what actually maps to authored files so stack traces and breakpoints point to your components rather than framework code and compiled bundles; features include hide framework frames, group by authored and deployed and a manual add-to-acknowledge for React. Breakpoint UX now groups by file and supports quick conditional and log-style breakpoints via command-click conditional/lockpoint. DevTools also supports overriding response headers, saving JavaScript snippets, and an “emulate focus” mode; source‑map spec limitations and how build tools must opt in are covered.

AI-written summary · about

" chapters (16)

1. 0:00Modern web debugging
2. 1:13Web dev evolution
3. 3:18Stack traces with framework hiding
4. 6:05View authored code
5. 7:50Source maps explained
6. 10:18Ignoring files in React
7. 12:49Breakpoint improvements
8. 14:36Breakpoint types in DevTools
9. 17:23Source map challenges
10. 19:52Standardizing source maps
11. 20:14Tailwind CSS tips
12. 21:20Override HTTP headers
13. 23:27JavaScript snippets
14. 24:55Emulate page focus
15. 26:00Run commands efficiently
16. 27:02Report DevTools bugs

" related talks

• 50mModern Web DebuggingJecelyn Yeen · SmashingConf Freiburg 2023
• 43mModern web debugging with devtoolsJecelyn Yeen · BrazilJS Conf 2024
• 42mDebugging & DevToolsJecelyn Yeen · jsday 2023
• 28mDevTools for the Progressive WebKenneth Auchenberg · JSConf Colombia 2016
• 27mChrome DevTools: State of the Union 2024 - Debugging React & BeyondAddy Osmani · React Summit US 2024
• 35mOptimise your Web Development WorkflowUmar Hansa · ffconf 2016
• 33mEssential JavaScript debugging tools for the modern detectiveRebecca Hill · You Gotta Love Frontend 2019
• 37mAll tooled up and nowhere to go?Christian Heilmann · HalfStack Online May 2020