Cheatsheet Chrome DevTools
Ferramentas de desenvolvimento do navegador Chrome
Chrome DevTools
22
cards found
Categories:
Versions:
Open and Navigate
Open DevTools
F12 (open)
Ctrl + Shift + I (open)
Ctrl + Shift + J (console directly)
Ctrl + Shift + C (inspect element)
Right-click → Inspect
Access the tools.
Navigate Between Panels
Ctrl + [ / ] (previous/next panel)
Ctrl + Shift + P (command palette)
Esc (toggle console drawer)
Ctrl + Shift + D (dock position)
Move around DevTools.
Command Palette
Ctrl + Shift + P
Useful commands:
"screenshot" → screen capture
"theme" → dark/light mode
"coverage" → unused code
"animation" → animation inspector
Quick actions.
Elements
Inspect Elements
Ctrl + Shift + C (selector)
Click the element
Hover → highlight
Ctrl + Z (undo DOM edit)
Drag to reorder
Explore the DOM.
Edit CSS
Styles panel → edit values
Click the color → color picker
Toggle checkbox → enable/disable
+ → add property
Force states: :hover, :active
Modify styles in real time.
Box Model and Layout
Computed tab → visual box model
Margin, Border, Padding, Content
Flexbox: "flex" badge on the element
Grid: "grid" badge + overlay
Visualize the layout.
DOM Breakpoints
Right-click the element:
→ Break on → subtree modifications
→ Break on → attribute modifications
→ Break on → node removal
→ Copy → Copy selector/outerHTML
Monitor DOM changes.
Console
Useful Commands
console.log(obj)
console.table(array)
console.dir(obj)
console.time('label')
console.timeEnd('label')
console.group('Group')
console.trace()
Console methods.
$ Selectors
$0 # selected element
$('selector') # querySelector
$$('selector') # querySelectorAll
$x('//div') # XPath
monitorEvents(el, 'click')
Console shortcuts.
Quick Debug
debug(fn) # breakpoint in the function
undebug(fn)
copy(obj) # copy to clipboard
keys(obj) # list keys
values(obj) # list values
Debug tools.
Filter and Clear
Ctrl + L (clear console)
Filter: Errors / Warnings / Info
Regex in the filter
Ctrl + F (search in console)
Preserve log (keep across navigation)
Manage console output.
Network
Monitor Requests
Network tab → reload the page
Filter: XHR, JS, CSS, Img, Media
Click the request → Headers/Payload
Ctrl + E (record/stop)
Disable cache (checkbox)
Analyze network traffic.
Inspect Response
Headers → status, timing
Payload → request body
Preview → formatted response
Response → raw response
Timing → detailed waterfall
Details of each request.
Throttling and Offline
Network conditions → Throttling:
Fast 3G / Slow 3G / Offline
Custom profile:
Download: 1.5 Mb/s
Upload: 750 Kb/s
Latency: 40ms
Simulate slow networks.
HAR and Analysis
Right-click → Save all the HAR
Import HAR for analysis
Waterfall → order and duration
Size → transferred size
Initiator → request origin
Export and analyze.
Performance
Record a Profile
Performance tab → ● (record)
Ctrl + E (start/stop)
Reload with recording active
Analyze: Main, Compositor, GPU
Screenshots timeline
Performance profile.
Core Web Vitals Metrics
LCP (Largest Contentful Paint)
FID (First Input Delay)
CLS (Cumulative Layout Shift)
TTFB (Time to First Byte)
FCP (First Contentful Paint)
Performance metrics.
Memory (Heap Snapshot)
Memory tab → Take snapshot
Compare snapshots (leaks)
Allocation timeline
Allocation sampling
Retainers → what keeps the object alive
Memory leak detection.
Advanced
Breakpoints
Sources tab → click the line
Conditional: right-click → Add
Logpoint: does not pause, only logs
Event listener breakpoints
DOM breakpoints (Elements tab)
XHR/fetch breakpoints
Breakpoint types.
Debug in Sources
F8 (continue)
F10 (step over)
F11 (step into)
Shift+F11 (step out)
Ctrl+P (open file)
Ctrl+Shift+F (search everywhere)
Execution control.
Lighthouse
Lighthouse tab → Generate report
Categories:
Performance
Accessibility
Best Practices
SEO
Mobile / Desktop
Automatic audit.
Application Tab
Local Storage / Session Storage
Cookies → view/edit/delete
Cache Storage / Service Workers
IndexedDB → explore data
Manifest → PWA config
Browser storage.