Keyboard shortcuts
These are the default keyboard shortcuts for Microsoft Edge DevTools.
In DevTools, when you hover over an icon, often the tooltip shows a keyboard shortcut.
See alsoNavigate DevTools with assistive technologyandCustomize keyboard shortcuts.
Keyboard shortcuts for opening DevTools
To open DevTools, press the following keyboard shortcuts while your cursor is focused on the browser viewport:
| Action | Windows/Linux | macOS |
|---|---|---|
| Open whatever panel you used last | F12orCtrl+Shift+I | Command+Option+I |
| Open theConsoletool | Ctrl+Shift+J | Command+Option+J |
| Open theElementstool | Ctrl+Shift+C | Command+Shift+CorCommand+Option+C |
Global keyboard shortcuts
The following keyboard shortcuts are available in most DevTools panels.
| Action | Windows/Linux | macOS |
|---|---|---|
| ShowSettings | Shift+?orF1 | Shift+?orFunction+F1 |
| Focus the next panel | Ctrl+] | Command+] |
| Focus the previous panel | Ctrl+[ | Command+[ |
| Switch back to whateverdocking positionyou last used. If DevTools has been in the default position for the entire session, then this shortcut undocks DevTools into a separate window. | Ctrl+Shift+D | Command+Shift+D |
| ToggleDevice emulation | Ctrl+Shift+M | Command+Shift+M |
| ToggleInspect Element Mode | Ctrl+Shift+C | Command+Shift+C |
| Open theCommand Menu | Ctrl+Shift+P | Command+Shift+P |
| Toggle theQuick Viewpanel | Esc | Esc |
| Normal refresh | F5orCtrl+R | Command+R |
| Hard refresh | Ctrl+F5orCtrl+Shift+R | Command+Shift+R |
| Search for text within the current panel. Not supported in theAudits,Application,andSecuritytools | Ctrl+F | Command+F |
| Opens theSearchtool in theQuick View,which lets you search for text across all loaded resources | Ctrl+Shift+F | Command+Option+F |
| Open a file in theSourcestool | Ctrl+OorCtrl+P | Command+OorCommand+P |
| Zoom in | Ctrl++ | Command++ |
| Zoom out | Ctrl+- | Command+- |
| Restore default zoom level | Ctrl+0 | Command+0 |
| Run snippet | PressCtrl+Oto open theCommand Menu,type!followed by the name of the script, then pressEnter | PressCommand+Oto open theCommand Menu,type!followed by the name of the script, then pressEnter |
Elements tool keyboard shortcuts
| Action | Windows/Linux | macOS |
|---|---|---|
| Undo change | Ctrl+Z | Command+Z |
| Redo change | Ctrl+Y | Command+Shift+Z |
| Select the element above / below the currently selected element | Up Arrow/Down Arrow | Up Arrow/Down Arrow |
| Expand the currently selected node. If the node is already expanded, this shortcut selects the element below it | Right Arrow | Right Arrow |
| Collapse the currently selected node. If the node is already collapsed, this shortcut selects the element above it | Left Arrow | Left Arrow |
| Expand or collapse the currently selected node and all of the children | HoldCtrl+Alt,then click thearrowicon next to the name of the element | HoldOption,then click thearrowicon next to the name of the element |
| ToggleEdit Attributesmode on the currently selected element | Enter | Enter |
| Select the next / previous attribute after enteringEdit Attributesmode | Tab/Shift+Tab | Tab/Shift+Tab |
| Hide the currently selected element | H | H |
| ToggleEdit as HTMLmode on the currently selected element | Function+F2 | F2 |
Styles pane keyboard shortcuts
| Action | Windows/Linux | macOS |
|---|---|---|
| Go to the line where a property value is declared | HoldCtrl,then click the property value | HoldCommand,then click the property value |
| Cycle through the RBGA, HSLA, and Hex representations of a color value | HoldShift,then click theColor Previewbox next to the value | HoldShift,then click theColor Previewbox next to the value |
| Select the next / previous property or value | Click a property name or value, then pressTab/Shift+Tab | Click a property name or value, then pressTab/Shift+Tab |
| Increment / decrement a property value by 0.1 | Click a value, then pressAlt+Up Arrow/Alt+Down Arrow | Click a value, then pressOption+Up Arrow/ Option+Down Arrow |
| Increment / decrement a property value by 1 | Click a value, then pressUp Arrow/Down Arrow | Click a value, then pressUp Arrow/Down Arrow |
| Increment / decrement a property value by 10 | Click a value, then pressShift+Up Arrow/Shift+Down Arrow | Click a value, then pressShift+Up Arrow/Shift+Down Arrow |
| Increment / decrement a property value by 100 | Click a value, then pressCtrl+Up Arrow/Ctrl+Down Arrow | Click a value, then pressCommand+Up Arrow/Command+Down Arrow |
| Cycle through the degrees (deg), gradians (grad), radians (rad) and turns (turn) representations of an angle value | HoldShiftthen click theAngle Previewbox next to the value | HoldShiftthen click theAngle Previewbox next to the value |
| Increment / decrement an angle value by 1 | Click theAngle Previewbox next to the value then pressUp Arrow/Down Arrow | Click theAngle Previewbox next to the value then pressUp Arrow/Down Arrow |
| Increment / decrement an angle value by 10 | Click theAngle Previewbox next to the value then pressShift+Up Arrow/Shift+Down Arrow | Click theAngle Previewbox next to the value then pressShift+Up Arrow/Shift+Down Arrow |
| Increment / decrement an angle value by 15 | Click theAngle Previewbox next to the value then pressShift,click / mouse slide on theAngle Clock Overlay | Click theAngle Previewbox next to the value then pressShift,click / mouse slide on theAngle Clock Overlay |
Sources tool keyboard shortcuts
| Action | Windows/Linux | macOS |
|---|---|---|
| Pause script runtime (if currently running) or resume (if currently paused) | F8orCtrl+\ | F8orCommand+\ |
| Step over next function call | F10orCtrl+' | F10orCommand+' |
| Step into next function call | F11orCtrl+; | F11orCommand+; |
| Step out of current function | Shift+F11orCtrl+Shift+; | Shift+F11orCommand+Shift+; |
| Continue to aspecific line of code while paused | HoldCtrl,then click the line of code | HoldCommand,then click the line of code |
| Select the call frame below / above the currently selected frame | Ctrl+./Ctrl+, | Ctrl+./Ctrl+, |
| Save changes to local modifications | Ctrl+S | Command+S |
| Save all changes | Ctrl+Alt+S | Command+Option+S |
| Navigate to line | Ctrl+G | Ctrl+G |
| Jump to a line number of the currently open file | PressCtrl+Oto open theCommand Menu,type:followed by the line number, then pressEnter | PressCommand+Oto open theCommand Menu,type:followed by the line number, then pressEnter |
| Jump to a column of the currently open file (for example line 5, column 9) | PressCtrl+Oto open theCommand Menu,type:,then the line number, then another:,then the column number, then pressEnter | PressCommand+Oto open theCommand Menu,type:,then the line number, then another:,then the column number, then pressEnter |
| Navigate to a function declaration, if the current file is HTML or a script. Navigate to a rule set, if the current file is a stylesheet. |
PressCtrl+Shift+O,then type in the name of the declaration / rule set, or select it from the list of options | pressCommand+Shift+O,then type in the name of the declaration / rule set, or select it from the list of options |
| Close the active tab | Alt+W | Option+W |
Code Editor keyboard shortcuts
| Action | Windows/Linux | macOS |
|---|---|---|
| Delete all characters in the last word, up to the cursor | Ctrl+Delete | Option+Delete |
| Add or remove aline-of-code breakpoint | Focus your cursor on the line, then pressCtrl+B | Focus your cursor on the line, then pressCommand+B |
| Navigate to matching bracket | Ctrl+M | Ctrl+M |
| Toggle single-line comment. If multiple lines are selected, DevTools add a comment to the start of each line | Ctrl+/ | Command+/ |
| Turn on or off the next occurrence of whatever word the cursor is on. Each occurrence is highlighted simultaneously | Ctrl+D/Ctrl+U | Command+D/Command+U |
Performance tool keyboard shortcuts
| Action | Windows/Linux | macOS |
|---|---|---|
| Start / stop recording | Ctrl+E | Command+E |
| Save recording | Ctrl+S | Command+S |
| Load recording | Ctrl+O | Command+O |
Memory tool keyboard shortcuts
| Action | Windows/Linux | macOS |
|---|---|---|
| Start / stop recording | Ctrl+E | Command+E |
Console tool keyboard shortcuts
| Action | Windows/Linux | macOS |
|---|---|---|
| Accept autocomplete suggestion | Right ArroworTab | Right ArroworTab |
| Reject autocomplete suggestion | Esc | Esc |
| Get previous statement | Up Arrow | Up Arrow |
| Get next statement | Down Arrow | Down Arrow |
| Focus theConsole | Ctrl+` | Ctrl+` |
| Clear theConsole | Ctrl+L | Command+KorOption+L |
| Force a multi-line entry. This shortcut is mostly unnecessary, because DevTools should detect multi-line scenarios by default | Shift+Enter | Command+Return |
| Run | Enter | Return |
| Expand all subproperties of an object that are logged to the Console | HoldAlt,then clickExpand( ) |
HoldAlt,then clickExpand(). |
See also
- Navigate DevTools with assistive technology
- Customize keyboard shortcuts
- Run commands in the Command Menu
Note
Portions of this page are modifications based on work created andshared by Googleand used according to terms described in theCreative Commons Attribution 4.0 International License. The original page is foundhereand is authored byKayce Basques(Technical Writer, Chrome DevTools & Lighthouse).
This work is licensed under aCreative Commons Attribution 4.0 International License.
Feedback
Coming soon: Throughout 2024 we will be phasing out GitHub Issues as the feedback mechanism for content and replacing it with a new feedback system. For more information see:https://aka.ms/ContentUserFeedback.
Submit and view feedback for