F12 updates in Developer Channel

Internet Explorer Developer Channel features a number of cool updates to F12 developer tools, both large and small. Downloads are available for Windows 8.1 and Windows 7 SP1 customers running Internet Explorer 11. Please try out the features detailed below and provide feedback via Microsoft Connect.

What's new?

Let's look at what's new in the overall F12 tools user interface, then run down the updates by tool.

Changes to the F12 user interface

  • New icons and notifications

    The icons for the Memory and Profiler tools have changed.

    There are now indicators on the icon bar for errors in the Console, changes in Emulation settings, and for active profiling sessions in the Memory, Profiler, and UI Responsiveness tools. The image below shows the new icons with notifications on the Console and Memory tool icons, indicating there are two Console errors displaying and that a Memory profiling session is currently in progress.

    image showing the new icons and notifications on Memory and Console

  • F6 superset navigation within tools

    Using F6 is like using the tab key to navigate around a tool, but it "tabs" through a selected set of the most commonly used elements in a tool pane, rather than through every selectable item. This is part of an overall cleaner system for using the keyboard to navigate within and between tools.

  • Move back and forth between recently used tools using the keyboard

    Use CTRL + [ to move backwards in your tool navigation history, CTRL + ] to go forward, much like the back and forward arrows when you're browsing.

  • Quick access to document mode

    Want to access the Document mode without switching tools? We added a new dropdown at the top that gives you access to the document mode from any tool.

    image of the document mode drop down

Console changes

  • Console.timeStamp()

    When called from the Console or within code, it outputs to the Console the number of milliseconds the current browser tab has been open. If called while running a profiling session with the UI Responsiveness tool, it creates a user mark on the session's timeline with a timestamp based on the time since the session started.

  • CTRL+L clears the console of all messages
  • Accurate autocomplete

    Console's autocomplete no longer includes indexer properties, making for a cleaner and more accurate selection of autocomplete suggestions.

    $, $$, $x, $0-$5, and $_ have been added to the Console autocomplete list for the convenience for those who use them and to make the Console's behavior more consistent with other browsers.

  • Stale message indicator

    If you have chosen to turn off the Clear on navigate option, older console messages have their icons greyed out to help distinguish between messages for the active page and messages from prior pages in your history.

    stale messages indicator screen capture

DOM Explorer changes

  • Change bars in Computed pane

    The change bars (different colors for changed properties, added properties, and deleted properties) users have been enjoying the Styles pane, now appear in the Computed styles pane.

    computed pane showing changebars

Debugger changes

  • Sourcemaps designate

    Right-click on a document's tab in the Debugger and you can specify a source map. This makes it possible to use source maps with shipped code that has had the source map comment removed.

    source pane with context window showing for source map choosing

  • Autocomplete in watches

    Now, when adding a watch, you get autocomplete options suggested.

    watch autocomplete suggestions

  • Return value inspection

    When breaking on a function with a return value, step into the function until you've stepped to the closing curly bracket. The return value will be displayed in the Locals portion of the Watches pane. Step again and the value will be returned to the code that called for it.

    For a quick demonstration, try this code in the Console:

    function showval() { var x = 0; x++; debugger; return x; } showval();

    It will call the function, break on debugger, and you can step into it to see the return value.

  • Multi-select for breakpoints

    CTRL + CLICK, SHIFT + CLICK, and CTRL + A work to select multiple breakpoints in the Breakpoints pane.

  • Continue and ignore breaks

    Press F5 to continue to the next break. Hold F5 to continue past multiple breaks until you release F5.

  • Event breakpoints and tracepoints

    These work much like the breakpoints and tracepoints already present in F12 tools, but instead of being triggered when a specific block of code is executed, they are triggered when a specific event fires. Each has an optional conditional filter to help you narrow down their scope to the specific instance of an event that you want to inspect. They can be added using the Add event tracepoint and Add event breakpoint icons highlighted in the image below.

    Add event breakpoint modal window and highlighted icons

UI Responsiveness tool changes

  • Import/export performance sessions

    You shouldn't have to reproduce your test case every time you want to analyze data it produces or share that data with a colleague. The import (folder) and export (disk) icons on the UI Responsiveness tool's icon bar let you save your memory snapshots to a file that can be imported later.

  • Image preview

    If you've seen an HTTP request for an image and wondered which image it was, the image is now previewed in the event details.

    demonstrating the image preview in the UI Responsiveness tool

  • Filtering events

    The Filter events button is small but mighty. Hidden behind that button is a menu that lets you filter events in multiple ways and each way has a significant impact.

    • Event name filter

      Filter for any event name containing a match for the filter text.

    • UI activity filter

      Using the checkboxes, you can exclude larger categories of events to make it easier to focus on the area you're investigating. For example, if you're just interested in network activity, you can filter out all the noise of the UI and garbage collection.

    • Time threshold filter

      This feature filters out top-level events less than 1ms in duration. In many scenarios, this dramatically simplifies the waterfall view and helps you focus on more impactful events.

    the filter events sub-menu filtered down to DOM events taking more than 1ms

  • HTML5 scripting events

    If you use media query listeners or MutationObservers, you can now identify their respective costs when running a performance profiling session.

    UI Responsiveness session showing a media query listener event

  • Frame grouping

    The button between the Sort by dropdown and the Filter events menu toggles Frame grouping. This groups top-level events into their corresponding unit of work (or "frame") during periods of time where animations/visual updates were occurring. The frames are treated like other events, so they can be sorted and filtered, and they provide an Inclusive time summary.

    UI responsiveness tool with events grouped by animation frames

  • User measures

    If you use the performance.mark() API to add triangles to the timeline, indicating where specific events happened, the performance.measure() API extends the usefulness of performance marks. Use the performance.measure() to create a User measure event encompassing the time between two performance.mark() events, right click the event, and use the Filter to event option to select just the events between the two marks.

    UI responsiveness session using the performance.measure feature

  • Colorization for DOM

    This feature adds colorization to DOM elements, string literals and number literals. Besides making the content within the different F12 tools look and behave more alike, it adds a little more visual interest to the UI Responsiveness tool.

  • Selection summary

    When you select a portion of the timeline, the event details pane will show a summary of the selection. Hover over different segments of the circular chart for a tooltip with the segment's event category.

    demonstrating the selection summary in the UI Responsiveness tool

  • Support for console.timeStamp()

    Using the console.timeStamp() method in your code or in the console during a profiling session creates a user mark on the timeline with the time since the profiling session began.

Memory tool changes

  • Dominator folding

    Dominator folding helps simplify the contents of a snapshot by removing objects from the top-level views that are logically components of another object (e.g. a <BR> within a <DIV>, a Scope held on to by a Function) and tend to be extra details that don’t improve your insight into the data, but could waste your time.

    For example, the image below shows before and after views, demonstrating how dominator folding improves the "story" the tool is telling. The folded view shows 30 HTML <DIV> elements, which account for 15.64 MB of memory, and are holding on to detached DOM nodes. In many cases, it isn’t important to know the composition of an object, so much as simply knowing that it is too large, or that it is leaking (especially when using third-party libraries).

    Before and after - IE11 dominator view, folded view

  • Colorization of DOM, String & Number literals

    This feature adds colorization to DOM elements, string literals, and number literals. Besides making the content within the different F12 tools look and behave more alike, it makes memory analysis a little more visually interesting.

  • Roots cycle filtering

    Want to be able to investigate the composition of an object without getting unknowingly lost in a circular reference path? This feature detects child references which are circular and “trims” them, so that you don’t get confused by traversing them into infinity. Additionally, it annotates these references so that it’s clear when a reference has in fact been "trimmed."

  • Import/export session

    You shouldn't have to reproduce your test case every time you want to analyze data it produces or share that data with a colleague. The import (folder) and export (disk) icons on the Memory tool's icon bar let you save your memory snapshots to a file that can be imported later.

    the memory tool with a three-snapshot session imported from disk

Emulation tool changes

  • Settings persistence and reset

    A Persist Emulation settings icon is added to the Emulation tool. This will maintain your current emulation settings until specifically disabled, allowing you to work, close the browser, and come back with your emulation settings intact. To its right is a Reset Emulation settings icon, which quickly resets the tool back to default values.

    top corner of the Emulation tool showing the Persist Emulation settings and Reset Emulation settings  icons

Related topics

Download Internet Explorer Developer Channel for Windows 8.1
Download Internet Explorer Developer Channel for Windows 7 SP1

 

 

Show: