JavaScript Profiler 2.0

Index

• Introduction
  • License
  • Foreward
  • Features
• Download and Installation Instructions
  • Prerequisites
• Usage
  • Profiler
  • Files Profiler
  • Window Model Profiler
  • Profiler Function Utilities
  • Profiler UI Elements
  • Active Source
  • Function Monitor
• Screenshots
  • Version 2
  • Version 1

Modification History

Introduction

License

It's Liberal, and the same as engine.license.txt.

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 Internet Explorer 6 or later on Windows.

Features

• Selectable script file and block list.
• Selectable function by file or block.
• Selectable function by object model detection.
• Basic deobfuscation for whitespace-compressed and obfuscated functions.
• Live function updates (does not affect the cache or original source).
• Active source window for querying the live DOM.
• Scope utility for mapping page layout.
• Auto-discovery of Function Monitor metrics.
• Auto-instrumentation with Function Monitor.

[ top ]

Download and Installation Instructions

Prerequisites

• Internet Explorer 6 or greater.
• Windows.
• MSXML3 or later. (you shouldn't have to install anything for this)

1. Download the JavaScriptProfiler.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

• Files - When Files is selected from the list; A list of discovered script blocks and files.
• Window Model - When Window Model is selected from the list; A list of windows/frames in which custom objects were inspected.
• Functions - A list of discovered JavaScript functions.
• Data - Displays statistics or function text.
• Files/Window Model List - Switches the profiler between Files and Window Model mode.
• Register / Unregister - Registers the selected function with Function Monitor.
• Metrics - Displays externally collected metrics as well as internal tool metrics.
• Stats - Displays information about the discovered scripts.
• Update Function - Changes the selected function defination to use the value of the Data field.
• Deobfuscate - Restores whitespace to a selected function. Usefull when whitespace has been removed.

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:

• Frames - Lists all discovered frames, and is used to switch the context of where script is executed.
• Root Source - Displays the HTML of the page.
• Element Source - Displays a modified view of the element nearest the mouse when the context menu was opened.
• Scour - Removes certain inline event objects from the window, document, and body.
• Scope - Renders a navigable box-model of the page.
• Metrics - If visible, is used to retrieve FunctionMonitor metrics from all discoverable windows.
• Textarea - Displays results, and optionally used to dynamically inject large scripts.
• Checkbox - When checked, script is evaluated against the JavaScript Profiler window. Allows access to helper global variables.
• Textbox - Enter script to be evaluated. Press Enter to execute, or click Eval.
• Eval - Executes script entered in the Textbox.
• Eval Source Window - Executes script entered in the Textarea.
• Exit - Closes the window.

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

• oSrcEl - The element nearest the mouse cursor when the context menu was opened.
• oSrcWindow - The window object belonging to the active window. Note: if no script is specified on the page, the oSrcWindow object is necessary to access the DOM.

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.

• If any Function Monitor exists in any accessible frame, the Metrics button will be visible in the Active Source tab. Clicking the Metrics button will return all collected metrics.
• Any profiled function may be easily monitored by navigating to the desired function in the Profile tab, and clicking the Register button.
• Monitored functions display a + beside their name, and the Unregister button is available in the Commands when the function is selected.

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

• Viewing the active source
• Making a change to the DOM
• Viewing the page scope
• Viewing profiled functions
• Navigating to a specific function, and registering it with Function Monitor
• Returning to the active source view to view collected metrics (profiler was closed, the page interacted with, and then the profiler was re-opened)
• Viewing modelled functions

Version 1

• Context Menu Entry
• Loaded Profiler
• Running the Profiler
• Making Some Changes

[ top ]