How to debug AngularJS in Firefox?

[Federico Piazza]

Hi guys, I'm new to angular and need help to debug it.

Unfortunately, I can't use chrome because of customer's requirement only IE and FF, I even can't install chrome in order to check my app.

My needs are how I can do to debug angular javascript code inside of controllers and by the way how to check $scopes variable values.

Can anybody give me a hint on this?

Thanks.

Regards,
Federico

[Michael Bielski]

1) Install Firebug.

2) Install the Web Developer Toolbar by Chris Pederick

Look on the Script tag, find your controller in the scripts that the page loads. Find your $scope values. Set watches on them. Set break points. Re-load your page. Step through the code. Watch the values change (or not.)

[Federico Piazza]

Hi Michael, how are you? Thanks for your reply.

I don't know if I am doing something wrong but have already tried that without success. Firebug doesn't watch to my variables if I try to access them in the way of:

$scope.currTemplate

angular.element[0].$scope

a some more variation

By the way, I found my code in angular controllers put a breakpoint but debugger don't stop in it.

Could you give me more details or send me a screenshot?

Thanks again.

Regards,
Federico

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/Zv9RBRBzH_Y/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[Michael Bielski]

I don't have any problems setting watches or break points in my code using the tools I mentioned.

Here is a short tutorial on how to use Firebug: http://clgoldenwebdesign.com/meetups/firebug/ It isn't complete, but it does say where the source info comes from (NetTuts Premium). There are plenty of other tutorials out there. To be able to help you further I'd need to see the code in a plunkr or fiddle.

[Matthieu Larcher]

I've been having trouble with debuggers and error throwing in Firefox lately.
I'm not sure of what is responsible for this, but it could happen that you do everything as you should and it still doesn't work as expected.
Try to do the same thing in Chrome to make sure you understand how it should behave.

[Michael Bielski]

On Tuesday, September 10, 2013 12:12:59 AM UTC-7, Matthieu Larcher wrote:

Try to do the same thing in Chrome to make sure you understand how it should behave.

This is a good point. The differences between Firebug in Chrome and Firefox are negligible, and there are other tools in Chrome that may help you to see what is/isn't happening in Firefox. 

[Victor Bjelkholm]

What's stopping you from doing "<pre>{{ $scope.message | json }}</pre>" to print out the variables you want in the DOM?

[Federico Piazza]

For god, I could debug with firebug! Don't know why execution didn't stop at my breakpoints but it's working now.

Thanks a lot for the tip!

--

[kosprov]

As far as viewing $scopes is concerned, you can use AngScope, a small Firefox/Firebug extension that displays $scope objects of selected DOM elements into Firebug's DOM Inspector.

It basically is a wrapper over this code:

var s = angular.element(e).scope();

it just helps you visually select "e" and view "s".

[Federico Piazza]

Great, thanks for this it is very useful

--

[dfsq]

And finally you can always expose $scope as global variable to check/modify properties in console. Simply

window._scope = $scope;

// in console:
_scope.users.push({name: 'Thomas Mann'});
_scope.$apply();

On Monday, September 9, 2013 9:33:19 PM UTC+3, Federico Piazza wrote: