Chrome で AngularJS をデバッグする
Chrome で AngularJS をデバッグする方法を紹介します。
Chrome で AngularJS をデバッグする
AngularJS で構造を操作していると仮定して、AngularJS 構造にチェックボックスがある状況を乗り越えました。フォームを表示する前に、クライアントがチェックボックスの 1つを選択（または制限）したと想定してチェックする必要があります。
ここでは、チェックボックスがオンになっているか、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を押してそのブラウザウィンドウに移動します。最初にできることは、開いて[要素]タブを選択し、デバッグするコンポーネントを選択することです。
上記の例で私たちが持っている唯一の要素を見ることができます。したがって、入力要素をクリックすると、ウィンドウに次のスクリプトを記述して入力できます。
# AngularJS
angular.element($0).scope();
[要素]タブでコンポーネントを選択することにより、コンポーネントのデータまたはその参照を $0 に配置します。それは変数です。
要素 $scope にアクセスする前に、要素をクリックして選択する必要があることを覚えておく必要があります。
コンソール IntelliSense を使用して、プログラムが提供するさまざまな手法とプロパティを確認すると、アプリをさらに深く掘り下げるのに役立つことに注意してください。
AngularJS の querySelector() メソッド
しかし、$0 変数を利用する代わりに、これを行うためのもう 1つの方法があります。ドキュメント .querySelector() メソッドを利用できます。
# AngularJS
document.querySelector("input"); angular.element(document.querySelector("input")).scope();
AngularJS に割り当てられた値
次に、コンソールから入力ボックス要素内の値を割り当てて変更します。たとえば、そのボックスに名前を表示したいとします。
# AngularJS
angular.element($0).scope().name = 'Subhan';
実際、その能力では何も起こりませんでした。入力ボックスはまだ空です。
これらはすべて、実際のコンソールに名前で示されているように実行されます。Chrome では値が赤色であることを示しています。
それでも、情報ボックスにその値が必要です。ブラウザウィンドウの実際の変更を反映するために、$scope に $apply() メソッドを追加する必要があります。
# AngularJS
angular.element($0).scope().$apply();
ブラウザの入力ボックスに値ボックス Subhan を表示するには、Enterキーを押す必要があります。また、入力ボックスに入力したテキストや値を確認するための検証ボタンなど、アプリに他のコントロールを追加することもできます。
まとめ
上で説明したように、知識の量はわずかです。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