Shortcuts: Opening DevTools
| Windows Shortcuts | macOS Shortcuts | Name | Description |
|---|---|---|---|
| F12 or Ctrl + ⇧Shift + I | ⌘Cmd + ⌥Option + I | Open Last Panel | Opens the panel used most recently. If DevTools were closed, they reopen in the last position (inline, docked to side, or in a separate window) |
| Ctrl + ⇧Shift + J | ⌘Cmd + ⌥Option + J | Open Console | Directly opens the Console panel for executing JavaScript code, viewing logs and errors |
| Ctrl + ⇧Shift + C | ⌘Cmd + ⇧Shift + C or ⌘Cmd + ⌥Option + C | Open Elements | Opens the Elements panel for DOM tree inspection and element style inspection |
Shortcuts: Global
| Windows Shortcuts | macOS Shortcuts | Name | Description |
|---|---|---|---|
| ? or F1 | ? or ⌘Cmd + F1 | Open Settings | Opens the DevTools Settings panel for configuration: theme, language, key preferences, settings export/import, etc. |
| Ctrl + →Right | ⌘Cmd + ⇧Shift + →Right | Next Panel | Switches focus to the next DevTools panel (Elements → Console → Sources → Network → ...) |
| Ctrl + ←Left | ⌘Cmd + ⇧Shift + ←Left | Previous Panel | Switches focus to the previous DevTools panel |
| Ctrl + ⇧Shift + D | ⌘Cmd + ⇧Shift + D | Toggle Dock Position | Changes DevTools position: inline bottom / docked to side / in a separate window. If position wasn't changed during the session, it undocks into a separate window |
| Ctrl + ⇧Shift + M | ⌘Cmd + ⇧Shift + M | Device Mode | Enables mobile device emulation: user-agent override, screen resolution, scaling, network speed (throttling) |
| Ctrl + ⇧Shift + C | ⌘Cmd + ⇧Shift + C | Inspect Element Mode | Switches cursor to element picker mode for hovering over and selecting elements on the page |
| Ctrl + ⇧Shift + P | ⌘Cmd + ⇧Shift + P | Command Menu | Opens the DevTools Command Palette — quick access to settings, toggles, DevTools API without menu navigation. Type a command name and press Enter |
| Esc | Esc | Toggle Drawer | Collapses / expands the Drawer (bottom panel) in the current DevTools panel |
| F5 or Ctrl + R | ⌘Cmd + R | Normal Reload | Reloads the page using cached resources (if available) |
| Ctrl + F5 or Ctrl + ⇧Shift + R | ⌘Cmd + ⇧Shift + R | Hard Reload | Reloads the page ignoring cache: all resources (CSS, JS, images) are loaded fresh from the server |
| Ctrl + F | ⌘Cmd + F | Search Current Panel | Opens text search on the active panel. Supported in: Elements, Console, Sources, Performance, Memory, Quick Source |
| Ctrl + ⇧Shift + F | ⌘Cmd + ⌥Option + F | Search All Resources | Opens the search tab in the Drawer — global text search across all loaded project resources |
| Ctrl + O or Ctrl + P | ⌘Cmd + O or ⌘Cmd + P | Open File in Sources | Opens the file picker in Sources panel — quick access to any JS/CSS/HTML file in the project by name. Supports partial input |
| Ctrl + ⇧Shift + + | ⌘Cmd + ⇧Shift + + | Zoom In | Increases DevTools UI scale by 10%. Applies only to DevTools interface, not page content |
| Ctrl + - | ⌘Cmd + - | Zoom Out | Decreases DevTools UI scale by 10% |
| Ctrl + 0 | ⌘Cmd + 0 | Reset Zoom | Resets DevTools UI scale to 100% |
| Ctrl + O → type ! + snippet name → ⏎Enter | ⌘Cmd + O → type ! + snippet name → ⏎Enter | Run Snippet | Executes a Chrome User Script (snippet): via Command Menu type ! (exclamation mark), start typing the snippet name and press Enter. Snippets are saved JS fragments available in Sources panel |
Shortcuts: Elements panel
| Windows Shortcuts | macOS Shortcuts | Name | Description |
|---|---|---|---|
| Element Management | |||
| Ctrl + Z | ⌘Cmd + Z | Undo Change | Reverts the last modified property/attribute/DOM node to its previous state. Supports multiple undo (Ctrl+Z / ⌘+Z — up to 50 steps) |
| Ctrl + Y | ⌘Cmd + ⇧Shift + Z | Redo Change | Restores the last undone change. Applies within the current Elements edit session |
| ↑Up / ↓Down | ↑Up / ↓Down | Select Adjacent Element | Navigation in DOM tree: move to parent (↑) or child (↓) element relative to selected. Works only when focus is on the element tree |
| →Right | →Right | Expand Node | Expands the current DOM node in the elements tree. If already expanded, selects the first child element |
| ←Left | ←Left | Collapse Node | Collapses the current DOM node. If already collapsed, selects the parent element |
| Ctrl + Alt + click on arrow | ⌥Option + click on arrow | Expand/Collapse All Children | Expands or collapses all child nodes of the selected element at once. Hold Ctrl+Alt (Win) or Option (Mac) and click the expand arrow |
| ⏎Enter | ⏎Enter | Edit Attributes | Switches to Edit Attributes mode for the selected element — allows editing attributes (id, class, data-*, style, etc.) directly in the panel |
| ⇥Tab / ⇤BackTab | ⇥Tab / ⇤BackTab | Next / Previous Attribute | In Edit Attributes mode — move to next (Tab) or previous (Shift+Tab) attribute of the element for quick editing |
| H | H | Hide Element | Quickly hides the selected element (sets display: none). Element remains in DOM but is hidden from the page. Pressing again restores display |
| F2 | Fn + F2 | Edit as HTML | Switches to HTML edit mode: allows editing all HTML tags of the selected element as plain text. Confirms with Enter, cancels with Esc |
Styles pane
| Windows Shortcuts | macOS Shortcuts | Name | Description |
|---|---|---|---|
| Ctrl + click on value | ⌘Cmd + click on value | Go to CSS Declaration | With Ctrl/⌘ held down, click on a CSS property value (e.g., color: #fff) — DevTools opens the file where this property is declared |
| ↑Up / ↓Down | ↑Up / ↓Down | Toggle CSS Rule | Navigation between CSS rules affecting the selected element. Useful with many styles of different specificity |
| ←Left / →Right | ←Left / →Right | Property Navigation | Move between property name, value, and controls (color picker, angle clock) within a CSS rule |
| Alt + ↓Down | ⌥Option + ↓Down | Open Function Tooltip | Opens a tooltip for a CSS function (var(), calc(), clamp(), etc.), showing the computed value and context |
| ⇧Shift + click on color | ⇧Shift + click on color | Color Format Cycle | Cycles color value representation (RGB → HEX → OKLCH → HSL → hwb, etc.) via Color Preview. Useful for copying in the desired format |
| Tab — select value then press Tab / ⇤BackTab | Tab — select value then press Tab / ⇤BackTab | Next / Previous Property | With value selected — Tab moves to next property editing, Shift+Tab to previous |
| Select value → Alt + ↑Up / ↓Down | Select value → ⌥Option + ↑Up / ↓Down | Change Value by 0.1 | Precise adjustment of a CSS numeric value (width, padding, border-width, etc.) by ±0.1 step. Example: border-width: 1px → 1.1px |
| Select value → ↑Up / ↓Down | Select value → ↑Up / ↓Down | Change Value by 1 | Adjustment of a CSS numeric value by ±1 step. Example: font-size: 16px → 17px |
| Select value → ⇧Shift + ↑Up / ↓Down | Select value → ⇧Shift + ↑Up / ↓Down | Change Value by 10 | Adjustment of a CSS numeric value by ±10 step. Useful for quick padding and position tweaks |
| Select value → ⌘Cmd + ↑Up / ↓Down | Select value → ⌘Cmd + ↑Up / ↓Down | Change Value by 100 | Adjustment of a CSS numeric value by ±100 step. Used for large-scale tweaks during layout work |
| ⇧Shift + click on Angle Preview | ⇧Shift + click on Angle Preview | Angle Units Cycle | Cycles angle units: deg → grad → rad → turn (full cycle). Example: transform: rotate(90deg) → rotate(100grad) |
| Click on Angle Preview → ↑Up / ↓Down | Click on Angle Preview → ↑Up / ↓Down | Change Angle by 1° | Precise adjustment of angle value by ±1 degree. Works for any angle property (rotate, skew, transform-origin, etc.) |
| Click on Angle Preview → ⇧Shift + ↑Up / ↓Down | Click on Angle Preview → ⇧Shift + ↑Up / ↓Down | Change Angle by 10° | Adjustment of angle value by ±10 degrees. Quick transformation tuning without a counter |
| Click on Angle Preview → ⇧Shift, click / slide on Angle Clock | Click on Angle Preview → ⇧Shift, click / slide on Angle Clock | Change Angle by 15° (clock) | Interactive angle adjustment via visual angle clock (Angle Clock Overlay). Each click/slide = ±15° |
Shortcuts: Sources panel
| Windows Shortcuts | macOS Shortcuts | Name | Description |
|---|---|---|---|
| Debugging | |||
| F8 or Ctrl + \ | F8 or ⌘Cmd + \ | Pause / Resume | Pauses script execution (if page is running) or resumes (if debugging at breakpoint). Analogous to the "pause" button on the panel |
| F10 or Ctrl + ' | F10 or ⌘Cmd + ' | Step Over | Executes the current line and moves to the next. If current line is a function call, the function executes entirely (without entering it) |
| F11 or Ctrl + ; | F11 or ⌘Cmd + ; | Step Into | Enters a function call on the current line. Allows debugging the function code step by step (Step Over/Out) |
| ⇧Shift + F11 or Ctrl + ⇧Shift + ; | ⇧Shift + F11 or ⌘Cmd + ⇧Shift + ; | Step Out | Completes the current function and pauses on the next line after the function call. Useful for exiting embedded code |
| Ctrl + click on line | ⌘Cmd + click on line | Continue to Line | When stopped at a breakpoint: Ctrl/⌘ + click on any line — continues execution to that line (sets a temporary breakpoint) |
| Ctrl + . / Ctrl + , | Ctrl + . / Ctrl + , | Next / Previous Frame | Switching between call stack frames when stopped at a breakpoint. Allows selecting which frame to debug |
| Ctrl + S | ⌘Cmd + S | Save Changes | Saves local file changes (made via DevTools editor) to disk. Changes made in DevTools are written to memory-overrides |
| Ctrl + Alt + S | ⌘Cmd + ⌥Option + S | Save All | Saves all unsaved changes in all editable files. Alternative to saving each file separately |
| Ctrl + G | Ctrl + G | Go to Line | Opens dialog to navigate to a specific line in the current file. Enter line number and press Enter |
| Ctrl + O → type : + line number → ⏎Enter | ⌘Cmd + O → type : + line number → ⏎Enter | Go to Line Number | Via Command Menu — navigate to a specific line in the open file. Format: :number (e.g., :42 for line 42) |
| Ctrl + O → type : + line + : + column → ⏎Enter | ⌘Cmd + O → type : + line + : + column → ⏎Enter | Go to Line and Column | Navigate to exact position in file: :line:column (e.g., :5:9 → line 5, column 9). Useful when navigating long files |
| Ctrl + ⇧Shift + O | ⌘Cmd + ⇧Shift + O | Go to Function / Rule | Opens list of definitions (functions in JS, rule sets in CSS). Search by declaration name. For HTML — navigate to script/style block |
| Alt + W | ⌥Option + W | Close Tab | Closes the currently open file tab in Sources panel. Alternative — "×" button on the tab |
| Ctrl + Pg Up / Pg Dn | Fn + ⌘Cmd + ↑Up / ↓Down | Next / Previous Tab | Switching between open files (tabs) in Sources panel. Analogous to browser tabs (Ctrl+Tab) |
| Ctrl + ⇧Shift + Y | ⌘Cmd + ⇧Shift + Y | Toggle Navigation Sidebar | Hides or shows the left sidebar (File Navigator) in Sources panel. Useful for full-screen code editor |
| Ctrl + ⇧Shift + H | ⌘Cmd + ⇧Shift + H | Toggle Debugger Sidebar | Hides or shows the right sidebar (Debugger/Variables/Call Stack) in Sources panel |
Code Editor
| Windows Shortcuts | macOS Shortcuts | Name | Description |
|---|---|---|---|
| Ctrl + Delete | ⌥Option + Delete | Delete Word | Deletes the last word before cursor (up to space). Unlike Backspace, deletes whole word at once |
| Click on line number / Ctrl + B | Click on line number / ⌘Cmd + B | Toggle Line Breakpoint | Toggles a line-of-code breakpoint (blue dot left of line number). Fires when reaching this line during execution |
| Ctrl + Alt + B | ⌘Cmd + ⌥Option + B | Conditional Breakpoint / Logpoint | Opens edit dialog: can create a conditional breakpoint (pause only when condition is met) or logpoint (log without pausing) |
| Ctrl + click on line number | ⌘Cmd + click on line number | Conditional Breakpoint Dialog | Opens conditional breakpoint creation dialog. Enter a JS condition — debugging pauses only when it returns true |
| Ctrl + ⇧Shift + click on line number | ⌘Cmd + ⇧Shift + click on line number | Logpoint Dialog | Creates a logpoint: instead of pausing in debugger, DevTools logs the expression to Console. Format: 'msg: ' + variableName |
| Ctrl + M | Ctrl + M | Matching Bracket | Moves cursor to matching bracket ({}, [], ()). Useful when navigating nested structures: code blocks, arrays, functions |
| Ctrl + / | ⌘Cmd + / | Toggle Comment | Toggles single-line comment. If multiple lines selected — adds comment to start of each. For JS: //, for CSS: /* */ |
| Ctrl + D / ⇧Shift + D | ⌘Cmd + D / ⌘Cmd + U | Select Next / Previous Occurrence | Ctrl+D: selects next occurrence of word under cursor (highlights all simultaneously). Ctrl+Shift+D / ⌘+U: selects previous. For multi-line editing |
Shortcuts: Network panel
| Windows Shortcuts | macOS Shortcuts | Name | Description |
|---|---|---|---|
| Ctrl + F | ⌘Cmd + F | Search in Request Details | Filters headers, payload, and response body of the selected HTTP request. Useful for finding a specific field (e.g., Cookie, Authorization) or data in JSON |
| Ctrl + E | ⌘Cmd + E | Start / Stop Recording | Start / stop network request recording. By default, network records automatically, but you can stop recording to save resources |
| Ctrl + R | ⌘Cmd + R | Record a Reload | Records all network requests on page reload. Analogous to clicking the "Record" (●) button on the panel |
| R | R | Replay XHR Request | Repeats the selected XHR/Fetch request. Useful for re-calling the API without page reload. Works with selected request from the list |
| Esc | Esc | Close Request Details | Closes the selected request details panel (Headers, Preview, Response, etc.) and returns to the request list |
Shortcuts: Performance panel
| Windows Shortcuts | macOS Shortcuts | Name | Description |
|---|---|---|---|
| Ctrl + E | ⌘Cmd + E | Start / Stop Recording | Start / stop performance profile recording. During recording, captures: FPS, CPU, layout, paint, network, JS execution timeline. "Record" (●) button on panel |
| Ctrl + S | ⌘Cmd + S | Save Recording | Saves performance profile to a file (.cpuprofile). Can be opened later for analysis: Call Tree, Flame Chart, Bottom Up, Network events |
| Ctrl + O | ⌘Cmd + O | Load Recording | Opens a performance profile file (.cpuprofile) for analysis. Used for comparing profiles "before" and "after" optimization |
Shortcuts: Memory panel
| Windows Shortcuts | macOS Shortcuts | Name | Description |
|---|---|---|---|
| Ctrl + E | ⌘Cmd + E | Start / Stop Recording | Start / stop memory profile collection. Depending on selected type: Heap Snapshot, Allocation timeline, Allocation timeline on GC, Memory timeline. Helps find memory leaks |
Shortcuts: Console panel
| Windows Shortcuts | macOS Shortcuts | Name | Description |
|---|---|---|---|
| →Right or ⇥Tab | →Right or ⇥Tab | Accept Autocomplete | Accepts the current suggestion from autocomplete in the Console input line. Works for variable names, methods, object properties, API methods (log, fetch, etc.) |
| Esc | Esc | Reject Autocomplete | Closes the autocomplete list without applying. Cursor remains at current input position |
| ↑Up / ↓Down or Ctrl + P / N | ↑Up / ↓Down or Ctrl + P / N | Autocomplete Navigation | Arrows: navigate autocomplete list up/down. Ctrl+P/N: alternative navigation (like Vim/VSCode) through suggestions |
| ↑Up | ↑Up | Previous Expression | Returns the previously executed expression to the Console input line. Multiple presses — cycles through history of executed commands |
| ↓Down | ↓Down | Next Expression | Returns the next expression after navigating up through history. Forward restoration |
| Ctrl + ` | Ctrl + ` | Focus Console | Quickly moves input focus to the Console input line from any other DevTools panel. Allows immediate JS input |
| Ctrl + L | ⌘Cmd + K or ⌥Option + L | Clear Console | Cleans Console output (logs, errors, warnings). Command history is preserved and available via ↑. For programmatic clearing: console.clear() |
| ⇧Shift + ⏎Enter | ⇧Shift + Return | Multi-line Input | Forces a new line in the Console input line. DevTools usually auto-detects multi-line expressions, but this key forces it manually |
| ⏎Enter | Return | Execute | Executes the entered expression in the page context. Result is displayed in Console. For single-line — immediate execution, for multi-line — after Enter |
| Hold Alt + click Expand | Hold ⌥Option + click Expand | Expand All Sub-properties | Expands the full object structure (nested properties at any level) in Console. Alternative — use dir(object) or console.log(JSON.stringify(obj, null, 2)) |
Shortcuts: Search tab
| Windows Shortcuts | macOS Shortcuts | Name | Description |
|---|---|---|---|
| Ctrl + ⇧Shift + { or } | ⌘Cmd + ⌥Option + { or } | Collapse / Expand Results | Collapses ({) or expands (}) all search results in the global Drawer search. Useful with many matches |
Shortcuts: Recorder panel
| Windows Shortcuts | macOS Shortcuts | Name | Description |
|---|---|---|---|
| Ctrl + E | ⌘Cmd + E | Start / Stop Recording | Starts or stops recording user interactions in Recorder panel. Records clicks, keypresses, scroll, navigation |
| Ctrl + ⏎Enter | ⌘Cmd + ⏎Enter | Replay Recording | Plays back the recorded scenario for debugging or testing. Used for auto-playing user actions |
| Ctrl + C | ⌘Cmd + C | Copy Recording | Copies the recorded scenario or selected step to clipboard. Result: Playwright / Puppeteer code or CDP commands |
| Ctrl + B | ⌘Cmd + B | Toggle Code View | Toggles between visual representation of recording steps and generated code (Playwright / Puppeteer) |
Shortcuts: Layers panel
| Windows Shortcuts | macOS Shortcuts | Name | Description |
|---|---|---|---|
| W / A / S / D | W / A / S / D | Layer Navigation | Move layer diagram: W (up), A (left), S (down), D (right). For viewing large compositions with many GPU layers |
| X | X | Pan Mode | Switches navigation mode: cursor becomes a "hand" for dragging the diagram. Pressing again exits the mode |
| V | V | Rotate Mode | Switches to 3D rotation mode for the layer diagram. Useful for visualizing GPU layer nesting |
| 0 | 0 | Reset Position | Resets diagram position and rotation to initial state (reset transform). Analogous to "Reset" button on panel |
| ⇧Shift + + or mousewheel ↑ | ⇧Shift + + or mousewheel ↑ | Zoom In | Zooms in the layer diagram. Used for detailed examination of individual GPU layers |
| ⇧Shift + - or mousewheel ↓ | ⇧Shift + - or mousewheel ↓ | Zoom Out | Zooms out the layer diagram. For viewing the entire GPU layer structure |