LoginSignup
34
33

More than 5 years have passed since last update.

[AngularJS][JavaScript] AngularJSアプリをブラウザのコンソールからデバッグする方法

Last updated at Posted at 2015-01-29

angularjsで定義したスコープの中身をちょっと覗いてみる方法です。

すでに同記事多数かもしれません。お目汚し失礼。


こんな感じでスコープを覗けます。

console
angular.element(document.querySelector('タグ名')).scope()

class="ng-scope"が付いているので、こんな風に.ng-scopeクラスで探すほうが簡単かもしれません。何番目のスコープを取得するのかは、添え字で指定します。

console
angular.element(document.querySelectorAll('.ng-scope')[0]).scope()

2015/2/4 追記

もっと素早いやりかたを教えていただきました。Thanks @miyabisun !

Chrome/Firefoxであれば、デベロッパーツールから選んだ要素が$0に格納されますので、angular.element の引数に $0 を渡せばよいです。

画面から選んで・・・・・・

インスペクタ

普通に引数に渡します。

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

コンソール

jQueryが入っていれば、もっと素早くいけるそうです。

console
$($0).scope()

controller-as記法であれば、scope()の「コントローラ名」プロパティを参照するとコントローラが入っています。

console
angular.element(document.querySelector('タグ名')).scope().コントーラ名

2015/7/16 追記
コンソールを使うのがだるくなったら、ブラウザ拡張をインストールすると楽ちんです。
記事書きました → AngularJSアプリ開発を楽にするブラウザ拡張「ng-inspector」

34
33
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
34
33