Chrome DevTools Elements and Network Panel Shortcuts

Chrome DevTools Elements & Network Shortcuts

Beyond debugging JavaScript, Chrome DevTools is essential for inspecting HTML structure, modifying CSS, and analyzing network traffic. These shortcuts help you work efficiently in the Elements and Network panels.

Elements Panel

• Inspect Element (⌘+⌥+C / Ctrl+Shift+C) — click any element on the page to select it in the DOM tree
• Edit as HTML (F2) — edit the selected element's HTML directly in the panel
• Delete Element (Delete / Backspace) — remove the selected element from the DOM
• Hide Element (H) — toggle visibility of the selected element (adds display: none)
• Navigate DOM (↑/↓) — move between elements in the DOM tree
• Expand/Collapse (→/←) — expand or collapse the selected element's children

CSS Editing

When working in the Styles pane:

• Add New Style Rule (+ button or click in empty area)
• Increment/Decrement Values (↑/↓) — change numeric CSS values by 1
• Increment by 10 (Shift+↑/↓) — change values by 10
• Increment by 100 (Shift+Page Up/Down) — change values by 100
• Increment by 0.1 (⌥+↑/↓ / Alt+↑/↓) — fine-grained adjustments
• Toggle CSS Property — click the checkbox next to any CSS rule to enable/disable it

Network Panel

• Record (⌘+E / Ctrl+E) — start or stop recording network requests
• Clear (⌘+K / Ctrl+K) — clear the network log
• Search Requests (⌘+F / Ctrl+F) — filter network requests by URL, header, or content
• Hard Refresh (⌘+Shift+R / Ctrl+Shift+R) — reload the page bypassing the cache

Screenshots

Chrome DevTools can capture screenshots via the Command Menu:

• Press ⌘+Shift+P / Ctrl+Shift+P and type "screenshot"
• Options: full page, visible area, selected node, or specific area

These shortcuts apply to Chrome, Chromium-based browsers (Edge, Brave, Arc), and partially to Firefox DevTools.