Keyboard Shortcuts for Chrome Developer Tools

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.

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.

Access 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.

Related:  How to Enable or Disable Push Notifications in Chrome?

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.
Chrome Developer Tools Shortcuts Menu
Chrome Developer Tools Shortcuts Menu
  • You can see a list of useful shortcuts there.
Developer Tools Shortcuts List
Developer Tools Shortcuts List

Shortcuts for Chrome Developer Tools in Windows and Mac

Here are the complete shortcuts for Chrome Developer Tools in Windows and Mac.

DescriptionWindows ShortcutMac ShortcutPanel
Go to settings? or F1? or Fn + F1All
Go to next panel in rightCtrl + ]Cmd + ]All
Go the previous panel in leftCtrl + [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 + DCmd + Shift + DAll
Change device mode to mobile or desktopCtrl + Shift + MCmd + Shift + MAll
Open developer tools with Elements tab (Same as right clicking and selecting Inspection Element)Ctrl + Shift + CCmd + Shift + CAll
Open Command Prompt inside developer toolsCtrl + Shift + PCmd + Shift + PAll
Show or hide drawerEscapeEscapeAll
Reload webpageF5 or Ctrl + RCmd + RAll
Force reload webpageCtrl + F5 or Ctrl + Shift + RCmd + Shift + RAll
Search in the current panelCtrl + FCmd + FAll
Search from drawerCtrl + Shift + FCmd + Option + FAll
Select and open a file in Sources panelCtrl + O or Ctrl + PCmd + O or Cmd + PAll
Zoom inCtrl + Shift + +Cmd + Shift + +All
Zoom outCtrl + -Cmd + -All
Default zoomCtrl + 0Cmd + 0All
Undo last editCtrl + ZCmd + ZElements
Redo last editCtrl + YCmd + Shift + ZElements
Move up or down to select codes and highlight corresponding elements on the pageUp Arrow / Down ArrowUp Arrow / Down ArrowElements
Expand the node or go to the first elementRight ArrowRight ArrowElements
Collapse the node or go to the parent nodeLeft ArrowLeft ArrowElements
Show or hide all nodes from the parent nodeCtrl + Alt + Click Arrow Icon of ElementOption + Click Arrow Icon of ElementElements
Edit the selected nodeEnterEnterElements
Go to previous or next node in edit modeTab / Shift + TabTab / Shift + TabElements
Hide the currently-selected elementHHElements
Edit the selected node as HTMLF2Fn + F2Elements
Go to the source code of the propertyControl + Click propertyCommand + Click propertyElements > Styles
Toggle RBGA, HSLA, and Hex valuesShift + Click on color preview iconShift + Click on color preview iconElements > Styles
Go to next property or value or create a new lineClick on property + TabClick on property + TabElements > Styles
Go to previous property or value or create a new lineClick on property and Shift + TabClick on property and Shift + TabElements > Styles
Increase or decrease value by 0.1Click a value + Alt + Up or Down ArrowClick a value + Option + Up or Down ArrowElements > Styles
Increase or decrease value by 0.1Click a value + Up or Down ArrowClick a value + Up or Down ArrowElements > Styles
Increase or decrease value by 10Click a value + Shift + Up or Down ArrowClick a value + Shift + Up or Down ArrowElements > Styles
Increase or decrease value by 100Click a value + Ctrl + Up or Down ArrowClick a value + Cmd + Up or Down ArrowElements > Styles
Run or pause scriptF8 or Ctrl + \F8 or Cmd + \Sources
Step over next function callF10 or Ctrl + 'F10 or Cmd + 'Sources
Step into next function callF11 or Ctrl + ;F11 or Cmd + ;Sources
Step out of current functionShift + F11 or Ctrl + Shift + ;Shift + F11 or Cmd + Shift + ;Sources
Run code when pausedCtrl + Click Line of codeCmd + Click Line of codeSources
Select the call frame above or belowCtrl + . / Ctrl + ,Ctrl + . / Ctrl + ,Sources
Save changesCtrl + SCmd + SSources
Save all changesCtrl + Alt + SCmd + Option + SSources
Open go to line pop-upCtrl + GCtrl + GSources
Go to Current Open File Line NumberCtrl + O, type : then line number and press enter.Cmd + O, type : then line number and press enter.Sources
Go to Current Open File Column NumberCtrl + O + : + Line Number + Column Number + EnterCmd + O + : + Line Number + Column Number + EnterSources
Close active tabAlt + WOption + WSources
Delete characters till cursor position in the last wordCtrl + DeleteOption + DeleteCode Editor
Google code breakpointSelect the line + Ctrl + BSelect the line + Cmd + BCode Editor
Find closing bracketCtrl + MCtrl + MCode Editor
Add CommentCtrl + /Cmd + /Code Editor
Select the highlighted wordCtrl + DCmd + DCode Editor
De-select the highlighted wordCtrl + UCmd + UCode Editor
Toggle recordingCtrl + ECmd + EPerformance / Memory
Save recordingCtrl + SCmd + SPerformance
Load recordingCtrl + OCmd + OPerformance
Accept AutocompleteRight Arrow or TabRight Arrow or TabConsole
Reject AutocompleteEscapeEscapeConsole
Previous statementUp ArrowUp ArrowConsole
Next statementDown ArrowDown ArrowConsole
Focus ConsoleCtrl + `Ctrl + `Console
Clear ConsoleCtrl + LCmd + K or Option + LConsole
Force multiple line entryShift + EnterCmd + ReturnConsole
RunEnterReturnConsole
Collapse objectAlt + Click ExpandOption + Click ExpandConsole
Related:  Fix Google Chrome Slow Page Loading Issue
Recommended Articles:

Leave a Comment