How do I debug AngularJS binding {{expression}} without any browser add-on?

Question

How do I debug an AngularJS binding like {{expression}} without any browser addon? I can't use any browser dev tools add-on except Firebug. So, I want to check if the binding expression really has some value from my controller. How do I check this?

(function() {
    var app= angular.module("myApp");
     var appCtrl = function($scope,$rootScope,$window,$miscService)
       {
          $scope.myUrl = "http://www.google.com";
            }

In the template

<a href="{{myUrl}}" target="_blank">Google</a>

my question is, is it possible to debug my AngularJS expression's value within the HTML?

Why can't you use other dev tools? Note that every browser has integrated dev tools. — Sebastian Zartner, Apr 13 '16 at 17:48
@SebastianZartner Thank you. But we can't debug the same expression via dev tools? — user6131488, Apr 13 '16 at 18:49
I just meant that you are already excluding add-ons and dev tools within your question, while there might be some that help you debugging AngularJS (like [FireAngular](https://github.com/firebug/fireangular) for example). — Sebastian Zartner, Apr 13 '16 at 21:27
In this particular case you would be able to just look at the html in dev tools to see the parsed {{myUrl}}. More generally you can use e.g.`angular.element(document.getElementById('yourElementId')).scope()` to access given element's scope — Daniel Beck, Apr 13 '16 at 21:30

rbinsztock · Accepted Answer · 2018-11-19T11:49:40.247

3

You can print your value in the page with

<pre>{{value | json}}</pre>

"json" here is used as Filter and inside AngularJS.

You can read this : https://stackoverflow.com/a/27424876/861206

You can also add a breaking point inside your source code, so next time the value will be evaluated your code will stop and you can see the value associated directly inside the dev tools.

For this open dev tools : Go into "Source" tab. Use Ctrl + O or Cmd + O to choose the file you want to debug, click on the left side of the line where you want your code to stop. So in the next execution the code will stop and you can mouse hover it to see the value associated to it.

edited Nov 19 '18 at 11:49

answered Apr 13 '16 at 18:26

rbinsztock

3,025
2
21
34

Thank you. But we can't debug the same expression via dev tools? – user6131488 Apr 13 '16 at 18:49
http://plnkr.co/edit/RFufnxbdeWmG7Tr5ZGnA?p=preview, You can console.log your value or use $log from Angular to print your value inside your console dev tool. – rbinsztock Apr 13 '16 at 18:51

score 1 · Answer 2 · answered Apr 13 '16 at 17:42

1

Yes, you can do it with {{ yourVar }}

If you put your variable inside curly braces, the value of the variable will appear.

value of href = {{myUrl}}

You have a DEMO here = JSFIDDLE

answered Apr 13 '16 at 17:42

MouTio

1,249
23
45

Thank you. But we can't debug the same expression via dev tools? – user6131488 Apr 13 '16 at 18:49
Yes, you can. With the console.log. For your example, you only have to put: `console.log("current value=" + $scope.myUrl);` – MouTio Apr 14 '16 at 05:03

archer247 · Answer 3 · 2016-04-13T19:00:16.067

0

just print in html <pre>{{myurl}}</pre>, or try to inspect the code and add breakpoints to the source archive, so the local debuggers stops in the code

i eddited the fiddle it now works, the angular embed was not correct because it has to load using https

edited Apr 13 '16 at 19:00

answered Apr 13 '16 at 17:29

archer247

36
1
6

Thank you. But we can't debug the same expression via dev tools? – user6131488 Apr 13 '16 at 18:49
via dev tools you can console.log like var app= angular.module("myApp"); var appCtrl = function($scope,$rootScope,$window,$miscService) { $scope.myUrl = "http://www.google.com"; console.log($scope.myUrl); } then check it browser console – archer247 Apr 13 '16 at 19:09

How do I debug AngularJS binding {{expression}} without any browser add-on?

3 Answers3