Your Browser Is Your Best Friend for Web Development
summary
Shows how modern browsers (Firefox Developer Edition and Chrome Canary) can speed web development by letting developers edit and test directly on the page. Demonstrations include live-editing HTML/CSS (border-radius, colors, grid and flex visualizers), using the JavaScript debugger with breakpoints and console execution to patch production, accessibility contrast checks, a PageSpeed-style performance audit, and installing extensions to push CSS to a server for hotfixes.
AI-written summary · about
chapters (9)
- 0:00Welcome
- 6:53Introduction
- 13:59Browser tools for HTML/CSS
- 18:13Device simulation & CSS grids
- 21:03Debugging JavaScript live
- 24:12Accessibility & web performance
- 26:59Useful extensions
- 29:51Summary
- 31:13Q&A
related talks
20mGoing steady with the Chrome Dev Tools
35mOptimise your Web Development Workflow
47mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
37mAll tooled up and nowhere to go?
25mDevTools Deep Dive
20mJavaScript Authoring Tooling
30mHow to effectively use the dev tools in all the browsers
30mEnter Inspector Inception: Let's See How Browser Developer Tools Work!