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.


  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!