Debugging & DevTools

on YouTube ↗42m

" summary

Chrome DevTools now surfaces concrete fixes: Group by author and hide ignored sources reorder sources so original TypeScript/TS files appear above minified bundles, frameworks can mark files to hide via source‑map flags, and third‑party stack frames get collapsed. A 6,000‑response survey shows console.log still dominates, so DevTools adds grouped breakpoints, logpoints, live expressions, console utilities ($0, monitor), a new unified headless mode, and a recording panel that exports flows to Cypress and WebDriver. Source‑map spec remains v3 (2011) and is being hardened for consistency.

AI-written summary · about

" chapters (9)

1. 0:00Introduction
2. 1:24Modern web debugging
3. 4:44Improved debugging features
4. 8:43Understanding source maps
5. 13:25Breakpoints and logging
6. 17:13Challenges in debugging
7. 22:43DevTools productivity tips
8. 30:47Advanced tool usage
9. 35:53Closing and Q&A

" related talks

• 43mModern web debugging with devtoolsJecelyn Yeen · BrazilJS Conf 2024
• 50mModern Web DebuggingJecelyn Yeen · SmashingConf Freiburg 2023
• 28mModern Web DebuggingJecelyn Yeen · JSNation 2023
• 29mEssential JavaScript debugging tools for the modern detectiveRebecca Hill · JSConf Budapest 2019
• 33mEssential JavaScript debugging tools for the modern detectiveRebecca Hill · You Gotta Love Frontend 2019
• 05mDebugging, a step away from the consoleAdam Weeks · dotJS 2018
• 28mEssential JS debugging tools for the modern detectiveRebecca Hill · localhost conference 2019
• 25mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!Mike Herchel · DevFest Florida 2019