F12 developer tools download

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 tools Console view to immediately run script statements outside your program code. 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. For a list of Console view errors, see F12 tools console error messages. The Script tab lets you see and interact with the JavaScript source on the webpage. Click the View sources drop-down button to pick other script files. Script view shows line numbers and syntax coloring.

Click the left margin or a line number to set or clear breakpoints. You can select text in this pane, and right click for a context menu that offers additional commands. The details pane in the Script view displays information about the code in the left pane. Click to choose one of the detailed views that include console and error messages, local variables, watch variables, function call stack, and the list of breakpoints. The console receives error messages from Internet Explorer.

Using the console API, your code can send messages to the console without having to break the flow of your execution. This is less intrusive than using the traditional alert method or printing to the screen. The Console command line can run single and multi-line script statements outside your program code.

Statements are executed immediately and results appear in the Console 's pane. View variables from any scope. To add local or global variables and objects, do one of the following:. When the debugger is running and execution stops at a breakpoint, you can view local variables within the scope of the current function. If you step into another function, the local variable view reflects the new current function.

Trace the flow of function calls made by executing code. The current function is on top and the function that calls it is below it in the stack. You can double-click a function to go to that function definition in the source.

This command requires the debugger to be started and execution be stopped at a breakpoint. Set breakpoints to stop execution at this point of the script in order to inspect the code.

From the Script view pane, you can set breakpoints by doing one of the following:. You can also set a conditional breakpoint that stops execution when the condition is true, such as when an exception happens or a variable exceeds a specified value. To set a condition to a breakpoint, right-click a breakpoint in either the left or right pane, and select Condition.

From the Breakpoints pane, you can view a list of all the breakpoints set that are related to the webpage or site you're debugging.

You can double-click a breakpoint item to go to that breakpoint in the code. Right-click the pane for a context menu with more options. F12 tools provides a built-in script profiler that lets you to profile your running JavaScript code in Internet Explorer. The Current view controls how profiled information is presented. Click the title of a column to sort the report based on that column. You can double-click an entry to open the Script view and display the code where this item is defined.

The profiler toolbar lets you change views, export data, start and stop profiling, and view profiling reports. Use this command to quickly find an element on a webpage. Click this button to start collecting profile information. When the profiler is started, click the activities you want to profile on your webpage. These script activities are collected and presented to you in a Report.

Click the Stop Profiling button to stop profiling and view the report. The session is logged into a report and the information displayed.

Repeat this process to record another profiling session. Set the current view of the profile report. You can view profile report using either the Functions or Call Tree views. Each recorded profile session creates a numbered Report. Click the Report drop-down list to switch between reports. Closes the current report. The closed report is removed from the report list. The next report on the list becomes the current report.

For more info about using the Profiler, see Using the Profiler Tool to analyze the performance of your code. The Network tab can help you diagnose network-related issues by showing all the traffic that is related to a page and exposing details about individual connections. You can see the relative timing that each item on a webpage takes to load and render, so you can quickly see and solve problems. The Save button lets you save the network capture log to an XML or comma delimited.

CSV file for further analysis in a spreadsheet or database. Click to record network traffic. Click again to stop recording and view the report that is generated. The summary view default shows all network activity recorded. Click button to change to the detailed view, which drills down on a single URL. When in detailed view , the next and preview buttons appear to the right of this button, and let you page through the details of each URL in the report.

The Search box provides a way to quickly find specific text in the currently open file or report. Search is context-sensitive and what it can find is based on the currently selected view.

Search highlights all matching words and next and previous buttons let you navigate the matches. As you traverse the list of matches, the current match is highlighted and brought into view. For example, use the keyword " div" to find all the div elements in the page. You can search for CSS class names by ". You can also narrow your search down by element. For example, " div. Search terms are case sensitive when searching for selector class names. For all other views, such as the CSS view, use regular text keywords.

Search is not case sensitive in this case. Each Internet Explorer instance has its own instance of F12 tools. When working with multiple webpages, use the Pin feature to attach each instance of F12 tools to its associated Internet Explorer instance.

When script debugging starts, F12 tools opens in a separate window. The F12 tools window offers the normal Minimize , Maximize , Restore , and Close window controls, as well as additional pinning controls.

To resize a pinned F12 tools session, stretch the upper edge of the window to size. In a minimized state, F12 tools remains attached to the window and only the Menu Bar is visible. Developer Tools Keyboard Shortcuts Reference.

Skip to main content. This browser is no longer supported. Download Microsoft Edge More info. Contents Exit focus mode. In this article. 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.

Provides a list of views to select for your page. The left pane is the main view for all 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.

When in Script view, this button displays a drop-down list of all files and dynamic scripts associated with the page. Resets all the changes made to the current instance of Windows Internet Explorer and refreshes the webpage. Lets you change the source viewer to use when you click View Source : Default viewer: Use the built-in color-coded syntax viewer.

Notepad: Use Notepad as the viewer. Other: Choose another program installed on your computer to be the viewer. Turns off all scripts on a webpage. When this setting is selected or cleared, it reloads the page to reflect the current setting. This setting can only be changed if Protected Mode is turned off. Windows Performance Analyzer Free. Windows File Manager Free. PowerShell Preview Free. Kiosk Browser Free. Advanced Recovery Companion Free. Additional information Published by Microsoft Corporation.

Published by Microsoft Corporation. Approximate size Age rating For all ages. This app can Access all your files, peripheral devices, apps, programs and registry Access your Internet connection Access your home or work networks Microsoft.

Permissions info. Installation Get this app while signed in to your Microsoft account and install on up to ten Windows 10 devices. Accessibility The product developer believes this product meets accessibility requirements, making it easier for everyone to use.

Seizure warnings Photosensitive seizure warning. So how do you enable it? Here are the steps to enable developer tools using the Local Group Policy Editor. Some editions of Windows may not have the local GPO. See the following screenshot. Note that Not Configured is the default setting. Then apply the changes. Such tasks include website monitoring , making alterations, and allowing experimental browser tools to work among other tasks. Since Inspect Element is an advanced feature, it should be used with caution.

This will take you back to the open page where you can select the item to inspect. To make edits, click on the DOM Explorer tab of the developer tools. Once you have selected the element you wish to edit, you can choose one of two options:. If you want to view cookies for inspection or modification, then the following steps will guide you to access cookies in IE Developer Tools.

You can step through each captured traffic segment to view other cookies. It also includes the current element layout, event handlers for the active element, and CSS changes that you may have made during the session. You get to see any changes you make immediately.