Chrome DevTools Snippet for AngularJS apps.

chrome-angularjs.js

var ngAppElem = angular.element(document.querySelector('[ng-app]') || document);

window.$injector = ngAppElem.injector();
window.inject = $injector.invoke;
window.$rootScope = ngAppElem.scope();

// getService('auth') will create a variable `auth` assigned to the service `auth`.
var getService = serviceName =>
    inject([serviceName, s => window[serviceName] = s]);

Object.defineProperties(window, {
    $scope: {
        get() {
            var elem = angular.element($0);
            return elem.isolateScope() || elem.scope();
        },
    },
    $ctrl: {
        get() {
            return this.$scope.$ctrl;
        },
    },
});

/**
 * USAGE
 * 
 * First copy the script and paste it in Chrome DevTools in Sources -> left pane -> Snippets.
 * Then, after loading an Angular page, right click on the snippet and choose "run".
 * Afterwards, you have the following available in the console:
 * 
 * 1) $rootScope
 * 2) `inject(function ($q, $compile) { ...use $q and $compile here... })`;
 * 3) Click on an element in DevTools; now `$scope` in the console points at the element scope
 *    (isolate if one exists) and `$ctrl` points to `$scope.$ctrl`.
 * 4) getService('foo') creates a global `foo` variable pointing to the `'foo'` service.
 * 
 * Enjoy!
 */

This sounds very useful, but its not working for me.
I get "Uncaught TypeError: Cannot read property 'invoke' of undefined" when I run the snippet, seems that 'angular.element(document).injector();' returns undefined.

Asking for the injector on document seems odd, unless you're explicitly bootstrapping with angular.bootstrap(document) (rather than, say, ng-app).

@duanemck try using angular.element(document.body), or some other element where you know your Angular environment is running (doesn't have to be the root element).

@mernen You're right, I am bootstrapping on document.documentElement. I'll try to improve it.

EDIT: IMO it doesn't require manual bootstrapping, though, it seems it works as well for apps having ng-app on the html element.

@duanemck Can you try now?

You probably want window.__commandLineAPI instead of console._commandLineAPI as per https://codereview.chromium.org/189723004

Just so that people don't miss it. It's now window.__commandLineAPI with two underscores.

@repenaxa Corrected, thanks! I thought the feature just went away.

I don't know why I didn't get an email about your comment... :/

angular.element(document.querySelector('[ng-app]') || document);
this is very useful, thanks.

__commandLineAPI seems to be gone from Chrome 50 (currently in Canary). Unless I can find a replacement API for that it will no longer be possible to run it as a snippet in DevTools, you'll have to copy it & paste into the console. :/

EDIT: a replacement is just to use bare $0, it now works even in scripts defined outside of the console but run from the console.