How to Debug AngularJS in Chrome
We will introduce how to debug AngularJS in Chrome.
Debug AngularJS in Chrome
Assuming that we are working with structures in AngularJS, we have gone over a circumstance where we have checkboxes in our AngularJS structure. You need to check assuming a client has chosen (or restricted) one of the checkboxes before presenting the form.
Here, we will tell you the ideal way to check if any checkbox is checked or unrestrained from your AngularJS $scope.
# AngularJS
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="angApp" ng-controller="angController">
<div>
<input type="text" ng-model="myname" id="myname" />
</div>
</div>
</body>
<script>
var angApp = angular.module('angApp', []);
angApp.controller('angController',
['$scope', function () {
} ]
);
</script>
</html>
Output:
At the entrance of the $scope of the component from the program’s control center, we will need to compose this code in the console window.
# AngularJS
angular.element($0).scope();
We can run the application, and in that browser, we will press F12 to that browser window. The first we can do is open and choose the Element tab and pick up the component we wish to debug.
We can see the only element we have in the above example. Hence we can click the input element, and in the window, we can write the below script and enter it.
# AngularJS
angular.element($0).scope();
By choosing the component in the Element tab, we put away the component’s data or its reference in $0. It’s a variable.
We need to remember that we have to select the element by clicking it before accessing the element $scope.
We will note that using the console IntelliSense to see the different techniques and properties that the program gives will help us dig more into the App.
the querySelector() Method in AngularJS
Yet, there is one more method for doing this instead of utilizing the $0 variable. We can utilized the document .querySelector() Method.
# AngularJS
document.querySelector("input"); angular.element(document.querySelector("input")).scope();
Assigned Value to AngularJS
Now, we will assign and modify the value inside the input box element from the console. For example, we wish to show the name in that box.
# AngularJS
angular.element($0).scope().name = 'Subhan';
Indeed, nothing occurred in that capacity; the input box is as yet empty.
All that will be done as shown by the name in the actual console. It shows that the value is red color in Chrome.
Yet, we need that value in the information box. We need to add the $apply() method to the $scope to reflect the actual change in the browser window.
# AngularJS
angular.element($0).scope().$apply();
We need to press Enter key to see the value box Subhanin the input box on our browser. We can also add other control in our App, such as a button to some validation to check the text or the value we entered in the input box.
Conclusion
As we discussed above is just a less amount of knowledge. We can do a lot more using the browser in the JS console, which will help test and examine our AngularJS App.
We can access the elements, properties, and data to access the $scope variable and assign values to the variable.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn