Browser DevTools Cheat Sheet

A guide to Chrome and Edge DevTools panels, console API methods, keyboard shortcuts, and network-tab techniques for debugging.

2 PagesBeginnerMar 15, 2026

Core DevTools Panels

What each major panel is for.

Elements- Inspect and live-edit the DOM tree and computed CSS styles
Console- Run JavaScript, view logs/errors, interact with the page context
Sources- Set breakpoints, step through code, view/edit files with the debugger
Network- Inspect every request: headers, timing, payload, response, status code
Performance- Record and profile CPU, rendering, and layout activity over time
Application- Inspect storage: cookies, localStorage, IndexedDB, Service Workers, cache
Lighthouse- Automated audits for performance, accessibility, SEO, and best practices

Useful Console API Methods

Beyond console.log — methods that speed up debugging.

javascript

console.log('info message');console.warn('warning');console.error('error');console.table([{ id: 1, name: 'Ada' }, { id: 2, name: 'Grace' }]); // renders as a tableconsole.group('User Details');console.log('Name: Ada');console.groupEnd();console.time('fetchData');await fetchData();console.timeEnd('fetchData'); // logs elapsed msconsole.assert(1 === 2, 'This logs because the assertion is false');console.trace(); // print the current call stack// $0 refers to the currently selected element in the Elements panel$0.style.border = '2px solid red';

Keyboard Shortcuts (Chrome/Edge)

The shortcuts worth memorizing.

text

Ctrl/Cmd + Shift + I    Open DevToolsCtrl/Cmd + Shift + C    Toggle element inspector (pick an element)Ctrl/Cmd + Shift + J    Open Console directlyCtrl/Cmd + [ or ]       Switch between DevTools panelsCtrl/Cmd + Shift + P    Open the Command Menu (run any DevTools action)Ctrl/Cmd + Shift + M    Toggle device/responsive modeF8 or Ctrl + \          Pause/resume script execution while debugging

Network Tab Tips

Getting more out of the Network panel.

Disable cache- Check 'Disable cache' while DevTools is open to always fetch fresh assets
Throttling- Simulate Slow 3G/Fast 3G to test performance on poor connections
Filter by type- Filter requests by Fetch/XHR, JS, CSS, Img, WS to cut through noise
Copy as cURL- Right-click a request → Copy → Copy as cURL to reproduce it in a terminal
Waterfall timing- See DNS lookup, TCP handshake, TTFB, and download time per request
Preserve log- Keep request history across page navigations/redirects for debugging

Pro Tip

Use conditional breakpoints and logpoints in the Sources panel (right-click a line number) instead of sprinkling console.log or debugger statements through your source — you can add and remove them without redeploying code.

Was this cheat sheet helpful?

Web Security Basics (XSS/CSRF) Cheat Sheet

Service Workers Cheat Sheet

Explore Topics

#BrowserDevTools#BrowserDevToolsCheatSheet#WebDevelopment#Beginner#CoreDevToolsPanels#Useful#Console#API#Functions#Networking#APIs#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services