Go beyond console.log to master all the built-in tools available in Google's Chrome Developer Tools to edit, debug, and profile your web applications! You'll learn to step through your code with the debugger, audit web page performance on top of simulated network conditions. And remove "page jank" when a site isn't keeping up.
Overview
Syllabus
- Introduction
- DevTools History
- Elements & Network Panels
- Performance, Console, & Security Panels
- Sources, Application, & Memory Panels
- Lighthouse, Device Emulation, & Element Finder
- Quick Edits: CSS, HTML, & Scroll Into View
- Quick Edits: Computed Styles & Specificity
- Quick Edits: HTML Breakpoints, Themes, & Accessibility
- Quick Edits Exercise
- Quick Edits Solution
- Workspaces
- Workspaces Exercise
- Workspaces Solution
- Step Through Debugging
- Step Through Debugging Exercise
- Step Through Debugging Solution and Q&A
- Network Performance & Network Waterfall
- Network Performance Q&A
- Measuring Real User Performance
- On-Page Performance
- Performance Panel & Page Jank Tips
- Layout Thrashing Exercise
- Layout Thrashing Solution
- Running Node.js
- Memory Leaks & Memory Heap Snapshots
- What Can Slow Down a Website
- Simulating Network Conditions
- Lighthouse Audits
- Wrapping Up
Taught by
Jon Kuperman
