Export (0) Print
Expand All

Developer Tools Keyboard Shortcuts Reference

The F12 developer tools help you to quickly research and resolve HTML, Cascading Style Sheets (CSS), and JavaScript related problems. This article provides a list of shortcut keys for F12 tools that will help you accomplish these tasks even faster. The keys are listed below by feature set. A comprehensive list of all shortcut keys is also provided for easy lookup and reference.

Developer Tools Menu Bar Shortcut Keys

The following shortcut keys can be accessed at any time while the F12 tools are open. Differences between Windows Internet Explorer 8 and Windows Internet Explorer 9 are noted. For more on using F12 tools in Internet Explorer 9 see How to use F12 Developer Tools to Debug your Webpages

ActionShortcut Keys
Open/Close Developer ToolsF12
Resize to 800x600Ctrl+Shift+1
Resize to 1024x768Ctrl+Shift+2
Resize to 1280x768Ctrl+Shift+3
Resize to 1280x1024Ctrl+Shift+4
Switch to Quirks modeAlt+Q
Switch to Windows Internet Explorer 7 Standards modeAlt+7
Switch to Internet Explorer 8 Standards modeAlt+8
Switch to Internet Explorer 9 Standards mode (Internet Explorer 9 only)Alt+9
Switch to (page default) modeAlt+D
Clear Browser CacheCtrl+R
Clear Browser Cache for This DomainCtrl+D
Select Element by ClickCtrl+B
View Class and ID InformationCtrl+I
View DOM (Element+Styles) Ctrl+T
View DOM (Page) (Internet Explorer 8 only)Ctrl+G
Show/Hide Color Picker (Toggle)Ctrl+K
Show/Hide Ruler (Toggle)Ctrl+L
Minimize/Maximize (Toggle) (Internet Explorer 8 only)Ctrl+M
Outline Any ElementCtrl+O
Clear Outlines (Internet Explorer 8 only)Ctrl+Shift+O
Pin/Unpin (Toggle)Ctrl+P
Help (Internet Explorer 9 only)F1

 

Jump-To Tab Shortcut Keys

The following shortcut keys can be accessed at any time while the F12 tools are open. For more on using tabs in F12 tools in Introduction to F12 Developer Tools

ActionInternet Explorer 8 Shortcut KeysInternet Explorer 9 Shortcut Keys
Select HTML TabCtrl+1Ctrl+1
Select CSS TabCtrl+2Ctrl+2
Select Console Tab (Internet Explorer 9 only)n/aCtrl+3
Select Script TabCtrl+3Ctrl+4
Select Profiler TabCtrl+4Ctrl+5
Select Network Tab (Internet Explorer 9 only)n/aCtrl+6

 

HTML Tab Toolbar Shortcut Keys

The following shortcut keys can be accessed under the HTML tab. For more on debugging HTML in F12 tools, see Using F12 Developer Tools to Debug HTML and CSS

ActionShortcut Keys
Make value editableF2
RefreshF5
Select Element by ClickCtrl+B
Edit ModeAlt+E
Clear Browser CacheCtrl+R
SaveCtrl+S
View element source with styleCtrl+T
Add AttributeCtrl+Plus Sign
Expand all beneath this three node. This only works with the number's keypad symbol keys.Alt+*
Collapse all beneath this three node. This only works with the number's keypad symbol keys.Alt+-

 

CSS Tab Toolbar Shortcut Keys

The following shortcut keys can be accessed under the CSS tab. Differences between Internet Explorer 8 and Internet Explorer 9 are noted. For more on debugging CSS in F12 tools, see Using F12 Developer Tools to Debug HTML and CSS.

ActionShortcut Keys
Make value editableF2
Select Element by ClickCtrl+B
File chooser (Internet Explorer 8 only)Ctrl+F
Clear Browser CacheCtrl+R
SaveCtrl+S
Add CSS property while focus is on a propertyCtrl+Plus Sign
Expand all beneath this three node. This only works with the number's keypad symbol keys.Alt+*
Collapse all beneath this three node. This only works with the number's keypad symbol keys.Alt+-
Increment selected value (Internet Explorer 9 only)Up arrow
Decrement selected value (Internet Explorer 9 only)Down arrow

 

Console Tab Shortcut Keys For Debugger Mode

The following shortcut keys work under the Console tab. This tab is only available in Internet Explorer 9. For more on using the F12 tools Console tab, see How to use F12 Developer Tools to Debug your Webpages.

ActionShortcut Keys
Clear browser cacheCtrl+R
Clear browser cache for this domainCtrl+D
Run script (Single line mode)Return
Run script (Multi-line mode)Ctrl+Return
Toggle between single and multi-line modeCtrl+Alt+M

 

Script Tab Shortcut Keys For Debugger Mode

The following shortcut keys work under the Script tab. To work, script debugging does not have to start for these shortcut keys. However, some debugging features are disabled when debugging is not started, and pressing these shortcut keys will yield no results. For more on using the F12 tools Script tab, see Using the F12 Developer Tools to Debug JavaScript Errors.

ActionShortcut Keys
Start debugging or continueF5
Stop debuggingShift+F5
Step overF10
Step intoF11
Step outShift+F11
Break allCtrl+Shift+B
Break on Error - toggle on/offCtrl+Shift+E
Toggle Breakpoints - set/unsetF9
Set breakpoint ConditionAlt+F9
Enable/Disable breakpointsCtrl+F9
Delete all breakpointsCtrl+Shift+F9
Go to Breakpoint windowCtrl+Alt+B
Go to Locals windowCtrl+Alt+L (or V)
Go to Watch windowCtrl+Alt+W
Go to Call Stack windowCtrl+Alt+C
Go to Console windowCtrl+Alt+I
Console - Run script (in single-line mode)Return
Console - Run script (in multi-line mode)Ctrl+Return
Console - toggle between single-line and multi-line modeCtrl+Alt+M
Go to Script chooser dropdownCtrl+Alt+N
Next function on StackCtrl+Period
Previous function on StackCtrl+Comma
Go to specific line number (Internet Explorer 9 only)Ctrl+G

 

Profiler Tab Toolbar Shortcut Keys

The following shortcut keys work under the Profiler tab. For more on using the F12 tools Profiler tab, see Using the Profiler Tool to Analyze the Performance of your Code.

ActionShortcut Keys
Start ProfilingF5
Stop ProfilingShift+F5

 

Network Tab Toolbar Shortcut Keys

The following shortcut keys work under the Network tab. For more on using the F12 tools Network tab, see Using Internet Explorer Developer Tools Network Capture.

ActionShortcut Keys
Start CapturingF5
Stop CapturingShift+F5

 

Search Shortcut Keys

The following shortcut keys can be accessed to do Search. For more on using the F12 tools Search, see Introduction to F12 Developer Tools.

ActionShortcut Keys
Move focus to Search BoxCtrl+E
Next matchF3
Previous matchShift+F3

 

Related topics

How to use F12 Developer Tools to Debug your Webpages
Using the F12 Developer Tools to Debug JavaScript Errors
Using F12 Developer Tools to Debug HTML and CSS
Using the Profiler Tool to Analyze the Performance of your Code
Introduction to F12 Developer Tools
Using Internet Explorer Developer Tools Network Capture

 

 

Show:
© 2014 Microsoft