JavaScript Profiler 3.0

Author: Stephen W. Cote

Summary

JavaScript Profiler 3.0 is a context-menu extension for Internet Explorer 6 and later. It identifies JavaScript functions by internal script blocks and external files, object model inspection, and accesses the live DOM via the Active Source utility.

For monitoring JavaScript performance across browsers, refer to the Function Monitor project.

All features of JavaScript Profiler 3.0 are available in the Hemi JavaScript Framemork Framework Explorer template.

Content Type: DHTML Projects

Copyright Stephen W. Cote, 2000 - 2011.

Do not reproduce or distribute without the written consent of the author.

Index

Modification History

AuthorDateDescription
Stephen W. Cote04/26/2011Version 3.0. Revised the framework to use Hemi JavaScript Framework, correcting an issue with IE 9 support.
Stephen W. Cote05/06/2008Included Window Model mode for accessing custom function constructs within typical frameworks and libraries.
Stephen W. Cote04/29/2008Integrated Function Monitor into the profiler.
Stephen W. Cote04/26/2008Version 2.0.

Introduction

License

BSD license specified in the Hemi JavaScript Framework license file.

Foreward

JavaScript Profiler is a tool designed as a context menu extension for Internet Explorer 6 or later. Most JavaScript functions that are declared inline, in separate files, and typical frameworks and libraries can be accessed.

This tool will only work with Internet Explorer 6 or later on Windows. To use the same features with other browsers, use the Hemi JavaScript Framemork Framework Explorer template.

Features

[ top ]

Download and Installation Instructions

Prerequisites

  1. Download the jsprof3.zip archive.
  2. Open the archive with your preferred utility (eg: 7-zip).
  3. Edit AddJavaScriptProfilerToRegistry in a text editor. Do not double-click or otherwise execute this file yet.
  4. Change the path in AddJavaScriptProfilerToRegistry.reg to the location where you exanded the archive. Be sure to use double \\ instead of single \. Save the edited file.
  5. Double-click or execute AddJavaScriptProfilerToRegistry.reg. This will add a single registry key that provides the name and location of the profiler. Note: Version 2 uses the same registry key as version 1. Executing this file will overwrite the existing key.
  6. Start up a new instance of Internet Explorer (open instances will be unaffected), right click on the screen, and make sure the new context menu entry "JavaScript Profiler" is present.
  7. If so, click the "JavaScript Profiler" label, and the profiler should open.
  8. On a page with some external script references, open the profiler and select the Profile tab to test that you can access the external scripts.

[ top ]

Usage

You can use the profiler for a variety of purposes: accessing script on a page, profiling all of the scripts, in all of the frames, for a give web page (yes, it walks frames for you), and editing functions for debug purposes (or just for fun).

Profiler

The JavaScript Profiler is run in Files-mode when the Profile tab is clicked. Window Model-mode is run when selected from the Files/Window Model list. Each profiler is only run once while the profiler window is open.

Files Profiler

A list of discovered script files and blocks is shown under Files. Click on a file or block, and a list of all the functions for that specific area will be displayed in Functions. Click on an individual function to display it in the Data text field.

When the Files Profiler is run, a list of potential object-model inspection points is collected. Select Window Model from the Files/Window Model list to run the Window Model Profiler against the collected data points.

Window Model Profiler

A list of windows/frames is displayed under Window Model. Click on a window to list all of the functions that were discovered embedded within the script files or blocks. Functions are discovered by finding global constructs and searching within to locate function pointers.

Profiler Function Utilities

If all of the white space has been removed, click Deobfuscate to expand the function. The function can be updated using the Update Function button.

Selected functions can be monitored with Function Monitor by clicking the Register button. If Function Monitor does not exist on the page (or targeted frame), it is injected to preserve metric collection for the duration of the page view.

Profiler UI Elements

Active Source

You can use the active source viewer to query the current DOM. Simply type in some script into the source window, or the text field below it, and hit enter or click the appropriate eval button (Eval for the text field, and Eval Source Window for the text area).

UI Elements:

Active Source includes a few helpful variables accessible when the checkbox is enabled.

Use the checkbox adjacent to the lower text field to execute script against the JavaScript Profiler window.

Function Monitor

JavaScript Profiler integrates with Function Monitor several ways.

Because JavaScript Profiler is modal, a Function Monitor is injected into the frame in which the function was discovered. The profiler may then be closed while interacing with the Web page, and then re-opened to easily collect the metrics.

[ top ]

Screenshots

Version 2

Version 1

[ top ]