F12 Developer Tools - Internet Explorer | UA - User Agents
Standards Based Development
ie F12 Developer Tools Keyboard Shortcuts Reference
F12 Developer Tools shortcuts keys are listed below by feature set:
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 Internet Explorer 9 are noted.
| 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 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.
| 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.
| 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.
| 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.
Note: console tab is only available in Internet Explorer version 9 and up.
| 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.
| 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.
| Action | Shortcut Keys |
|---|---|
| Start Profiling | F5 |
| Stop Profiling | Shift+F5 |
Network Tab Toolbar Shortcut Keys
The following shortcut keys work under the Network tab.
| Action | Shortcut Keys |
|---|---|
| Start Capturing | F5 |
| Stop Capturing | Shift+F5 |
Search Shortcut Keys
The following shortcut keys can be accessed to do Search.
| Action | Shortcut Keys |
|---|---|
| Move focus to Search Box | Ctrl+E |
| Next match | F3 |
| Previous match | Shift+F3 |
F12 Developer Tools in ie10
| Element name | Description |
|---|---|
| Menu bar | Lists command menus that can be accessed at any time regardless of the selected View. The Menu bar persists on the screen even when the F12 tools interface is pinned to the Windows Internet Explorer window. |
| Views | Provides a list of views to select for your page. Selecting a view, such as HTML or CSS tab also changes the toolbar for this selected tab. |
| View toolbar | Provides commands and tools that are specific to the current view. |
| Main view pane | The left pane is the main view for all views. It displays views of your page's HTML source code, Cascading Style Sheets (CSS), console messages, script source, profile or network reports. |
| Details pane | This pane displays details for the current tab (HTML, CSS, Script, and Network views). Depending on the current view, the divider between the two panes can be moved to resize each pane. For Console and Profiler tools, there are no separate detail panes. |
| Detail views | Depending on the current tab, you can select the type of details to see. |
| File chooser | When in Script view, this button displays a drop-down list of all files and dynamic scripts associated with the page. When in CSS view, it displays only the CSS files. |
| Command name | Description |
|---|---|
Select element by click (Ctrl+B)  | Lets you quickly find the source for an element on the current webpage. Click this button and then click the element on the webpage. The element is outlined on the webpage, and the element's source is highlighted in the left pane. The details view shows style, trace style, layout, or attribute information about the selected element. This button is available on all views. |
Clear browser cache... (Ctrl+R)  | Clear the browser cache to get fresh page content from the server at next refresh. This button is available on all views. |
Save HTML (Ctrl+S)  | Opens the Save As dialog box to save the source displayed in the HTML view. The file is saved in a .txt file format to prevent writing over the original source file. |
Refresh (F5)  | Refresh the content in the HTML view to its default state. The Refresh button has no effect when Edit mode is on. |
Element source with style (Ctrl+T)  | Displays a new window with the selected element's HTML source and CSS styles with nested element structure. Before using this command, select an element in the body of the document either from the HTML view, or using Select element by click. This is a shortcut to the same command found in the View/Source command menu. |
Edit (Alt+E)  | Edit the current HTML file in the HTML view. This source is the internal representation that Internet Explorer uses to render the page. To wrap long lines of text, click Word Wrap. To see the results of your changes, click the edit button again. This switches out of the Edit mode and refreshes the page to reflect any new changes. |
Word Wrap (Alt+W)  | Wraps long lines within the HTML view when you're in Edit mode. Otherwise, this command is disabled. |
| Command name | Description |
|---|---|
| Select element by click (Ctrl+B) | Lets you quickly find the source for an element on the current webpage. Click this button and then click the element on the webpage. The element is outlined on the webpage, and the element's source is highlighted in the left pane. The details view shows style, trace style, layout, or attribute information about the selected element. This button is available on all views. |
| Clear browser cache... (Ctrl+R) | Clear the browser cache to get fresh page content from the server at next refresh. This button is available on all views. |
| Save HTML (Ctrl+S) | Opens the Save As dialog box to save the source displayed in the HTML view. The file is saved in a .txt file format to prevent writing over the original source file. |
| Refresh (F5) | Refresh the content in the HTML view to its default state. The Refresh button has no effect when Edit mode is on. |
| Element source with style (Ctrl+T) | Displays a new window with the selected element's HTML source and CSS styles with nested element structure. Before using this command, select an element in the body of the document either from the HTML view, or using Select element by click. This is a shortcut to the same command found in the View/Source command menu. |
| Edit (Alt+E) | Edit the current HTML file in the HTML view. This source is the internal representation that Internet Explorer uses to render the page. To wrap long lines of text, click Word Wrap. To see the results of your changes, click the edit button again. This switches out of the Edit mode and refreshes the page to reflect any new changes. |
| Word Wrap (Alt+W) | Wraps long lines within the HTML view when you're in Edit mode. Otherwise, this command is disabled. |
| Command name | Description |
|---|---|
| Select element by click (Ctrl+B) | Lets you quickly find the source for an element on the current webpage. Click this button and then click the element on the webpage. The left pane switches to the HTML view, and highlights the element source. The details view shows style, trace style, layout, or attribute information about the selected element. |
| Clear browser Cache... (Ctrl+R) | Clear the browser cache to get fresh page content from the server at next refresh. |
| Save CSS (Ctrl+S) | Opens the Save As dialog box to save the source displayed in the CSS view. The file is saved in a .txt file format to prevent over writing the original source file. |
| View styles | Opens a drop-down list to switch between all external style sheet files that are associated with the current webpage. |
Console Tab
The F12 tools console tab offers a full width view of the same information you see in Script view, where you see the Console view in the right pane. You can receive error messages from Internet Explorer, as well as send your own messages back from your code without having to break the flow of your execution.
You can also use the F12 toolsConsole view to immediately run script statements outside your program code.
| Command name | Description |
|---|---|
| Select element by click (Ctrl+B) |
Lets you quickly find the source for an element on the current webpage. Click this button and then click the element on the webpage. The left pane switches to the HTML view, and highlights the element source. The details pain displays Style, Trace Styles, Layout, or Attribute information about the selected element. |
| Clear browser Cache... (Ctrl+R) | Clear the browser cache to get fresh page content from the server at the next refresh. |
F12 Developers Tools ie10 Script Tab Toolbar
| Command name | Description |
|---|---|
| Select element by click (Ctrl+B) | Lets you quickly find the source for an element on the current webpage. Click this button and then click the element on the webpage. The left pane switches to the HTML view, and highlights the element source. The details pain displays Style, Trace Styles, Layout, or Attribute information about the selected element. |
| Clear browser Cache... (Ctrl+R) | Clear the browser cache to get fresh page content from the server at the next refresh. |
Continue (F5)  | Continues running script without pausing, until another breakpoint or script error is hit. |
Break All (Ctrl + Shift + B)  | Pauses execution immediately before the next script statement is to be executed. |
Step Into (F11)  | Executes the next line of script and pauses, even if the next line is inside a new function. |
Step Over (F10)  | Continues until the next line of script in the current function, and then pauses. Useful for stepping over function calls. |
Step Out (Shift + F11)  | Continues executing script until the next line in the calling function . This command is helpful to return to the point where the current function was called. |
Configuration (Ctrl + Alt + 0)  |
Displays a drop-down list of the following settings:
|
| Start debugging | Click button to start debugging. Click again to stop debugging. The debugger control is enabled after Start debugging is clicked and disabled after debugging has stopped. If F12 tools is pinned to the browser window, it opens in its own window when debugging starts. When you stop debugging, you must re-pin F12 tools manually. |
| Script Chooser | Click to display a list of external scripts associated with this webpage to show in the Script view pane. |