How to quickly inspect an Angular scope in your webkit browser

Updated . Posted . Visible to the public.

Current webkit browsers like Chrome and Safari have a special variable in their consoles that refers to the selected DOM node in the elements panel. This lets us easily inspect Angular scopes.

  1. Right click in the page and click "Inspect" to open the Dev Tools

  2. Select the element you're interested in from the elements panel

  3. Focus the console (in Chrome, hit ESC)

  4. Get the scope object and store it

    s=$($0).scope()
    
    // That is:
    element = $0 // Store element
    $element = $(element) // Wrap with jQuery
    scope = $element.scope() // Get and store the scope
    
Dominik Schöler
Last edit
Besprechungs-PC
License
Source code in this card is licensed under the MIT License.
Posted by Dominik Schöler to makandra dev (2016-04-07 16:09)