AngularJS Debugging Using ng-inspect chrome extension


Example

ng-inspect is a light weight Chrome extension for debugging AngularJS applications.

When a node is selected from the elements panel, the scope related info is displayed in the ng-inspect panel.

enter image description here

Exposes few global variables for quick access of scope/isolateScope.

$s      -- scope of the selected node
$is     -- isolateScope of the selected node
$el     -- jQuery element reference of the selected node (requiers jQuery)
$events -- events present on the selected node (requires jQuery)

enter image description here

Provides easy access to Services/Factories.

Use $get() to retrieve the instance of a service/factory by name.

enter image description here

Performance of the application can be monitored by counting the no.of scopes,isolateScopes, watchers and listeners on the application.

Use $count() to get the count of scopes, isolateScopes, watchers and listeners.

enter image description here

Note: This extension will work only when the debugInfo is enabled.

Download ng-inspect here