8

I'm a newbie in the Angular space. I've been having trouble debugging my code. Any methods proven more effective in debugging Angular?

Improve this question
3
  • I usually use FireFox (FIreBug) because I can inspect the Angular scope. For all other js testing, I use Chrome DevTools Commented May 22, 2015 at 17:49
  • having what trouble? Question is pretty vague Commented May 22, 2015 at 18:08
  • Write unit and integration tests Commented May 22, 2015 at 18:34

4 Answers 4

Reset to default
7

open the developer console in the chrome browser, this allows you to:

  • set breakpoints and see whats going on in your code
  • use the console in the developer tools while you are waiting in breakpoints to execute some code or check the contents of variables
  • use the "select element" tool to select any HTML element, then in the console type "$scope" to see what's on the $scope of this element.

general tipps:

  • use some console.log statment like "running ControllerXYZ now" so you see, when your controllers are executed or when you are transitioning between states.
  • When using ui-router I find it extremly important to add a console.log statement into $stateChangeStart, $stateChangeSuccess and $stateChangeError event handlers, that shows you when you transition between states or when errors happen on state transitions, without that I am blind...
  • adding some {{anImportantVariable | json}} into html often is enough to debug stuff.

and the most important: if everything looks ok, and it still does not work, the problem is in 99%:

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

1 Comment

These tips are really helpful. Thanks!
5

When it comes to inspecting the state: even though I always (irony) write unit tests for each and every conditional in my code (so I normally don't need to debug stuff) this is so far my favourite technique:

<pre ng-show='mymodel.debugPlz'>{{ mymodel.something | json }}</pre>

Simple example : fiddle

Improve this answer

Comments

3

Chrome DevTools usually get the job done pretty well. You can insert a debugger; statement anywhere in the code and if Chrome DevTools are open, the code will stop there and you can further add breakpoint and traverse lines one by one. Other than that, there are a few extensions you can use by just searching for Angular in the Chrome Webstore. These usually help with inspecting $scope

Improve this answer

2 Comments

Specifically I'd recommend checking out Batarang because its supported by Angular.js core youtube.com/watch?v=q-7mhcHXSfM
Batarng was great for a while, then they updated it and many features were broken. Also, it is all but useless for debugging any jsFiddle or Plunker code.
0

what about using AngularJS Batarang chrome extention

it gives you a nice overview of the current scope within the selected element

as you see in the screenshot there is a new scope tab

enter image description here

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.