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
– Sebastian Zartner, Commented Apr 13, 2016 at 17:48
@SebastianZartner Thank you. But we can't debug the same expression via dev tools? — user6131488
– user6131488, Commented Apr 13, 2016 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 for example). — Sebastian Zartner
– Sebastian Zartner, Commented Apr 13, 2016 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
– Daniel Beck, Commented Apr 13, 2016 at 21:30

rbinsztock · Accepted Answer · 2018-11-19 11:49:40Z

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, 2018 at 11:49

answered Apr 13, 2016 at 18:26

rbinsztock

3,2552 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user6131488 Over a year ago

Thank you. But we can't debug the same expression via dev tools?

rbinsztock Over a year ago

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.

MouTio · Accepted Answer · 2016-04-13 17:42:17Z

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, 2016 at 17:42

MouTio

1,29924 silver badges48 bronze badges

2 Comments

user6131488 Over a year ago

Thank you. But we can't debug the same expression via dev tools?

MouTio Over a year ago

Yes, you can. With the console.log. For your example, you only have to put: console.log("current value=" + $scope.myUrl);

archer247 · Accepted Answer · 2016-04-13 19:00:16Z

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, 2016 at 19:00

answered Apr 13, 2016 at 17:29

archer247

361 silver badge6 bronze badges

2 Comments

user6131488 Over a year ago

Thank you. But we can't debug the same expression via dev tools?

archer247 Over a year ago

via dev tools you can console.log like var app= angular.module("myApp"); var appCtrl = function($scope,$rootScope,$window,$miscService) { $scope.myUrl = "google.com"; console.log($scope.myUrl); } then check it browser console

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related