How to debug Angular JavaScript Code

Question

I am working on a proof of concept using Angular JavaScript   How to debug the Angular JavaScript code in different browsers  Firefox and Chrome

User · Answer

You can add  debugger  in your code and reload the app  which puts the breakpoint there and you can  step over    or run   var service     user id  null  getCurrentUser  function       debugger     Set the debugger inside                 this function   return service user id

User · Answer

there is also  log that you can use  it makes use of your console in a way that you want it to work   showing the error warning info the way your console shows you normally   use this   Document

User · Answer

Add call to debugger where you intend to use it   someFunction      debugger      In the console tab of your browser s web developer tools  issue angular reloadWithDebugInfo     Visit or reload the page you intend to debug and see the debugger appear in your browser

User · Answer

IMHO  the most frustrating experience comes from getting   setting a value of a specific scope related to an visual element  I did a lot of breakpoints not only in my own code  but also in angular js itself  but sometimes it is simply not the most effective way  Although the methods below are very powerful  they are definitely considered to be bad practice if you actually use in production code  so use them wisely   Get a reference in console from a visual element  In many non-IE browsers  you can select an element by right clicking an element and clicking  Inspect Element   Alternatively you can also click on any element in Elements tab in Chrome  for example  The latest selected element will be stored in variable  0 in console    Get a scope linked to an element  Depending on whether there exists a directive that creates an isolate scope  you can retrieve the scope by angular element  0  scope   or angular element  0  isolateScope    use    0  scope   if   is enabled   This is exactly what you get when you are using the latest version of Batarang  If you are changing the value directly  remember to use scope  digest   to reflect the changes on UI    eval is evil  Not necessarily for debugging  scope  eval expression  is very handy when you want to quickly check whether an expression has the expected value   The missing prototype members of scope  The difference between scope bla and scope  eval  bla   is the former does not consider the prototypically inherited values  Use the snippet below to get the whole picture  you cannot directly change the value  but you can use  eval anyway    scopeCopy   function  scope        var a            for  x in scope            if  scope hasOwnProperty x   amp  amp               x substring 0 1           amp  amp               x      this                 a x    angular copy scope x                       return a     scopeEval   function  scope        if  scope  parent     null            return hoho scope        else           return angular extend     haha scope  parent   hoho scope              Use it with scopeEval    0  scope      Where is my controller   Sometimes you may want to monitor the values in ngModel when you are writing a directive  Use    0  controller  ngModel   and you will get to check the  formatters   parsers   modelValue   viewValue  render and everything

User · Answer

Try ng-inspector   Download the add-on for Firefox from the website http   ng-inspector org    It is not available on the Firefox add on menu   http   ng-inspector org  - website  http   ng-inspector org ng-inspector xpi - Firefox Add-on

User · Answer

For Visual Studio Code  Not Visual Studio  do  Ctrl Shift P  Type Debugger for Chrome in the search bar  install it and enable it   In your launch json file add this config            version    0 1 0        configurations                            name    Launch localhost with sourcemaps                type    chrome                request    launch                url    http   localhost mypage html                webRoot      workspaceRoot  app files                sourceMaps   true                                   name    Launch index html  without sourcemaps                 type    chrome                request    launch                file      workspaceRoot  index html                       You must launch Chrome with remote debugging enabled in order for the extension to attach to it    Windows   Right click the Chrome shortcut  and select properties In the  target  field  append --remote-debugging-port 9222 Or in a command prompt  execute  chrome exe --remote-debugging-port 9222   OS X   In a terminal  execute  Applications Google  Chrome app Contents MacOS Google  Chrome --remote-debugging-port 9222   Linux   In a terminal  launch google-chrome --remote-debugging-port 9222  Find More

User · Answer

You can debug using browsers built in developer tools    open developer tools in browser and go to source tab  open the file do you want to debug using Ctrl P and search file name add break point on a line ny clicking on left side of the code  refresh the page    There are lot of plugin available for debugging you can refer for using chrome plugin Debug Angular Application using  Debugger for chrome  plugin

User · Answer

Since the add-ons don t work anymore  the most helpful set of tools I ve found is using Visual Studio IE because you can set breakpoints in your JS and inspect your data that way  Of course Chrome and Firefox have much better dev tools in general  Also  good ol  console log   has been super helpful

User · Answer

var rootEle   document querySelector  html    var ele   angular element rootEle      scope   We can fetch the  scope from the element  or its parent  by using the scope   method on the element   var scope   ele scope      injector    var injector   ele injector      With this injector  we can then then instantiate any Angular object inside of our app  such as services  other controllers  or any other object

User · Answer

Despite the question is answered  it could be interesting to take a look at ng-inspector

User · Answer

Unfortunately most of add-ons and browser extensions are just showing the values to you but they don t let you to edit scope variables or run angular functions  If you wanna change the  scope variables in browser console  in all browsers  then you can use jquery  If you load jQuery before AngularJS  angular element can be passed a jQuery selector  So you could inspect the scope of a controller with  angular element   ng-controller  name of your controller     scope     Example   You need to change value of  scope variable and see the result in the browser then just type in the browser console   angular element   ng-controller  mycontroller     scope   var1    New Value   angular element   ng-controller  mycontroller     scope    apply      You can see the changes in your browser immediately  The reason we used  apply   is  any scope variable updated from outside angular context won t update it binding  You need to run digest cycle after updating values of scope using scope  apply      For observing a  scope variable value  you just need to call that variable   Example  You wanna see the value of  scope var1 in the web console in Chrome or Firefox just type   angular element   ng-controller  mycontroller     scope   var1    The result will be shown in the console immediately

User · Answer

1  Chrome For debugging AngularJS in Chrome you can use AngularJS Batarang   From recent reviews on the plugin it seems like AngularJS Batarang is no longer being maintained  Tested in various versions of Chrome and it does not work   Here is the the link for a description and demo  Introduction of Angular JS Batarang Download Chrome plugin from here  Chrome plugin for debugging AngularJS You can also use ng-inspect for debugging angular  2  Firefox For Firefox with the help of Firebug you can debug the code  Also use this Firefox Add-Ons  AngScope  Add-ons for Firefox  Not official extension by AngularJS Team  3  Debugging AngularJS Check the Link  Debugging AngularJS

User · Answer

Maybe you can use Angular Augury A Google Chrome Dev Tools extension for debugging Angular 2 and above applications

[debugging] How to debug Angular JavaScript Code

Examples related to debugging

Examples related to google-chrome

Examples related to firefox

Examples related to angularjs

Examples related to browser