Developer Tools Keyboard Shortcuts Reference

Article
04/23/2015

This content refers to an older version of F12 developer tools. Please visit our latest F12 tools documentation.

The F12 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
Jump-To Tab Shortcut Keys
HTML Tab Toolbar Shortcut Keys
CSS Tab Toolbar Shortcut Keys
Console Tab Shortcut Keys For Debugger Mode
Script Tab Shortcut Keys For Debugger Mode
Profiler Tab Toolbar Shortcut Keys
Network Tab Toolbar Shortcut Keys
Search Shortcut Keys
Related topics

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

Action	Shortcut Keys
Open/Close Developer Tools	F12
Resize to 800x600	Ctrl+Shift+1
Resize to 1024x768	Ctrl+Shift+2
Resize to 1280x768	Ctrl+Shift+3
Resize to 1280x1024	Ctrl+Shift+4
Switch to Quirks mode	Alt+Q
Switch to Windows Internet Explorer 7 Standards mode	Alt+7
Switch to Internet Explorer 8 Standards mode	Alt+8
Switch to Internet Explorer 9 Standards mode (Internet Explorer 9 only)	Alt+9
Switch to (page default) mode	Alt+D
Clear Browser Cache	Ctrl+R
Clear Browser Cache for This Domain	Ctrl+D
Select Element by Click	Ctrl+B
View Class and ID Information	Ctrl+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 Element	Ctrl+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

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

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

Action	Shortcut Keys
Make value editable	F2
Refresh	F5
Select Element by Click	Ctrl+B
Edit Mode	Alt+E
Clear Browser Cache	Ctrl+R
Save	Ctrl+S
View element source with style	Ctrl+T
Add Attribute	Ctrl+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+-

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.

Action	Shortcut Keys
Make value editable	F2
Select Element by Click	Ctrl+B
File chooser (Internet Explorer 8 only)	Ctrl+F
Clear Browser Cache	Ctrl+R
Save	Ctrl+S
Add CSS property while focus is on a property	Ctrl+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.

Action	Shortcut Keys
Clear browser cache	Ctrl+R
Clear browser cache for this domain	Ctrl+D
Run script (Single line mode)	Return
Run script (Multi-line mode)	Ctrl+Return
Toggle between single and multi-line mode	Ctrl+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.

Action	Shortcut Keys
Start debugging or continue	F5
Stop debugging	Shift+F5
Step over	F10
Step into	F11
Step out	Shift+F11
Break all	Ctrl+Shift+B
Break on Error - toggle on/off	Ctrl+Shift+E
Toggle Breakpoints - set/unset	F9
Set breakpoint Condition	Alt+F9
Enable/Disable breakpoints	Ctrl+F9
Delete all breakpoints	Ctrl+Shift+F9
Go to Breakpoint window	Ctrl+Alt+B
Go to Locals window	Ctrl+Alt+L (or V)
Go to Watch window	Ctrl+Alt+W
Go to Call Stack window	Ctrl+Alt+C
Go to Console window	Ctrl+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 mode	Ctrl+Alt+M
Go to Script chooser dropdown	Ctrl+Alt+N
Next function on Stack	Ctrl+Period
Previous function on Stack	Ctrl+Comma
Go to specific line number (Internet Explorer 9 only)	Ctrl+G

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.

Action	Shortcut Keys
Start Profiling	F5
Stop Profiling	Shift+F5

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.