Introducing the IE8 Developer Tools JScript Profiler


Hello! I am Sameer Chabungbam, one of the Program Managers on the JScript Team.

The recently released Beta 2 of Internet Explorer 8 contains a lot of improvements which are aimed at making developing web applications on Internet Explorer 8 easier and more productive. One of these improvements is the JScript Profiler in Developer Tools, which provides critical JScript related performance data to a web developer that helps identify and fix performance related issues. We believe the Profiler is going to be a very helpful tool to fine tune the performance of the scripts in a web application. It is lightweight, easy-to-use and provides the following features:

  • Provides performance data for JScript functions in two views:
    • Functions View – a flat listing of all the functions
    • Call Tree view – a hierarchical listing of the functions based on the call flow
  • Supports exporting the data to a file
  • Provides an inferred name for anonymous functions
  • Profiles built-in JScript functions
  • Supports multiple profile reports
  • Supports profiling across page navigation and refreshes

This post gives an overview of the Profiler and highlights some of its features. We hope you will try it out and give us your feedback.

Using the Profiler

Launch the Developer Tools in Internet Explorer 8 either by pressing F12 or selecting ‘Developer Tools’ from the Tools dropdown on the command bar. Switch to the Profiler Tab, and you can see the new Script Profiler. Click the ‘Start Profiling’ button to begin a new profiling session.

JScript Profiler Main Screen

Now, you can perform the scenario you want to profile, and JScript performance data will be collected by the profiler automatically in the background. Note that the text of the button changes to ‘Stop Profiling’ to indicate profiling is going on. To stop profiling, click the ‘Stop Profiling’ button. The profiler will process the collected performance data and display a profile report for the session just concluded.

JScript Profile Report

Viewing the Profile Report

The report presents the data in two views which can be selected from the Current View dropdown:

  • Functions view: This is a flat listing of all the functions with the corresponding performance data.
  • Call Tree view: This is a hierarchical listing of the functions based on the call execution sequence. Each node corresponds to a function and lists all the functions it called and the performance data for those calls. The Call Tree view is useful in finding the call stack trace that has the greatest performance impact in your script.

In both views, each row corresponds to a JScript function, with the various performance data in different columns. The view can be customized to show different columns. Right-click a column header and select ‘Add / Remove Columns’ to select the columns you want to view.

Call Tree with Context Menu

You can sort on any of the columns by clicking the corresponding column headers or by selecting the column from the ‘Sort By’ menu items in the right-click context menu.

The available columns are:

  • Function: The name of the function
  • Count: The total number of calls made to this function
  • Inclusive Time (ms): The time spent in this function and its children in milliseconds
  • Inclusive Time %: The percentage of time spent in this function and its children
  • Exclusive Time (ms): The time spent in this function in milliseconds
  • Exclusive Time %: The percentage of time spent in this function
  • Avg Time (ms): The average time spent in this function and its children in milliseconds
  • Max Time (ms): The maximum time spent in this function and its children in milliseconds
  • Min Time (ms): The minimum time spent in this function and its children in milliseconds
  • URL: The URL of the source file where this function is defined
  • Line Number: The line number of the beginning of this function in the source file

Double-click a row to view the source code definition of the corresponding function in the Script Tab. This is available only if the performance data collects the URL information and the source file is currently loaded in the Script Tab. You need to enable script debugging in Internet Explorer for the profiler to collect the URL information. [Note: You can enable script debugging from the Tools > Internet Options > Advanced Tab.]

Function Source View

Exporting Data

Sometimes, we may want to analyze the profile report further, create graphs, or share it with another application. To facilitate this, the Profiler allows the data to be exported to a file in a Comma Separated Values (CSV) format. The data can then be opened in other applications (like Microsoft® Office Excel®) and can be shared. Simply click the ‘Export Data’ button Export Data Icon and give a filename to save the profile data of the current report to a file. Note that presently only the Functions view is exported and not the Call Tree view.

Inferred name

In Javascript, the function name is optional. You can define a function (called anonymous function) with no name. In practice, this is quite common. Many real-world Javascript functions are defined in the context of an object literal, and more often than not, these are anonymous. This presents a problem in the profile report. When we have multiple anonymous entries, the only way to differentiate the anonymous functions is to look up the actual source definition of the functions from the URL and Line number information. This is far from being convenient and makes the profile report hard to read and confusing.

To overcome this problem, the JScript profiler tries to infer a name for each anonymous function based on the context where the function is defined. Let me illustrate how this works with the following example:

var Shape = {
    Area : function () { . . . } // anonymous function 1
};
Foo = function () { . . . } // anonymous function 2

When we profile this code, these functions will show up in the report as “Area” and “Foo” respectively, instead of both being listed as anonymous functions. This way, you can quickly identify which function is being referred to in the profile report without having to open the source code. The heuristic logic used to infer the name is simple enough to limit the performance overhead. In some cases, this might fail to infer a name, in which case, the function is listed with the special name “[Anonymous]”.

We hope the profiler comes handy when improving Javascript performance of your web applications in Internet Explorer. We look forward to your feedback.

Thanks!

Sameer Chabungbam
Program Manager

Comments (40)

  1. lancenz says:

    While on the topic of js debugging :)..

    1. any chance of getting a dom viewer in the developer tools that works anytime (like firebug does) – there is a [local] viewer which works well when you have a script error in the main html, but I don’t want to have to create an error to navigate through my js objects.. This is a very handy feature when you start to get into serious JS development, and the only reason I use FF when writing complex JS… ie extending YUI code.

    2. in the "html" tab > element > "Attributes" tab… instead of displaying [object xxxx] could you possibly make it a tree view.. it’s nice to be able to see what’s inside the object, rather then having to write code to do it myself, or at least have a link to the DOM viewer so I can expand it there too..

    3. Also, any chance of building in a basic html validator.. not a link to an online one.. I develop pages behind login screens, and usually develop off a localhost or internal server; so a web-based validator is no good and it’s a pain to copy/paste the html source into a manual upload field.

    Thanks :)

  2. fan says:

    Next IE feature’s would be to use smartscreen filter to mark Live search links with icon if it’s safe or malicious site. If that is possible to do.

  3. JackyMao says:

    This can be a high light point of IE 8.

  4. Fan says:

    Just notice that I can’t delete website using organize favorites. I click delete button and no deletion at all, even when right clicking a website and selecting delete on context menu

  5. Randy says:

    Wow.  This is worth so much to me as a developer I can only say thanks.  My family just heard me utter something for the first time, "Internet Explorer just got really cool."  This helps me maximize the efficiency of my web-based application code and that’s plain awesome.

  6. I think that strong Javascript debugger is very necessary tool. I have never found the suitable one. I truly hope that JScript Profiler will help me quickly to improve web pages.

  7. fr says:

    This is a very nice feature, but to me it seems more important to get IE’s performance into the same league as other modern browsers first, before expecting developers to put extra effort fine tuning their scripts for IE with this tool.

    https://bugzilla.mozilla.org/show_bug.cgi?id=424715#c9 is one extreme example of how far behind IE8’s performance remains, but IE is still significantly behind in most benchmarks I have seen.

  8. Staicu Ionut says:

    there is any chance to have this on previous version of IE? Like 7 or even 6?

  9. redsquare says:

    @Staicu Ionut, come on you already know the answer to that

  10. joewood says:

    What happened to the plan to combine the JScript engine in IE with the .NET CLR?  I’m sure I read that this was on the cards for IE8 release, I think when Mozilla paid a visit to your offices.

  11. This is an awesome feature – nice work!

  12. Wil says:

    Nice job coming up with Firebug, guys.

  13. Chris says:

    Great! Only one thing missing for me. Just need support to monitor XHR like firebug. Then I think it will be feature complete.

  14. Chris Griego says:

    This is exciting! When the browser is in IE7 mode, does the profiler show results consistent with what the real IE7 engine would show?

    The one request I would have is to display the total JS execution time measured and total number of function calls.

  15. matsu says:

    Replace the safety Menu button with a split button to quickly access the InPrivate browsing.

  16. matsu says:

    How do I prevent programs from changing my default search provider? Some websites and add-ons might try to change your default search provider. To learn how to prevent this, see How do I prevent programs from changing my default search provider?

    this only applies to the search box not the new smart address bar. Right now my search provider in Smart address bar is yahoo thanks to ISP program with no option to change it.

    I like live search in address bar but I’m force to use netzero yahoo search in the smart address bar.

  17. Sameer [MSFT] says:

    @Chris The profiler shows the result as the script is executed on IE8. This is irrespective of the IE7 mode.  Thanks for the suggestion – it is a good feedback!

  18. matsu says:

    Earlier i post about program taking over IE 8 search. How about a option to prevent a program changing search provider.

  19. EricLaw [MSFT] says:

    @Chris: For monitoring XHR traffic, have you looked at Fiddler?  http://www.fiddler2.com

  20. Private One says:

    It would be great somewhere to compare/contrast what InPrivate does vs some of the interpretations people have put on it.

    The help files and blog posts are clear and accurate on what InPrivate DOES do, but for the less careful readers, what it DOESN’T do might also be good to say.

    There are two main alternate scenarios that people seem to be thinking of in blog comments:

    – Guest Mode, where someone is using your PC temporarily and you don’t want them using your cookies or changing your setting.  Easiest answer here seems to be letting them use a Guest user account, that’s much more secure!

    – Anonymous browsing, where websites cannot track the user.  This would require something like Tor to anonymise IP addresses, as well as blocking by the browser.

    InPrivate browsing seems thought out smartly, better IMHO than Chrome which gives ignorant users a false illusion of Anonymous Browsing, but would be great to get extra clarification.

    Thanks guys, loving using IE8 it’s a huge leap forward and beats the competition in many ways.

  21. Stifu says:

    @Private One

    "InPrivate browsing seems thought out smartly, better IMHO than Chrome which gives ignorant users a false illusion of Anonymous Browsing, but would be great to get extra clarification."

    How about reading what’s written in a newly opened Incognito tab, in Chrome?… Wait, never mind what I said, simply trolling is less trouble and more fun.

  22. Greg Houston says:

    This will be helpful, I’ve already been using the JavaScript console in an attempt to get my site working in IE8 beta 2, though the biggest blocker for me in developing JavaScript in IE is the JavaScript error messages in the Error Console. They are not nearly as helpful as those in Firefox and Opera. Though the error messages give a line number for where the problem occurred, they do not say in what file the error occurred. Also, the error’s should show a snippet of the code where the error occurred.

    The Opera error console is the most developed and helpful. Take a look at it. It shows a lot more than just JavaScript errors and you can filter which type you wish to view.

  23. Greg Houston says:

    I said the Error Console above, but meant the pop-up JavaScript errors in IE8 and previous Internet Explorer versions. These popup error messages are often next to useless. In Opera the error console pops up and you get a very detailed explanation of the problem.

  24. The recently released Beta 2 of Internet Explorer 8 contains a lot of improvements which are aimed at

  25. gOODiDEA.NET says:

    .NET Closures Algorithm to Detect Blank Images Performance Analysis Reveals Char[] Array is Better than

  26. I Think the improvements are a great idea,and will be glad to see this happening.

  27. lancenz says:

    Another thing, would it be possible to record trapped errors.. quite often you might be chasing down an error like "object is null" which is nested 6 functions deep but caught by the top level try/catch.. would be awesome if the error console listed trapped errors so you are at least aware of them.

    I know it’s been listed before, but a XHR request/response header log would also be very cool..

    Also, the new developer tools are much slower then the old ones.. to the point where I’m pondering reverting to IE7 again..

    Also the element CSS tracer is quite hard to use, used to be quite easy to find where a rouge style is inherited from, but I got well lost trying to do this yesterday :/

    The debugger works well, although it has a tendancy to crash ie8 when you run alert boxes etc while in debug mode.

    <rant>

    If you were to ask me :) I’d say the JS debugger really needs to be seperate from the HTML/CSS tools, I used to like using "MS Script Debugger" as it was seperate from IE, and kept the dev toolbar open for multiple tabs, which was much easier to use/follow.. obviously the new debugger is better functionality wise, but it just leaves me feeling a bit frustrated waiting for the dev toolbar to load quicker so I can find the ID of an element by clicking on it then closing it again.. used to be instant.. took me 6.2 sec to open dev tools, wait for it to load, then select this comments box.. IE7 dev tools was much, quicker then that.

    Also, is there any possible way for both IE7 + IE8 to co-exist without resorting to a VM.. I need to make new code work in IE8 and IE7.. I just don’t trust the emulate mode to be 100% accurate of what IE7 would do.

    </rant> :)

  28. Sameer [MSFT] says:

    @lancenz Those are great feedback.. thanks!  I will make sure it reach the right people.  We will look into the debugger issues also.  If you can send me a specific scenario of the debugger crashing ie8 it would be great.  My id is sameerch AT microsoft DOT com.

  29. JScript Blog says:

    In Internet Explorer 8 Beta 2 JScript team has focused on improving developer productivity. You can read

  30. It has been a while since I blogged here (this is an understatement!). Internet Explorer 8 Beta 2 has

  31. As you might be aware that Internet Explorer Beta 2 was released few weeks back. In this JScript team

  32. Haris says:

    How can i enable java script at ie8 beta 2?

    Thanks

    Regards

    Haris

  33. geld verdienen says:

    Haris, try "options". You can find it there!

  34. Steve B says:

    How about sorting in order of execution, seems impossible to get it to sort in the order things actually occured once you sort on something else.

    Awesome work BTW, I can’t tell you how helpful these dev tools have been to getting to the bottom of some nasty stuff that required much more effort previously.

  35. Recently someone asked me about the best practices for AJAX performance. Though this information is scattered

  36. 이 글은 Internet Explorer 개발 팀 블로그 (영어)의 번역 문서입니다. 이 글에 포함된 정보는 Internet Explorer 개발 팀 블로그 (영어)가 생성된 시점의

  37. JScript Blog says:

    During Beta1 and Beta2 pre-releases of IE8, we’ve blogged about the performance optimizations done in

  38. IEBlog says:

    During Beta1 and Beta2 pre-releases of IE8, we’ve blogged about the performance optimizations done in

  39. Originating in Microsoft Research as Ajax View , the Visual Studio 2008 AJAX Profiling Extensions Power