Tooling For The Modern WebApp Developer

on YouTube ↗33m

" summary

Shows concrete Chrome developer tools workflows: Canary ships features about 11 weeks before stable and reaches 311 million users; timeline and frames expose image-decoding and repaint jank; heap snapshots reveal detached DOM nodes causing a memory leak and lead to fixes (pre-scale images, remove naive window resize handler, drop stray references). Demonstrates live edit, Tinker autosave to source files, Snippets, SAS source mapping, SourceURL for CoffeeScript, mobile overrides and a Yeoman-style Yman scaffold that scaffolds, installs deps and builds with grunt.

AI-written summary · about

" chapters (14)

1. 0:00Introduction
2. 0:40Chrome Developer Tools
3. 3:05Events
4. 7:17Memory
5. 8:37Profiles
6. 11:28Live Edit
7. 15:57Tinker
8. 17:47SAS
9. 20:41Final Result
10. 21:28Source URL
11. 22:01Compile
12. 22:50Override Panel
13. 24:00Device Orientation
14. 25:16Style Output

" related talks

• 20mJavaScript Authoring ToolingPaul Irish · Fluent 2013
• 35mOptimise your Web Development WorkflowUmar Hansa · ffconf 2016
• 31mA Modern Front-End WorkflowUmar Hansa · Render Conference 2017
• 57mPanel 7: Testing and toolingRemy Sharp, Paul Irish, Simon Mavi Stewart, David Blooman, Ivan Žužak · Edge Conference 2013
• 37mAll tooled up and nowhere to go?Christian Heilmann · HalfStack Online May 2020
• 20mGoing steady with the Chrome Dev ToolsPaul Irish · JSConf US 2011
• 50mRocking Out with Browser-Based Developer toolsMike Herchel · DrupalCamp Spain 2017
• 47mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!Mike Herchel · Frontend United 2018