More Related Content
Similar to Chromeでjavascriptデバッグ!まず半歩♪
Similar to Chromeでjavascriptデバッグ!まず半歩♪ (20)
More from Yuji Nojima (7)
Chromeでjavascriptデバッグ!まず半歩♪
- 2. 自己紹介
ノジマ ユウジ @yuka2py
●
株式会社フォーエンキー 代表
●
Android/iPhoneアプリ開発。
Webシステム開発、デザインや印刷全般など。
Web関係は...ここ最近はスマホ系三昧♪
●
好きな言語:Python (*´Д`*)、Javascript
しかし一番書いているのは PHP...
●
グラフィックデザインもやります。
●
趣味:オサレ♪(若干かわいい系 (`・ω・´)キリ
●
弱点:お嫁ちゃん
- 4. Alert()デバッグとは?
●
Alertで任意の変数の値を表示させ、
プログラムの問題点を確認する手法
(PHPならvar_dumpやecho)
●
問題点
●
Alertした所でプログラムが中断する
●
変数を確認するためのコードを書く必要がある
●
中断しても、確認できる範囲が限定的
●
ソースコードに直接書くので、解除や再設定が面倒
●
ループで使っちゃうと半泣き
- 5. 本日のお品書き
●
デベロッパーコンソールでのエラーの見かた
●
コンソールへのログ出力
●
ブレークポイントを使ってみる
●
変数の状態が確認できる
●
コールスタックが確認できる
●
おまけ
ちょっぴり紹介程度です。 (。-д-。)ゞヘヘ…
- 9. エラー個所へジャンプ
●
エラー詳細情報の中に、リンクがある。
このリンクからエラー個所へジャンプできる
クリック
- 10. ジャンプした先でコードを確認・修正
該当箇所の
コードが表示
される。
エラーとおぼしき場所に、 ここでは、
マーク等も出たりする
無名関数を
閉じるブレス
が抜けてた。
- 12. ログ出力は止まらない
●
変数の値を確認したい時、
Alertで変数値を確認する方法では、
処理が中断して困ることがある。
●
例えば、MouseMove で何か処理していて、
その逐次変化する値を確認したい時など
●
そこで...
console.log(value);
- 13. console.log() を使うと...
●
プログラム中の好きな場所で、
コンソールにログを出力させることができる
●
alert と違って実行が止まらない
●
連続的な値の変化を見たい時など便利
●
例えば↓のような感じで使う
jQuery('body').mousemove(function(e) {
console.log(e.pageX, e.pageY);
});
- 15. ブレークポイントとは?
●
プログラム中の好きな場所で、
プログラムの実行を一時停止できます
●
ブレーク中には...
●
スコープ変数の状態を確認できる
●
コールスタック(呼び出し階層)を確認できる
●
再開、ステップオーバー・イン・アウト
⇒これらを用いて、プログラムの論理エラーを
調査するのに非常に強力に活用できる
- 17. ブレークしてみる
●
ブレークポイントを通過するように実行すると
ブレークポイントでプログラムは自動停止
BPで止まる
- 19. 変数の状態が確認できる
ローカル変数
クロージャ変数
変数の値はもちろん、
オブジェクトなら
その中身も見れる
グローバル変数
- 21. コールスタックとは
●
プログラムの呼び出し階層のこと
●
現在位置から、関数やメソッドの呼び出しを遡
れる
●
あくまでも呼び出された階層なので、全てのプログ
ラムの実行順では無いことには注意
●
ブレークしたポイントまでに呼び出された関数
やメソッドが分かるので…
●
想定外の関数の動作を見つけたり、
●
思わぬ実行経路を見つけたりできる。
- 22. ブレークからの再開方法
●
【再開】ブレークした箇所から再開
●
【ステップオーバー】その行を実行し、次の行に進む
●
【ステップイン】その行を実行し、次の行に進む。
関数があればその中に入る
●
【ステップアウト】現在の関数を抜けるまで実行を進める
●
また、BPを一時的に全てスキップするように無効化
することも出来ます。
ステップオーバー ステップイン ステップアウト
再開
BPの一時無効化
- 23. 論理エラーを探し出す
●
「論理エラー」とは、プログラムはエラーにな
らないが、意図した動作をしない状態
●
ワリと良くあるし、ワリとやっかいな状態
●
論理エラーの発見には、経験&コツが必要だが...
●
プログラムのブレークは非常に強力な武器に。
●
おかしくなっていると思うところに、
ブレークポイントを設定
●
関連する変数の値を確認
●
呼び出し元からの引数がオカシイときは、
コールスタックを遡って、確認
- 25. 他にもある console API
console.log(object[, object, ...]) 引数の内容をコンソールに表
示する。
console.dir(object[, object, ...]) 引数に指定されたオブジェク
トのプロパティ一覧を表示す
る。
console.time(name) 引数名のタイマーを内部で作
成する。
console.timeEnd(name) console.time(name) で生成さ
れたタイマーを停止して経過
時間を Console パネルに表示
します.
- 26. 圧縮コードの整形
●
圧縮されたコードも
コードビュー下側の
{ } マークをクリック
すると...
- 27. 圧縮コードの整形
●
キレイに整形!
●
この状態でリロード
もOK
●
ブレークポイントも
張れる
●
圧縮されたJSファイ
ルもコードを追いや
すくなりますね!
- 28. 多彩なブレークポイント(1)
ブレークポイント作成
●
条件付きブレークポ して、右クリック
イント
●
任意の条件式がtrueを
返すときだけブレーク
する
条件式を入力
●
作り方
1.ブレークポイントを
作成してから、右ク
リック
2.Edit Breakpoint... か
ら、条件式を入力する
- 29. 多彩なブレークポイント(2)
●
DOMブレークポイント
●
任意の要素ツリーや属性の変更、ノードの削除時に
ブレークする。(要素を右クリックして指定)
●
XHR ブレークポイント
●
XHR送信時にブレークする。送信先が特定の文字
列を含む時だけブレークすることも可能
●
Event Listenerブレークポイント
●
キー入力、マウス、タイマー(setTimeout)などの
イベント発生時に自動でブレーク
- 32. User agent タブ
User agent のオーバーライドやデバイスの
表示解像度のシミュレーションなどが行えるので、
Fire mobile シミュレータっぽいこともできる。
- 33. ドックの位置の変更
●
ドック右下のアイコンを
クリックして切り替える
●
クリック毎に変わる
●
長押しで3種類切り替わる
– 下側
– 右側
クリックまたは
– 個別ウィンドウ 長押しで切り替え
●
サイズ調整できるので、
右側にしてレスポンシブ
の確認にちょっと便利
- 34. まとめ
●
alert() デバッグを置き換える
●
ある時点の変数の値を確認したい時には、
ブレークポイントを使ぉう!
●
ある条件だけブレークしたい時には、
条件付きブレークポイント!
●
止まったら嫌な時とか、連続した値を確認した
い時は、console.log() を使う
●
他にも便利な機能がいっぱいあるので少しずつ
覚えると吉!
- 35. 参考
資料を書くにあたって参考にさせて頂いたサイト
●
Google Chrome Developer Tools入門
http://ss-o.net/event/20120212/
●
Google Chrome版Firebug:
デベロッパーツール取扱説明書
http://gihyo.jp/dev/feature/01/devtools
●
chromeデベロッパーツールでjavascriptのデ
バッグをする -node.jsもあるでよ-
http://d.hatena.ne.jp/shim0mura/20111231/1325357395