8

I have attached a picture of the click action I want to run from the Chrome console, with various values passed. The button is highlighted in gray top right in the inspect element. It is the savePublish() function I want to learn how to access/use.

enter image description here

The button element is inside a <div ng-controller="ProductEditCtrl as ctrl" .. > container, but of course there are other controller wrappers on the page aliased as ctrl

My question is, how do I access the savePublish() method directly from the Chrome console? And a bonus question-answer would be, how would I load the ProductEditCtrl controller and then call the savePublish method on a different page?

Oliver Williams
  • 5,966
  • 7
  • 36
  • 78
  • 1
    Possible duplicate of [How do I access the $scope variable in browser's console using AngularJS?](http://stackoverflow.com/questions/13743058/how-do-i-access-the-scope-variable-in-browsers-console-using-angularjs) – Matej Marconak May 07 '17 at 15:09
  • Depending on your background and how you like to debug, you could also use the script debugging tool in the console to set break points in the code and inspect exactly what each variable is at each stage. Sometimes it's easier than console logging everything. – LouisK May 07 '17 at 15:19

2 Answers2

10

Try - angular.element($0).scope() to inspect the scope of the button or you can use Chrome extenstion like ng-inspector.

Itsik Mauyhas
  • 3,824
  • 14
  • 69
  • 114
2

You can find a controller via chrome console, via the elements class name by using angular.element. EG:

angular.element(document.querySelector(".btn.btn-primary")).controller()

Associated methods/functions will be returned, if they are available on that element.

Reena Verma
  • 1,617
  • 2
  • 20
  • 47