Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Chrome DevTools Snippet for Angular apps.
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!
*/
@duanemck

This comment has been minimized.

Copy link

duanemck commented Dec 11, 2013

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.

@mernen

This comment has been minimized.

Copy link

mernen commented Dec 11, 2013

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).

@mgol

This comment has been minimized.

Copy link
Owner Author

mgol commented Dec 11, 2013

@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.

@mgol

This comment has been minimized.

Copy link
Owner Author

mgol commented Dec 11, 2013

@duanemck Can you try now?

@pavelfeldman

This comment has been minimized.

Copy link

pavelfeldman commented Apr 10, 2014

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

@kitallis

This comment has been minimized.

Copy link

kitallis commented Apr 11, 2014

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

@mgol

This comment has been minimized.

Copy link
Owner Author

mgol commented Apr 25, 2014

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

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

@JackieWYB

This comment has been minimized.

Copy link

JackieWYB commented Jun 17, 2015

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

@mgol

This comment has been minimized.

Copy link
Owner Author

mgol commented Feb 10, 2016

__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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.