This continues a series of posts on the F12 Developer Tools included with Internet Explorer (since version 8) to help you improve your websites with tools to review content, diagnose issues, improve performance, and more:
If this is your first look at the F12 Tools, I recommend you skim through the introductory post first.
Let’s fire up the IE9 Developer Tools (press F12 or choose Tools –> F12 Developer Tools) and take a look.
Just click “Start profiling”, load a page and/or use page functionality, and click “Stop profiling”. You can also use F5 and Shift+F5 to start/stop, though I rarely find that easer.
In this example, we’re using the “ECMAScript5 Tile Switch Game” sample from the IETestDrive site
When the session is stopped a report of the instrumented script is shown, including the following by default:
Click the Profiler tab to return to the list.
There are more details available via columns that are hidden by default. To show them, right-click in the report and choose “Add / Remove columns”:
This will give access to:
The right-click menu also enables sorting by displayed columns, but you’ll probably find it easier to click on column headers to toggle between sorting ascending and descending.
There are two options available for viewing profiling report data: Functions and Call Tree views.
By default, reports are shown in Functions view, listing content at the function level (one line per function) and allow an easy way to see where the most calls are made and where time is spent.
Call Tree view shows the same data (each line is still a specific function), organized into a hierarchy by caller/callee relationships. From the root function(s), expand to see functions were called (and continue to expand to functions they in turn called.)
Sorting in Call Tree view works at the group level, with each subgroup sorting individually.
As with other areas of the F12 Tools, use the Search box to find functions by name:
If a match is found, use the Next/Previous Result buttons (Enter / Shift+Enter) to navigate results.
As you create profiling sessions, you may notice the report drop-down is keeping track:
Use this to switch between individual profiling sessions. These are retained only for the life of the window.
To save the data for later use, or to perform more analysis, click the “Export data” button to save to a CSV format (that can then be load directly into Excel):
Once in Excel, you can decide where to go next. Build up an archive to document application performance during development, create various analysis graphs, or even extend Excel with .NET to help detect changes and trends from session to session.
Now that you know how the profiler works, what should you be looking for? It’s a huge topic, subject of books, presentations, and articles, but here are some ideas to get you thinking:
Again, just a starting point, and many books and articles await you. For more ideas, watch Jason Weber’s “50 Performance Tricks to Make Your HTML5 Web Sites Faster” session from Mix11.
In the next article, we’ll take a look at the Network feature that was added to the F12 Tools with Internet Explorer 9.