10 Quick Steps to Debug AngularJs in Console
If you are debugging a legacy AngularJS app, and want to be able to noodle around the DOM and debug all those scopes ($scope) without installing an old AngularJS Chrome extensions (like Ng-Inspect) – you can do it in the browser console.
Here is a condensed cheat sheet to get you started:
-
Make sure JQuery is being used and currently loaded.
- If you type
$()
into the browser console, without error, JQuery is there. - You can also run the following to see if the browser window has loaded JQuery.
window.hasOwnProperty("jQuery");
``
- If you type
-
If you can’t debug in the browser - enter
angular.reloadWithDebugInfo()
into the console. (Does not work on all versions) -
Open the inspect window
-
Click the element you want to inspect
-
Type
$($0)
to get the element (if jQuery is loaded).- If not using jQuery type (
angular.element($0)
)
- If not using jQuery type (
-
$($0).scope()
will get the scope of the element you clicked on. You can see its properties right away. -
Look at parent scopes up the hierarchy with
$($0).scope().$parent
or$($0).scope().$parent.$parent
-
Get the
$root
scope with$($0).scope().$root
-
If you highlight a directive with
Isolate scope
you can look at it with$($0).isolateScope()
-
If you highlight an element inside of a directive with
Isolate scope
with$($0).scope()
will show what is available to it.
Now you are all ready to inspect those $scopes!