Browser DevTools Reference
Complete guide to browser DevTools. Shortcuts, panels, console commands, and debugging tips for Chrome, Firefox, Safari.
Open DevTools
Chrome/Edge
F12 or Ctrl+Shift+I (Cmd+Opt+I Mac)
Ctrl+Shift+J (Cmd+Opt+J Mac)
Ctrl+Shift+C (Cmd+Opt+C Mac)
Firefox
F12 or Ctrl+Shift+I (Cmd+Opt+I Mac)
Ctrl+Shift+K (Cmd+Opt+K Mac)
Ctrl+Shift+C (Cmd+Opt+C Mac)
Safari
Cmd+Opt+I (Enable Develop menu first)
Cmd+Opt+C
Cmd+Opt+I then select
DevTools Panels
πElements: Inspect HTML, edit CSS live, debug layout
πConsole: Run JavaScript, view logs, debug errors
πSources: Debug JS with breakpoints, step through code
πNetwork: Monitor requests, check response times, debug API
β‘Performance: Profile page load, find bottlenecks
πΎMemory: Find memory leaks, analyze heap snapshots
π¦Application: Inspect storage: cookies, localStorage, IndexedDB
πSecurity: Check HTTPS, certificates, security issues
Console Shortcuts
$() - document.querySelector shortcut
$$() - document.querySelectorAll shortcut
console.log() - log messages
console.table() - display data as table
console.dir() - show object properties
console.clear() - clear console
debug(function) - break when function called
monitor(function) - log when function called
getEventListeners(element) - show event listeners
copy(object) - copy to clipboard
Network Panel Tips
Filter by type: JS, CSS, Img, Media, Doc
Disable cache: right-click reload icon
Throttle network: Slow 3G preset
Block requests: right-click Block request URL
Export HAR: right-click Save all as HAR
Check timing: click request for waterfall
Copy as cURL: right-click Copy as cURL
View headers: click request Headers tab
Elements Panel Tips
Edit CSS live: click style values to modify. Force element state: :hover, :focus, :active. Hide element: right-click Hide element. Break on subtree modifications: right-click Break on. Compute styles: Computed tab. Box model visualization: visual box diagram.
Sources Panel Debugging
Set breakpoint: click line number. Conditional breakpoint: right-click line number. Step over: F10. Step into: F11. Step out: Shift+F11. Resume: F8. Watch expressions: add variables to watch. Call stack: see function execution path. Scope: view local and global variables.
Performance Profiling
Record: click Record, interact with page, stop. FPS meter: check frame rate. Main thread activity: see JS execution. Layout shifts: find rendering issues. Network timeline: see request timing. Analyze bottlenecks: long tasks highlighted red. Save profile: export for comparison.