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?

Pavel Auramenka

Senior Software Engineer @ Inspectorio

TG: https://t.me/abramenal

GH: http://github.com/abramenal

@: pavel.auramenka@gmail.com

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

Q&A