Sunday, July 6, 2014

Video: Quick Tip for Debugging AngularJS Applications

Many online demos show small AngularJS apps that are easy to troubleshoot because you can practically memorize the code when the examples are so small. In the real world you may face complex applications that contain literally dozens of controllers, services, and other components. Tracing a problem to the appropriate source code can become more challenging. In this video I'll show you how to quickly determine where the source code bound to a function in the UI is so you can set a breakpoint to step into the code directly. This has saved me a lot of time in my own troubleshooting adventures. I recommend setting the video to high quality and going full screen for best viewing.

Jeremy Likness

2 comments:

  1. Cool tip, thanks for sharing. One thing though. Chrome doesn't provide the native ability to access $scope from the console. In order to get the desired result you need the "AngularJS Batarang" extension installed. At least that was my experience.

    ReplyDelete
  2. Correct, that's why I mentioned (but I realize it's not as clear) the alternate approach: highlight the element (either right-click and inspect element or use the inspector tool) then do: angular.element($0).scope().

    ReplyDelete