Are you finding the Keyboard shortcuts for Chrome Developer Tools? Chrome Developer Tools provides shortcuts to help you quickly work on documents. Here is the list of all shortcuts that you can use. This post will help you to check and make your work faster with the most used.
| Keyboard Shortcuts (Windows) | Keyboard Shortcuts (Mac) | Panel | Menu Description |
| ? or F1 | ? or Fn + F1 | All | Go to settings |
| Ctrl + ] | Cmd + ] | All | Go to next panel in right |
| Ctrl + [ | Cmd + [ | All | Go the previous panel in left |
| Ctrl + Shift + D | Cmd + Shift + D | All | Toggle developer tools to previously used position. If you have not changed the position, then it will move the developer tools to a separate window. |
| Ctrl + Shift + M | Cmd + Shift + M | All | Change device mode to mobile or desktop |
| Ctrl + Shift + C | Cmd + Shift + C | All | Open developer tools with Elements tab (Same as right clicking and selecting Inspection Element) |
| Ctrl + Shift + P | Cmd + Shift + P | All | Open Command Prompt inside developer tools |
| Escape | Escape | All | Show or hide drawer |
| F5 or Ctrl + R | Cmd + R | All | Reload webpage |
| Ctrl + F5 or Ctrl + Shift + R | Cmd + Shift + R | All | Force reload webpage |
| Ctrl + F | Cmd + F | All | Search in the current panel |
| Ctrl + Shift + F | Cmd + Option + F | All | Search from drawer |
| Ctrl + O or Ctrl + P | Cmd + O or Cmd + P | All | Select and open a file in Sources panel |
| Ctrl + Shift + + | Cmd + Shift + + | All | Zoom in |
| Ctrl + – | Cmd + – | All | Zoom out |
| Ctrl + 0 | Cmd + 0 | All | Default zoom |
| Ctrl + Z | Cmd + Z | Elements | Undo last edit |
| Ctrl + Y | Cmd + Shift + Z | Elements | Redo last edit |
| Up Arrow / Down Arrow | Up Arrow / Down Arrow | Elements | Move up or down to select codes and highlight corresponding elements on the page |
| Right Arrow | Right Arrow | Elements | Expand the node or go to the first element |
| Left Arrow | Left Arrow | Elements | Collapse the node or go to the parent node |
| Ctrl + Alt + Click Arrow Icon of Element | Option + Click Arrow Icon of Element | Elements | Show or hide all nodes from the parent node |
| Enter | Enter | Elements | Edit the selected node |
| Tab / Shift + Tab | Tab / Shift + Tab | Elements | Go to previous or next node in edit mode |
| H | H | Elements | Hide the currently-selected element |
| F2 | Fn + F2 | Elements | Edit the selected node as HTML |
| Control + Click property | Command + Click property | Elements > Styles | Go to the source code of the property |
| Shift + Click on color preview icon | Shift + Click on color preview icon | Elements > Styles | Toggle RBGA, HSLA, and Hex values |
| Click on property + Tab | Click on property + Tab | Elements > Styles | Go to next property or value or create a new line |
| Click on property and Shift + Tab | Click on property and Shift + Tab | Elements > Styles | Go to previous property or value or create a new line |
| Click a value + Alt + Up or Down Arrow | Click a value + Option + Up or Down Arrow | Elements > Styles | Increase or decrease value by 0.1 |
| Click a value + Up or Down Arrow | Click a value + Up or Down Arrow | Elements > Styles | Increase or decrease value by 0.1 |
| Click a value + Shift + Up or Down Arrow | Click a value + Shift + Up or Down Arrow | Elements > Styles | Increase or decrease value by 10 |
| Click a value + Ctrl + Up or Down Arrow | Click a value + Cmd + Up or Down Arrow | Elements > Styles | Increase or decrease value by 100 |
| F8 or Ctrl + \ | F8 or Cmd + \ | Sources | Run or pause script |
| F10 or Ctrl + ‘ | F10 or Cmd + ‘ | Sources | Step over next function call |
| F11 or Ctrl + ; | F11 or Cmd + ; | Sources | Step into next function call |
| Shift + F11 or Ctrl + Shift + ; | Shift + F11 or Cmd + Shift + ; | Sources | Step out of current function |
| Ctrl + Click Line of code | Cmd + Click Line of code | Sources | Run code when paused |
| Ctrl + . / Ctrl + , | Ctrl + . / Ctrl + , | Sources | Select the call frame above or below |
| Ctrl + S | Cmd + S | Sources | Save changes |
| Ctrl + Alt + S | Cmd + Option + S | Sources | Save all changes |
| Ctrl + G | Ctrl + G | Sources | Open go to line pop-up |
| Ctrl + O, type : then line number and press enter. | Cmd + O, type : then line number and press enter. | Sources | Go to Current Open File Line Number |
| Ctrl + O + : + Line Number + Column Number + Enter | Cmd + O + : + Line Number + Column Number + Enter | Sources | Go to Current Open File Column Number |
| Alt + W | Option + W | Sources | Close active tab |
| Ctrl + Delete | Option + Delete | Code Editor | Delete characters till cursor position in the last word |
| Select the line + Ctrl + B | Select the line + Cmd + B | Code Editor | Google code breakpoint |
| Ctrl + M | Ctrl + M | Code Editor | Find closing bracket |
| Ctrl + / | Cmd + / | Code Editor | Add Comment |
| Ctrl + D | Cmd + D | Code Editor | Select the highlighted word |
| Ctrl + U | Cmd + U | Code Editor | De-select the highlighted word |
| Ctrl + E | Cmd + E | Performance / Memory | Toggle recording |
| Ctrl + S | Cmd + S | Performance | Save recording |
| Ctrl + O | Cmd + O | Performance | Load recording |
| Right Arrow or Tab | Right Arrow or Tab | Console | Accept Autocomplete |
| Escape | Escape | Console | Reject Autocomplete |
| Up Arrow | Up Arrow | Console | Previous statement |
| Down Arrow | Down Arrow | Console | Next statement |
| Ctrl + ` | Ctrl + ` | Console | Focus Console |
| Ctrl + L | Cmd + K or Option + L | Console | Clear Console |
| Shift + Enter | Cmd + Return | Console | Force multiple line entry |
| Enter | Return | Console | Run |
| Alt + Click Expand | Option + Click Expand | Console | Collapse object |
Related Articles:
Well, there you have it, Chrome Developer Tools shortcuts list. You might not have known about these shortcuts. If I’ve left important something out in this list, feedback is appreciated and welcome on the Make A Public List.
Feel free to comment below.
Was this article helpful?
YesNo
[…] Keyboard Shortcuts for Chrome Developer Tools […]