在 Chrome 中调试 AngularJS
我们将介绍如何在 Chrome 中调试 AngularJS。
在 Chrome 中调试 AngularJS
假设我们正在使用 AngularJS 中的结构，我们已经解决了在 AngularJS 结构中有复选框的情况。在提交表单之前，你需要检查假设客户已选择（或限制）其中一个复选框。
在这里，我们将告诉你检查是否有任何复选框被选中或不受 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>
输出：
在程序控制中心组件的 $scope 入口处，我们需要在控制台窗口中编写此代码。
# AngularJS
angular.element($0).scope();
我们可以运行应用程序，在那个浏览器中，我们将按 F12 到那个浏览器窗口。我们可以做的第一件事是打开并选择 Element 选项卡，然后选择我们要调试的组件。
我们可以看到上面示例中唯一的元素。因此，我们可以单击输入元素，然后在窗口中，我们可以编写以下脚本并输入它。
# AngularJS
angular.element($0).scope();
通过在 Element 选项卡中选择组件，我们将组件的数据或其引用放在 $0 中。这是一个变量。
我们需要记住，在访问元素 $scope 之前，我们必须通过单击它来选择元素。
我们会注意到，使用控制台 IntelliSense 来查看程序提供的不同技术和属性将有助于我们更深入地了解应用程序。
AngularJS 中的 querySelector() 方法
然而，还有另一种方法可以做到这一点，而不是使用 $0 变量。我们可以利用文档中的 .querySelector() 方法。
# AngularJS
document.querySelector("input"); angular.element(document.querySelector("input")).scope();
为 AngularJS 赋值
现在，我们将从控制台分配和修改输入框元素内的值。例如，我们希望在该框中显示名称。
# AngularJS
angular.element($0).scope().name = 'Subhan';
确实，以这种身份没有发生任何事情。输入框仍然是空的。
所有这些都将按照实际控制台中的名称所示完成。它表明该值在 Chrome 中为红色。
然而，我们需要信息框中的值。我们需要将 $apply() 方法添加到 $scope 以反映浏览器窗口中的实际更改。
# AngularJS
angular.element($0).scope().$apply();
我们需要按 Enter 键才能在浏览器的输入框中看到值框 Subhan。我们还可以在我们的 App 中添加其他控件，比如一个按钮来进行一些验证，以检查我们在输入框中输入的文本或值。
结论
正如我们上面所讨论的，只是知识量较少。我们可以使用 JS 控制台中的浏览器做更多事情，这将有助于测试和检查我们的 AngularJS 应用程序。
我们可以访问元素、属性和数据来访问 $scope 变量并将值分配给变量。
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