---
title: Chrome Developer Tools
date: 2022-11-23 16:23:31.696017
background: bg-[#c64d3e]
label:
tags:
  -
  -
categories:
  - Keyboard Shortcuts
intro: |
  A visual cheat-sheet for the 56 keyboard shortcuts found in Chrome's Developer Tools
---

## Keyboard Shortcuts

### Opening DevTools

| Shortcut           | Action                            |
| ------------------ | --------------------------------- |
| `Ctrl` `Shift` `I` | Open whatever panel you used last |
| `Ctrl` `Shift` `J` | Open the Console panel            |
| `Ctrl` `Shift` `C` | Open the Elements panel           |

{.shortcuts}

### Global Shortcuts {.row-span-2}

| Shortcut           | Action                                                 |
| ------------------ | ------------------------------------------------------ |
| `F1`               | Show Settings                                          |
| `Ctrl` `]`         | Focus the next panel                                   |
| `Ctrl` `[`         | Focus the previous panel                               |
| `Ctrl` `Shift` `D` | Switch back to whatever docking position you last used |
| `Ctrl` `Shift` `M` | Toggle Device Mode                                     |
| `Ctrl` `Shift` `C` | Toggle Inspect Element Mode                            |
| `Ctrl` `Shift` `P` | Open the Command Menu                                  |
| `Esc`              | Toggle the Drawer                                      |
| `Ctrl` `R`         | Normal reload                                          |
| `Ctrl` `Shift` `R` | Hard reload                                            |
| `Ctrl` `F`         | Search for text within the current panel               |
| `Ctrl` `Shift` `F` | Opens the Search tab in the Drawer                     |
| `Ctrl` `P`         | Open a file in the Sources panel                       |
| `Ctrl` `Shift` `+` | Zoom in                                                |
| `Ctrl` `-`         | Zoom out                                               |
| `Ctrl` `0`         | Restore default zoom level                             |
| `Ctrl` `O` `!`     | Run snippet                                            |

{.shortcuts}

### Elements Panel

| Shortcut      | Action                                                            |
| ------------- | ----------------------------------------------------------------- |
| `Ctrl` `Z`    | Undo change                                                       |
| `Ctrl` `Y`    | Redo change                                                       |
| `Up/Down`     | Select the element above or below the currently-selected element  |
| `Right`       | Expand the currently-selected node                                |
| `Left`        | Collapse the currently-selected node                              |
| `Enter`       | Toggle Edit Attributes mode on the currently-selected element     |
| `Tab`         | Select the next attribute after entering Edit Attributes mode     |
| `Shift` `Tab` | Select the previous attribute after entering Edit Attributes mode |
| `H`           | Hide the currently-selected element                               |
| `F2`          | Toggle Edit as HTML mode on the currently-selected element        |

{.shortcuts}

### Sources Panel

| Shortcut           | Action                                                            |
| ------------------ | ----------------------------------------------------------------- |
| `Ctrl` `\`         | Pause script execution (if running), or resume (if paused)        |
| `Ctrl` `'`         | Step over next function call                                      |
| `Ctrl` `;`         | Step into next function call                                      |
| `Ctrl` `Shift` `;` | Step out of current function                                      |
| `Ctrl` `./,`       | Select the call frame below or above the currently-selected frame |
| `Ctrl` `S`         | Save changes to local modifications                               |
| `Ctrl` `Alt` `S`   | Save all changes                                                  |
| `Ctrl` `G`         | Go to line                                                        |
| `Alt` `W`          | Close the active tab                                              |

{.shortcuts}

### Code Editor

| Shortcut     | Action                                                         |
| ------------ | -------------------------------------------------------------- |
| `Ctrl` `Del` | Delete all characters in the last word, up to the cursor       |
| `Ctrl` `M`   | Go to matching bracket                                         |
| `Ctrl` `/`   | Toggle single-line comment                                     |
| `Ctrl` `D`   | Select the next occurrence of whatever word the cursor is on   |
| `Ctrl` `U`   | Deselect the next occurrence of whatever word the cursor is on |

{.shortcuts}

### Performance Panel

| Shortcut   | Action                  |
| ---------- | ----------------------- |
| `Ctrl` `E` | Start or stop recording |
| `Ctrl` `S` | Save recording          |
| `Ctrl` `O` | Load recording          |

{.shortcuts}

### Memory Panel

| Shortcut   | Action                  |
| ---------- | ----------------------- |
| `Ctrl` `E` | Start or stop recording |

{.shortcuts}

### Console Panel

| Shortcut               | Action                         |
| ---------------------- | ------------------------------ |
| `Tab`                  | Accept autocomplete suggestion |
| `Esc`                  | Reject autocomplete suggestion |
| `Up`                   | Get previous statement         |
| `Down`                 | Get next statement             |
| `Ctrl` <code>\`</code> | Focus the Console              |
| `Ctrl` `L`             | Clear the console              |
| `Shift` `Enter`        | Force a multi-line entry       |
| `Enter`                | Execute                        |

{.shortcuts}

## Also see

- [Keyboard shortcuts for Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/shortcuts)
  _(developers.google.com)_