Panel 7: Testing and tooling

on YouTube ↗57m

" summary

Panel covers concrete tools and workflows: automated CSS checks with Fighting Layout Bugs, CI running Dojo 2 tests via Travis + Sauce Labs, Telemetry for paint/FPS metrics and Endure for six‑hour memory traces, and device clouds like BrowserStack or DeviceAnywhere. DevTools now capture canvas frames (example showed ~4,300 context calls), step through draw calls, and trace rendering; Chrome for Android beta ships multi-threaded painting to remove blank frames. Web automation standardizes around WebDriver APIs while module tooling splits between Bower, Browserify/NPM and ES6 transpilers.

AI-written summary · about

" chapters (11)

1. 0:00Introduction
2. 1:08Tooling ecosystem overview
3. 8:19Browser developer tools
4. 16:18Upcoming development trends
5. 17:22Mobile testing challenges
6. 23:12Mobile tools and workflows
7. 30:14DevTools vs IDE
8. 35:03Emulators and device labs
9. 38:53Package management and ES6
10. 43:06Tool standardization
11. 50:16Network testing and CORS

" related talks

• 20mJavaScript Authoring ToolingPaul Irish · Fluent 2013
• 35mOptimise your Web Development WorkflowUmar Hansa · ffconf 2016
• 47mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!Mike Herchel · Frontend United 2018
• 19mWorking Well: The Future of Web TestingTrent Willis · dotJS 2017
• 33mTooling For The Modern WebApp DeveloperAddy Osmani · dotJS 2012
• 50mRocking Out with Browser-Based Developer toolsMike Herchel · DrupalCamp Spain 2017
• 28mGetting down to brass tacks: Using chrome dev tools to level up your applicationsKen Wheeler · React Miami 2023
• 31mA Modern Front-End WorkflowUmar Hansa · Render Conference 2017