Skip to content
AngularJS WebInspector Extension for Chrome
Branch: master
Clone or download
Pull request Compare This branch is 12 commits ahead, 192 commits behind angular:master.
Kevin Kirsche
Latest commit a7b9392 Oct 16, 2014
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Fix link colors in labels. Oct 16, 2014
fonts Add fontawesome to extension Oct 15, 2014
img update the README Nov 14, 2012
js Fix link colors in labels. Oct 16, 2014
panes Fix link colors in labels. Oct 16, 2014
test refactored panes, renamed TreeCtrl to ModelCtrl Aug 2, 2012
tests major overhaul Mar 27, 2013
.gitignore chore(misc): add batarang release zip files to gitignore May 9, 2013
CHANGELOG.md
FAQ.md add note about named watch functions to FAQ Jan 1, 2013
Gruntfile.js feat(build): use Grunt for building Batarang Apr 7, 2013
LICENSE added license Jul 19, 2012
README.md Updated README for clarification Oct 15, 2014
background.html initial revision Jul 2, 2012
devtoolsBackground.html renamed devtools page and js Jul 25, 2012
karma.conf feat(test): switch from testacular to karma Apr 7, 2013
karma.e2e.conf feat(test): switch from testacular to karma Apr 7, 2013
manifest.json Update manifest to reflect new name / version Oct 15, 2014
package.json chore(dep): update grunt-conventional-changelog Jun 27, 2013
panel.html Namespace font awesome Oct 16, 2014

README.md

AngularJS Inspector

Based on AngularJS Batarang

Installing from Source

  1. Clone the repository: git clone git@github.com:kkirsche/angularjs-batarang.git
  2. Navigate to chrome://chrome/extensions/ and enable Developer Mode.
  3. Choose "Load unpacked extension"
  4. Open the directory you just cloned (should open with Chrome, otherwise try dragging/dropping the file into Chrome) and follow the prompts to install.

Screencast

Check out this screencast that walks you through the Batarang's features.

Using the Batarang

First, navigate Chrome Canary to the AngularJS application that you want to debug. Open the Developer Tools. There should be an AngularJS icon. Click on it to open the AngularJS Batarang.

In order to begin using the Batarang you need to click the "enable" checkbox. This will cause the application's tab to refresh, and the Batarang to begin collecting perfomance and debug information about the inspected app.

The Batarang has five tabs: Model, Performance, Dependencies, Options, and Help.

Models

Batarang screenshot

Starting at the top of this tab, there is the root selection. If the application has only one ng-app declaration (as most applications do) then you will not see the option to change roots.

Below that is a tree showing how scopes are nested, and which models are attached to them. Clicking on a scope name will take you to the Elements tab, and show you the DOM element associated with that scope. Models and methods attached to each scope are listed with bullet points on the tree. Just the name of methods attached to a scope are shown. Models with a simple value and complex objects are shown as JSON. You can edit either, and the changes will be reflected in the application being debugged.

Performance

Batarang performance tab screenshot

The performance tab must be enabled separately because it causes code to be injected into AngularJS to track and report performance metrics. There is also an option to output performance metrics to the console.

Below that is a tree of watched expressions, showing which expressions are attached to which scopes. Much like the model tree, you can collapse sections by clicking on "toggle" and you can inspect the element that a scope is attached to by clicking on the scope name.

Underneath that is a graph showing the relative performance of all of the application's expressions. This graph will update as you interact with the application.

Dependencies

Batarang dependencies tab screenshot

The dependencies tab shows a visualization of the application's dependencies. When you hover over a service name, services that depend on the hovered service turn green, and those the hovered service depend on turn red.

Options

Batarang options tab screenshot

Last, there is the options tab. The options tab has three checkboxes: one for "show applications," "show scopes," and "show bindings." Each of these options, when enabled, highlights the respective feature of the application being debugged; scopes will have a red outline, and bindings will have a blue outline, and applications a green outline.

Elements

Batarang console screenshot

The Batarang also hooks into some of the existing features of the Chrome developer tools. For AngularJS applications, there is now a properties pane on in the Elements tab. Much like the model tree in the AngularJS tab, you can use this to inspect the models attached to a given element's scope.

Console

Batarang console screenshot

The Batarang exposes some convenient features to the Chrome developer tools console. To access the scope of an element selected in the Elements tab of the developer tools, in console, you can type $scope. If you change value of some model on $scope and want to have this change reflected in the running application, you need to call $scope.$apply() after making the change.

You can’t perform that action at this time.