Microsoft Edge DevTools provides web developers with a wide range of tools to detect and deal with any problems related to web pages and apps. These tools can be used to inspect element layout, design CSS styles, locate performance complications, and more. The tools also have keyboard shortcuts for easy and quick access which you can also find in the tooltips. But here in this article, you will get an entire list of Microsoft Edge DevTools Keyboard Shortcuts that can make your work pretty easier.
Once you hover over a UI element of DevTools to show its tooltip, the element will display its shortcut, if the tooltip includes it. But to keep everything on your fingertips, go through the complete list of Edge DevTools keyboard shortcuts. Let’s start –
Microsoft Edge DevTools Keyboard Shortcuts
Here is the Complete/Full List of Microsoft Edge DevTools Keyboard Shortcuts –
Elements Panel
| ? ? | Navigate elements |
| ?? | Expand/collapse |
| Enter | Enter Edit attribute |
| H | Hide element |
| F2 | Toggle edit as HTML |
Styles Pane
| Tab Shift+Tab | Next/previous property |
| ? | Increment value |
| ? | Decrement value |
| PageUp Shift+? | Increment by 10 |
| PageDown Shift+? | Decrement by 10 |
| Shift+PageUp | Increment by 100 |
| Shift+PageDown | Decrement by 100 |
| Alt+? | Increment by 0.1 |
| Alt+? | Decrement by 0.1 |
Debugger
| F8 Ctrl+\ | Pause/ Continue |
| F10 Ctrl+’ | Step over |
| F11 Ctrl+; | Step into |
| Shift+F11 Ctrl+Shift+; | Step out |
| Ctrl+. Ctrl+, | Next/previous call frame |
| Ctrl+Shift+E | Evaluate selection in console |
| Ctrl+Shift+A | Add selection to watch |
| Ctrl+B | Toggle breakpoint |
| Ctrl+Shift+B | Toggle breakpoint enabled |
| Ctrl+F8 | Toggle all breakpoints |
| Ctrl+Alt+B | Open breakpoint editor |
Console
| Ctrl+L | Clear console |
| Tab ? | Accept suggestion |
| Ctrl+U | Clear console prompt |
| ?? | Next/previous line |
| Enter | Execute command |
Microsoft Edge DevTools Keyboard Shortcuts for Text Editor
| Ctrl+Shift+O | Go to member |
| Ctrl+Space | Autocompletion |
| Ctrl+G | Go to line |
| Alt+- | Jump to previous editing location |
| Alt++ | Jump to next editing location |
| Ctrl+/ | Toggle comment |
| Alt+? | Increment CSS unit by 1 |
| Alt+? | Decrement CSS unit by 1 |
| Alt+PageUp | Increment CSS unit by 10 |
| Alt+PageDown | Decrement CSS unit by 10 |
| Ctrl+D | Select next occurrence |
| Ctrl+U | Soft undo |
| Ctrl+M | Go to matching bracket |
| Alt+W | Close editor tab |
| Alt+O | Switch between files with the same name and different extensions. |
Performance Panel
| Ctrl+E | Start/stop recording |
| Ctrl+Shift+E | Record page reload |
| Ctrl+S | Save profile |
| Ctrl+O | Load profile |
| [ ] | Jump to previous/next frame |
| Ctrl+H | Pick a recording from history |
| Alt+? Alt+? | Show previous/next recording |
Memory Panel
| Ctrl+E | Start/stop recording |
Layers Panel
| 0 | Reset view |
| X | Switch to pan mode |
| V | Switch to rotate mode |
| Shift | Temporarily toggle pan/rotate mode while held |
| Shift++ Numpad+ | Zoom in |
| Shift+- Numpad- | Zoom out |
| ?W?S | Pan or rotate up/down |
| ?A?D | Pan or rotate left/right |
Microsoft Edge DevTools Keyboard Shortcuts for All Panels
| Ctrl+[ Ctrl+] | Go to the panel to the left/right |
| Ctrl+Tilde | Show console |
| Esc | Toggle drawer |
| Ctrl+Shift+M | Toggle device mode |
| Ctrl+Shift+D | Toggle dock side |
| Ctrl+F | Search |
| Ctrl+Shift+F | Search across all sources |
| Ctrl+Shift+C | Select node to inspect |
| Ctrl+P | Go to source |
That’s all!!!
