Google Chrome is popular due to the developer friendly interface. Even a normal users can check the page source and inspect elements on a page using Chrome Developer Tools. We have explained about using Chrome Developer Tools in our earlier article. In this article, let us provide 60+ keyboard shortcuts for Chrome Developer Tools to navigate and get things faster. Also learn how to take screenshots in Chrome using Developer Tools.
Open Chrome Developer Tools
There are many ways to launch Developer Tools section in Chrome.
On Chrome Windows
- Press F12 key.
- Use “Control + Alt + I” keyboard shortcut keys.
- Right click on any area and choose “Inspect Element”.
- Go to three dots button menu and navigate to “More tools > Developer Tools”.
On Chrome Mac
- Press “Option + Command + I” shortcuts keys.
- Go to three dots menu button and navigate to “More Tools > Developer Tools”.
- Click on the “View” menu and go to “Developer > Developer Tools”.
- Right click on the browser content area and choose “Inspect Element” option.
Accessing Keyboard Shortcuts for Developer Tools
Remember Google Chrome browser shortcuts and the Developer Tools shortcuts are different. You need to be careful in using the shortcuts as it can change the view of the Developer Tools. For example, pressing “Control and +” or “Command and +” will increase the zoom of the browser. However, the same shortcuts when used inside a Developer Tools will increase the zoom of only the Developer Tools section. You can again press, “Control and -” or “Command and -” keys to reduce the zoom level.
After launching Chrome browser, follow the below instruction to access the shortcuts section of the Developer Tools section:
- Click on the three dots button on the Developer Tools section. Remember, this is not the customize menu on top right of the browser.
- You can see a list of useful shortcuts there.
Shortcuts for Chrome Developer Tools in Windows and Mac
Here are the complete shortcuts for Chrome Developer Tools in Windows and Mac.
| Description | Windows Shortcut | Mac Shortcut | Panel |
|---|---|---|---|
| Go to settings | ? or F1 | ? or Fn + F1 | All |
| Go to next panel in right | Ctrl + ] | Cmd + ] | All |
| Go the previous panel in left | Ctrl + [ | Cmd + [ | 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 + D | Cmd + Shift + D | All |
| Change device mode to mobile or desktop | Ctrl + Shift + M | Cmd + Shift + M | All |
| Open developer tools with Elements tab (Same as right clicking and selecting Inspection Element) | Ctrl + Shift + C | Cmd + Shift + C | All |
| Open Command Prompt inside developer tools | Ctrl + Shift + P | Cmd + Shift + P | All |
| Show or hide drawer | Escape | Escape | All |
| Reload webpage | F5 or Ctrl + R | Cmd + R | All |
| Force reload webpage | Ctrl + F5 or Ctrl + Shift + R | Cmd + Shift + R | All |
| Search in the current panel | Ctrl + F | Cmd + F | All |
| Search from drawer | Ctrl + Shift + F | Cmd + Option + F | All |
| Select and open a file in Sources panel | Ctrl + O or Ctrl + P | Cmd + O or Cmd + P | All |
| Zoom in | Ctrl + Shift + + | Cmd + Shift + + | All |
| Zoom out | Ctrl + - | Cmd + - | All |
| Default zoom | Ctrl + 0 | Cmd + 0 | All |
| Undo last edit | Ctrl + Z | Cmd + Z | Elements |
| Redo last edit | Ctrl + Y | Cmd + Shift + Z | Elements |
| Move up or down to select codes and highlight corresponding elements on the page | Up Arrow / Down Arrow | Up Arrow / Down Arrow | Elements |
| Expand the node or go to the first element | Right Arrow | Right Arrow | Elements |
| Collapse the node or go to the parent node | Left Arrow | Left Arrow | Elements |
| Show or hide all nodes from the parent node | Ctrl + Alt + Click Arrow Icon of Element | Option + Click Arrow Icon of Element | Elements |
| Edit the selected node | Enter | Enter | Elements |
| Go to previous or next node in edit mode | Tab / Shift + Tab | Tab / Shift + Tab | Elements |
| Hide the currently-selected element | H | H | Elements |
| Edit the selected node as HTML | F2 | Fn + F2 | Elements |
| Go to the source code of the property | Control + Click property | Command + Click property | Elements > Styles |
| Toggle RBGA, HSLA, and Hex values | Shift + Click on color preview icon | Shift + Click on color preview icon | Elements > Styles |
| Go to next property or value or create a new line | Click on property + Tab | Click on property + Tab | Elements > Styles |
| Go to previous property or value or create a new line | Click on property and Shift + Tab | Click on property and Shift + Tab | Elements > Styles |
| Increase or decrease value by 0.1 | 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 10 | Click a value + Shift + Up or Down Arrow | Click a value + Shift + Up or Down Arrow | Elements > Styles |
| Increase or decrease value by 100 | Click a value + Ctrl + Up or Down Arrow | Click a value + Cmd + Up or Down Arrow | Elements > Styles |
| Run or pause script | F8 or Ctrl + \ | F8 or Cmd + \ | Sources |
| Step over next function call | F10 or Ctrl + ' | F10 or Cmd + ' | Sources |
| Step into next function call | F11 or Ctrl + ; | F11 or Cmd + ; | Sources |
| Step out of current function | Shift + F11 or Ctrl + Shift + ; | Shift + F11 or Cmd + Shift + ; | Sources |
| Run code when paused | Ctrl + Click Line of code | Cmd + Click Line of code | Sources |
| Select the call frame above or below | Ctrl + . / Ctrl + , | Ctrl + . / Ctrl + , | Sources |
| Save changes | Ctrl + S | Cmd + S | Sources |
| Save all changes | Ctrl + Alt + S | Cmd + Option + S | Sources |
| Open go to line pop-up | Ctrl + G | Ctrl + G | Sources |
| Go to Current Open File Line Number | Ctrl + O, type : then line number and press enter. | Cmd + O, type : then line number and press enter. | Sources |
| Go to Current Open File Column Number | Ctrl + O + : + Line Number + Column Number + Enter | Cmd + O + : + Line Number + Column Number + Enter | Sources |
| Close active tab | Alt + W | Option + W | Sources |
| Delete characters till cursor position in the last word | Ctrl + Delete | Option + Delete | Code Editor |
| Google code breakpoint | Select the line + Ctrl + B | Select the line + Cmd + B | Code Editor |
| Find closing bracket | Ctrl + M | Ctrl + M | Code Editor |
| Add Comment | Ctrl + / | Cmd + / | Code Editor |
| Select the highlighted word | Ctrl + D | Cmd + D | Code Editor |
| De-select the highlighted word | Ctrl + U | Cmd + U | Code Editor |
| Toggle recording | Ctrl + E | Cmd + E | Performance / Memory |
| Save recording | Ctrl + S | Cmd + S | Performance |
| Load recording | Ctrl + O | Cmd + O | Performance |
| Accept Autocomplete | Right Arrow or Tab | Right Arrow or Tab | Console |
| Reject Autocomplete | Escape | Escape | Console |
| Previous statement | Up Arrow | Up Arrow | Console |
| Next statement | Down Arrow | Down Arrow | Console |
| Focus Console | Ctrl + ` | Ctrl + ` | Console |
| Clear Console | Ctrl + L | Cmd + K or Option + L | Console |
| Force multiple line entry | Shift + Enter | Cmd + Return | Console |
| Run | Enter | Return | Console |
| Collapse object | Alt + Click Expand | Option + Click Expand | Console |
1 Comment
Leave your reply.