This article only introduces some of the main and commonly used shortcuts in Chrome. They can be compared to the developer tools in other browsers, as most shortcuts have the same functions, with only a few differences.
Global (All Panels)#
| Function | Shortcut | Description |
|---|---|---|
| Open Developer Tools | F12 / Ctrl + Shift + I | Normal opening |
| Open Console | Ctrl + Shift + J | Open the tool and enter the Console panel |
| Inspect Element | Ctrl + Shift + C | Start selecting page elements after entering the Elements panel |
| Developer Tools Settings | ?/F1 | All related settings for the developer tools |
| Switch to Previous Panel | Ctrl + [ | Switch left to the previous panel |
| Switch to Next Panel | Ctrl + ] | Switch right to the next panel |
| Switch Docking Position | Ctrl + Shift + D | Switch the entire tool's docking position relative to the browser, depending on the last two operations |
| Toggle Device Mode | Ctrl + Shift + M | Switch between normal mode and responsive device editing mode |
| Toggle Drawer Toolbar | Esc | Toggle the display of the popup toolbar at the bottom of the tool, such as Console, etc. |
| Refresh Page | F5/Ctrl + R | Normal refresh of the page, which reads from memory cache and disk cache |
| Force Refresh | Ctrl + F5/Ctrl + Shift + R | Disable cache refresh, similar to refreshing after checking disable cache |
| Search in Current Panel | Ctrl + F | Search text in the current panel, such as Elements, Console, etc. |
| Search in All Resources | Ctrl + Shift + F | Search text in all resources loaded by the current webpage (Sources) |
| Search by Filename | Ctrl + O/Ctrl + P | Search all resources, but limit the search object to file names |
| Increase Font Size | Ctrl + + | Increase the font and graphics size of the entire developer tool (excluding the webpage) |
| Decrease Font Size | Ctrl + - | Decrease the size of the developer tool's font and graphics |
| Reset Font Size | Ctrl + 0 | Restore the font and graphics size of the developer tool to default size |
Elements Panel#
| Function | Shortcut | Description |
|---|---|---|
| Undo Changes | Ctrl + Z | Undo modifications to the HTML content |
| Redo Changes | Ctrl + Y | Restore modifications made before undo |
| Expand Node | → (Right Arrow Key) | Expand the currently collapsed HTML element node |
| Collapse Node | ← (Left Arrow Key) | Collapse the currently expanded HTML element node |
| Recursively Expand Node | Alt + → | Recursively expand the currently collapsed HTML element node |
| Recursively Collapse Node | Alt + ← | Recursively collapse the currently expanded HTML element node |
| Edit Node Attribute | Enter | Edit the attribute value of the current element node (the first attribute) |
| Edit Next Attribute | Tab | After pressing Enter to edit an attribute, press Tab to switch to the next attribute |
| Edit Previous Attribute | Shift + Tab | Switch to edit the previous attribute value of the current element node |
| Hide Node | H | Hide the current element node on the page, effectively setting visibility: hidden !important; style |
| Edit HTML | F2 | Edit the current element node content in HTML format, similar to the right-click menu's Edit as HTML |
| Edit Source Style | Ctrl + Click | In the Style panel, Ctrl + mouse click on a CSS rule (selector, property, or property value) will jump to the corresponding position in the source file |
| Toggle Color Type | Shift + Click | Shift + click on the color value box to toggle between #, rgb(), hls() |
| Increment/Decrement Value | ↑/↓ (Up, Down Arrow Keys) | Increment/decrement the size by 1 unit |
| 0.1x Increment/Decrement Value | Alt + ↑/Alt + ↓ | Increment/decrement by 0.1x unit value |
| 10x Increment/Decrement Value | Shift + ↑/Shift + ↓ | Increment/decrement by 10x unit value |
| 100x Increment/Decrement Value | Ctrl + ↑/Ctrl + ↓ | Increment/decrement by 100x unit value |
Console Panel#
| Function | Shortcut | Description |
|---|---|---|
| Clear Output | Ctrl + L | Clear the history output of the console |
| Focus Input | Ctrl + ` (Backtick) | Focus the input to the console input box; using it in other panels opens the Console drawer |
| Accept Suggestion | Enter/→ | Accept the first suggestion of code hints |
| Switch Command | ↑/↓ | Switch to the previous/next historical input command |
| Run Code | Enter | Press Enter to run the input code |
| New Line Input | Shift + Enter | Since pressing Enter directly runs the code, you need to add Shift to input a new line |
Sources Panel#
| Function | Shortcut | Description |
|---|---|---|
| Execute Script | F8/Ctrl + \ | Toggle execution or pause of the script |
| Step Over | F10/Ctrl + ' | Step through the script in the Debugger panel |
| Step Into | F11/Ctrl + ; | Step into debugging (jump into a function when encountered) |
| Step Out | Shift + F11/Ctrl + Shift + ; | Step out of debugging (jump out of the current function) |
| Next Call Frame | Ctrl + . (English period) | Switch to the next frame in the Call Stack panel during debugging |
| Previous Call Frame | Ctrl + , (English comma) | Switch to the previous frame in the current call during debugging (ignore if at the top of the stack) |
| Output Variable Value | Ctrl + Shift + E | Output the value of the selected variable in the console |
| Watch Variable Value | Ctrl + Shift + A | Add the selected variable value in the editor to the Watch panel |
| Toggle Breakpoint | Ctrl + B | Toggle whether the current line is set as a breakpoint when focused in the code editor |
| Toggle Enable Breakpoint | Ctrl + Shift + B | Toggle whether the breakpoint on the current line is enabled (will not delete the breakpoint) |
| Toggle Enable All Breakpoints | Ctrl + F8 | Toggle whether all set breakpoints are enabled |
| Edit Breakpoint | Ctrl + Alt + B | Edit the type of breakpoint on the current line (Breakpoint, Conditional Breakpoint, Logpoint) |
Code Editor (in Sources Panel)#
| Function | Shortcut | Description |
|---|---|---|
| Toggle Comment | Ctrl + / | Add/remove comments for the current line or selected content |
| Save Changes | Ctrl + S | Save modifications to the file (requires enabling the Overrides feature in the sidebar) |
| Save All Changes | Ctrl + Alt + S | Save all files opened in the editor, also requires enabling Overrides |
| Go to Matching Brace | Ctrl + M | Jump to the matching brace of the current cursor position |
| Add Matching Item | Ctrl + D | Jump and add the next matching text to the selected text |
| Undo Matching Item | Ctrl + U | Go back and undo selecting a matching item, opposite of Ctrl + D |
| Go to Line | Ctrl + G | Jump to a specified line number |
| Go to Member | Ctrl + Shift + O | Jump to a specified member function in the current file |
| Previous Edit Location | Alt + - | Jump to the previous edit location of the cursor |
| Next Edit Location | Alt + + | Jump to the next edit location |
| Close Active Tab | Alt + W | Close the currently edited tab (file) |
| Increment/Decrement CSS Value | Alt + ↑/Alt +↓ | When editing CSS source files, increment/decrement the current value by 1 unit |
| 10x Increment/Decrement CSS Value | Alt + PageUp↑/Alt + PageDown | Increment/decrement the current value in CSS by 10 units |