Optimise your Web Development Workflow

on YouTube ↗35m

" summary

Live demos show Chrome DevTools actually doing things: native Node.js debugging attached to a running process with breakpoints and live edit, an in-DevTools terminal that runs node, and a filesystem-backed workspaces 2.0 that writes files and triggers build tasks. Performance tools include per-line CPU profiling, FPS and paint profilers, and a new CSS coverage recorder that marks unused rules after arbitrary interactions. Several experimental features work during the talk and most demos succeed.

AI-written summary · about

" chapters (12)

1. 0:00Start
2. 4:24LAYOUT EDITOR
3. 6:23CUBIC BEZIER EDITOR
4. 7:21PERFORMANCE
5. 8:50PAINT PROFILER
6. 10:40LINE LEVEL PROFILING
7. 12:24CONSOLE TIMING
8. 13:04TIMELINE MARKING
9. 15:11DEVELOPMENT WORKFLOW
10. 20:01CUSTOMISING
11. 23:27CONSOLE API
12. 24:02REQUEST BLOCKING

" related talks

• 20mGoing steady with the Chrome Dev ToolsPaul Irish · JSConf US 2011
• 20mJavaScript Authoring ToolingPaul Irish · Fluent 2013
• 49mEffective Browser JavaScript DebuggingVance Lucas · Dutch PHP Conference 2017
• 37mAll tooled up and nowhere to go?Christian Heilmann · HalfStack Online May 2020
• 13mNew Chrome Dev Tool Functions that will blow your mindPrashant Palikhe · Frontend Developer Love 2018
• 28mGetting down to brass tacks: Using chrome dev tools to level up your applicationsKen Wheeler · React Miami 2023
• 47mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!Mike Herchel · Frontend United 2018
• 33mChrome DevTools, From Prototype to ProductionPhilippe Antoine · DevFest du Bout du Monde 2020