Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
33
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

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

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」

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
33
Help us understand the problem. What are the problem?