在 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