JavaScript Authoring Tooling

on YouTube ↗20m

" summary

Chrome DevTools now edits on-disk projects with workspaces and maps compiled CSS back to Sass via Source Maps so live edits persist and reload (demo succeeds in Chrome Canary). Package management mention: Bower registry exceeds ~2,200 components. Performance tools include a new flame chart for per-frame CPU stacks, a canvas/webgl frame profiler, FPS and continuous repaint modes, paint/layer borders, an object-allocation tracker, and layout-thrashing detection — many features behind experiments but generally functional.

AI-written summary · about

" chapters (9)

1. 0:00Introduction
2. 0:50Recap of 2013
3. 1:50Workspaces
4. 4:40Dev Tools
5. 9:06Package Management
6. 10:27Performance
7. 15:36Canvas Profiler
8. 16:37Performance Features
9. 18:10Object Allocation Tracker

" related talks

• 35mOptimise your Web Development WorkflowUmar Hansa · ffconf 2016
• 20mGoing steady with the Chrome Dev ToolsPaul Irish · JSConf US 2011
• 51mModern CSS Development: Tooling & WorkflowsUmar Hansa · CSS Day 2023
• 57mPanel 7: Testing and toolingRemy Sharp, Paul Irish, Simon Mavi Stewart, David Blooman, Ivan Žužak · Edge Conference 2013
• 33mTooling For The Modern WebApp DeveloperAddy Osmani · dotJS 2012
• 37mAll tooled up and nowhere to go?Christian Heilmann · HalfStack Online May 2020
• 49mEffective Browser JavaScript DebuggingVance Lucas · Dutch PHP Conference 2017
• 43mWork Smarter, not Harder with Chrome DevToolsDominika Zając · React Paris 2025