AngularJS
デバッグ

マークアップでの基本的なデバッグ

スコープのテストとモデルの出力

<div ng-app="demoApp" ng-controller="mainController as ctrl">
    {{$id}}
    <ul>
        <li ng-repeat="item in ctrl.items">
            {{$id}}<br/>
            {{item.text}}
        </li>
    </ul>
    {{$id}}
    <pre>
       {{ctrl.items | json : 2}}
    </pre>
</div>


angular.module('demoApp', [])
.controller('mainController', MainController);

function MainController() {
    var vm = this;
    vm.items = [{
        id: 0,
        text: 'first'
    },
    {
        id: 1,
        text: 'second'
    },
    {
        id: 2,
        text: 'third'
    }];
}

スコープの問題を修正する新しいスコープがあるかどうかを確認するのに役立つことがあります。 $scope.$idは、新しい$スコープがあるかどうかを確認するために、マークアップのどこでも式で使用できます。

この例では、ulタグの外側が同じスコープ（$ id = 2）であり、 ng-repeat内側に各繰り返しの新しい子スコープがあることがわかります。

プリタグのモデルの出力は、モデルの現在のデータを表示するのに便利です。 jsonフィルターは見た目の良いフォーマットされた出力を作成します。そのタグの中に改行文字\nが正しく表示されるので、pre-tagが使用されます。

デモ

ng-inspect chrome extensionを使用する

ng-inspectは、AngularJSアプリケーションをデバッグするための軽量Chrome拡張モジュールです。

エレメントパネルからノードを選択すると、スコープ関連情報がng-inspectパネルに表示されます。

scope/isolateScopeすばやくアクセスするためのグローバル変数はほとんどありませscope/isolateScope 。

$s      -- scope of the selected node
$is     -- isolateScope of the selected node
$el     -- jQuery element reference of the selected node (requiers jQuery)
$events -- events present on the selected node (requires jQuery)

サービス/工場に簡単にアクセスできます。

$get()を使用して、サービス/ファクトリのインスタンスを名前で取得します。

スコープ、アイソレートスコープ、ウォッチャー、およびリスナーの数をアプリケーションでカウントすることによって、アプリケーションのパフォーマンスを監視できます。

スコープ、isolateScopes、ウォッチャー、およびリスナーの数を取得するには、 $count()を使用します。

注：この拡張機能は、debugInfoが有効な場合にのみ機能します。

ng-inspectをここからダウンロードする

要素の範囲を取得する

角度のあるアプリではすべてがスコープの周りにあります。エレメントのスコープを取得できれば、角度アプリをデバッグするのは簡単です。要素の範囲にアクセスする方法：

angular.element(myDomElement).scope();
e.g.
angular.element(document.getElementById('yourElementId')).scope()  //accessing by ID

コントローラの範囲を取得する： -

 angular.element('[ng-controller=ctrl]').scope()

コンソールからDOM要素にアクセスするもう1つの簡単な方法は、 '要素'タブでクリックすることです（自動的に$ 0として保存されます）。

angular.element($0).scope();