How to debug Angular JavaScript Code
DebuggingGoogle ChromeFirefoxAngularjsBrowserDebugging Problem Overview
I am working on a proof of concept using Angular JavaScript.
How to debug the Angular JavaScript code in different browsers (Firefox and Chrome) ?
Debugging Solutions
Solution 1 - Debugging
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
Solution 2 - Debugging
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) &&
x.substring(0,1) !== '$' &&
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.
Solution 3 - Debugging
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
Solution 4 - Debugging
Despite the question is answered, it could be interesting to take a look at ng-inspector
Solution 5 - Debugging
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
Solution 6 - Debugging
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.
Solution 7 - Debugging
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.
Solution 8 - Debugging
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
Solution 9 - Debugging
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;
}
Solution 10 - Debugging
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
Solution 11 - Debugging
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
- 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
Solution 12 - Debugging
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!
Solution 13 - Debugging
Maybe you can use Angular Augury A Google Chrome Dev Tools extension for debugging Angular 2 and above applications.