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:

1. 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");
   

   ``

2. If you can’t debug in the browser - enter angular.reloadWithDebugInfo() into the console. (Does not work on all versions)

3. Open the inspect window

4. Click the element you want to inspect

5. Type $($0) to get the element (if jQuery is loaded).

   • If not using jQuery type (angular.element($0))

6. $($0).scope() will get the scope of the element you clicked on. You can see its properties right away.

7. Look at parent scopes up the hierarchy with $($0).scope().$parent or $($0).scope().$parent.$parent

8. Get the $root scope with $($0).scope().$root

9. If you highlight a directive with Isolate scope you can look at it with $($0).isolateScope()

10. 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!