Share via


Developer Tools Keyboard Shortcuts Reference

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

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

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

 

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

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+-

 

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.

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

 

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.

Action Shortcut Keys
Start Profiling F5
Stop Profiling Shift+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.

Action Shortcut Keys
Start Capturing F5
Stop Capturing Shift+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.

Action Shortcut Keys
Move focus to Search Box Ctrl+E
Next match F3
Previous match Shift+F3

 

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