Skip to content

Instantly share code, notes, and snippets.

@mgol
Last active July 8, 2025 14:11
Show Gist options
  • Save mgol/7893061 to your computer and use it in GitHub Desktop.
Save mgol/7893061 to your computer and use it in GitHub Desktop.
Chrome DevTools Snippet for AngularJS 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(['$q', '$compile', 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!
*/
@mgol
Copy link
Author

mgol commented Jul 8, 2025

@vanowm could you be a bit more specific? I've just tested the snippet and it still works on latest stable AngularJS. I've updated one code snippet to use afterwards so that it works with AngularJS strict mode but other than that, I don't see issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment