Closure Inspector is an extension to Firebug, the Firefox debugger extension. Closure Inspector adds three powerful features to Firebug: source mapping, improved stack trace display, and unit test integration. This document describes how to install and use Closure Inspector.
Closure Inspector requires Firefox 3.x and the Firefox extension Firebug 1.4 or higher.
Follow these steps to install Closure Inspector:
If you don't already have Firebug, download and install it from http://getfirebug.com.
Download the Closure Inspector XPI. If your browser asks you what to do with the file, choose Download. Install Closure Inspector like any other Firefox extension: after the download completes, just drag it into a Firefox window.
That's it! To check that Closure Inspector is successfully installed, click on the Tools menu in Firefox and check that Closure Inspector appears in the Add-ons list and is enabled.
Because Closure Inspector extends Firebug, it depends on specific features and details of Firebug. New versions of Firebug could cause Closure Inspector to work incorrectly, so when Closure Inspector starts up, it checks the Firebug version number. If it finds a new, unknown version, it disables itself and displays a message explaining what's going on. When you install a new version of Firebug, check the Closure Inspector repository to see if there is a new version available.
Closure Compiler modifies your original JavaScript code and produces code that's smaller and more efficient than the original, but harder to read and debug. Closure Inspector helps by providing a source mapping feature, which identifies the line of original source code that corresponds to the compiled code. You can view the original source code in the editor of your choice by setting your $EDITOR environment variable.
Follow these steps to enable source mapping using Closure Inspector:
If you haven't already downloaded the Closure Compiler, see Getting Started with the Closure Compiler Application.
Compile your JavaScript code using the Closure Compiler and add the command line flag --create_source_map. For example, if your JavaScript file is called example.js, run this command from your closure-compiler directory to create a source map in the file example-map:
$ java -jar compiler.jar --js example.js --create_source_map ./example-map --js_output_file example-compiled.js
To debug your code in Firebug, open a web page in Firefox that includes example.js. Open a Firebug window and load the compiled JavaScript file example-compiled.js in the left-hand pane. Choose the Source Mapping tab in the right-hand pane and specify the location of the source map file example-map by entering a URL or by clicking Open Local File and navigating to the file.
After the source map file loads, you can find the original source for any code in the compiled source. To do this, right-click on any code in the compiled source and choose Show Original Source, as illustrated in the following screenshot:
If you've set the $EDITOR environment variable to the editor of your choice, the original file opens in that editor at the original source line that corresponds to the line you clicked. If you haven't set the $EDITOR variable, you'll see the original file name and line number displayed in a pop-up, like this:
Firebug includes a stack trace display that you can see by clicking Stack on the right side of the window.
Closure Inspector enhances the stack trace display by:
Below is an example of Closure Inspector's enhanced stack trace:
Closure Inspector supports integration with the Closure Testing Framework. To enable this feature, click the arrow in Firebug's Script menu and enable Handle JSUnit Failures. If an assertion fails in the Closure Testing Framework, Closure Inspector sets a breakpoint on the assertion and pauses execution.
Here is an example of an assertion breakpoint:
|
