Cmd Alt I - Chrome Dev tools

List of every day features used in Chrome dev tools

Transcript

1. Cmd + Alt + I
2. Giacomo Zinetti Giko A Geek Frontend Developer and... Ducatista Star Wars Lego builder Board game player Tchouker https://giko.it @gcmznt
3. Panes - Elements - Console - Sources - Network - Performance - Memory - Application - Security - Audits - Settings
4. Elements - Find by CSS selector - $0 - Scroll into view - Hide element - Dom breakpoints - Computed CSS
5. Console - copy() - Preserve - .debug() .log() .info() .warn() .error() - .dir() - .group()/.groupCollapsed() - .groupEnd() - .time() - .timeEnd() - .profile() - .profileEnd() - .timeStamp() - .trace() - .count() - .assert()
6. Sources - Pretty print - Cmd + P - Script snippets - Blackbox - debugger;
7. Network - Throttling - Capture screenshots
8. Application - Manifest - Service workers - Clear storage
9. Security - Certificate
10. Audits (Lighthouse) - PWA - Performance - Accessibility - Best practices
11. Settings - Dark theme - Blackbox
12. Performance - Flame chart - Paint and Layers - CPU throttling - Times in Source pane - Bottom-up - By domain
13. Drawer / Tools (ESC) - Animations - Console - Coverage - Network condition - Remote devices - Rendering - Request blocking - Search - Sensors
14. Extra - Device mode - Download screenshot - Show media queries - Cmd + shift + P - Sort panes
15. Grazie! @gcmznt