AngularJSで便利なChromeデバッグTips

AngularJSでAPLを作る際に、Chrome開発者ツールのコンソールで使える小技のお話.

Chromeの開発者ツールでは、のElementペインで最後に選択した要素は、コンソールから、$(0〜4の番号) で参照できる.
例えば、直前に選択したDOM要素は、$0 だ。

AngularJSのオブジェクトはangular.elementから辿ることが出来るので、直前に開発者ツールのElementペインで選択していた要素に紐づくScopeを取得するには、下記をコンソールで実行すればよい.

$0のscopeを取得

angular.element($0).scope()

$apply を使えば、コンソールからの値書き換えも出来る.

scopeの値を変更&画面へ反映

(s=angular.element($0).scope()).$apply(function(){s.foo='new Value!';});

DOMからは、$injector にもアクセス出来るので、任意のサービスをコンソールから呼び出すことも出来る.

任意のServiceを取得

angular.element($0).injector().get('サービス名')

また, jQueryも併せて利用している場合, 上記のscope取得等は、下記まで短縮して書くことが可能.

$($0).scope()

参考