RS School '20
Chrome DevTools
Todays agenda
- DOM elements manipulation & styling
- Source code debugging tools
- Analyze application's network requests
- Assess & review application's performance
Who?
Elements tab
- Dock side
- Selecting elements: DOM Tree, inspect element
- Element modification: attributes, innerText, etc.
- Working with styles: change, remove, override
- Styles tools: :hov, .cls, color picker, numeric ranges
- Computed: box model, resulted css lookup
- Responsive & mobile device view
Console tab
- Logging
- Log levels & filtering
- Log grouping
- Execution timing
- DOM elements referencing
- $_, $0 references
Sources tab
- Debugger: explicit statement
- Debugger: breakpoints, steps execution
- Accessing variables when debugging
- Watch, call stack
- Workspaces
- Source maps & pretty print
Network tab
- Request type filtering
- Dive into fetch request
- Network speed presets & offline mode
- Caching
Application tab
- localStorage
- sessionStorage
- cookies
- service workers
- clear all
Performance tab
- Creating a snapshot
- Screenshots
- Call stack
Memory tab
- Creating a memory snapshot
- Single snapshot view
- Comparison view: Detached HTML
Security tab
- TLS certificates
Audits tab
- Performance
- Accessibility
- SEO optimizations