Developer Tools Keyboard Shortcuts Reference
[This documentation is preliminary and is subject to change.]
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
- 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 |
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
Build date: 2/7/2012
No comments:
Post a Comment