1. Chrome で Javascript デバッグ！
まず半歩♪

2. 自己紹介
ノジマ ユウジ @yuka2py
●
株式会社フォーエンキー 代表
●
Android/iPhoneアプリ開発。
Webシステム開発、デザインや印刷全般など。
Web関係は...ここ最近はスマホ系三昧♪
●
好きな言語：Python (*´Д`*)、Javascript
しかし一番書いているのは PHP...
●
グラフィックデザインもやります。
●
趣味：オサレ♪（若干かわいい系 (｀･ω･´)ｷﾘ
●
弱点：お嫁ちゃん

3. 【本日の目標】
alert() デバッグからの卒業。

4. Alert()デバッグとは？
●
Alertで任意の変数の値を表示させ、
プログラムの問題点を確認する手法
（PHPならvar_dumpやecho）
●
問題点
●
Alertした所でプログラムが中断する
●
変数を確認するためのコードを書く必要がある
●
中断しても、確認できる範囲が限定的
●
ソースコードに直接書くので、解除や再設定が面倒
●
ループで使っちゃうと半泣き

5. 本日のお品書き
●
デベロッパーコンソールでのエラーの見かた
●
コンソールへのログ出力
●
ブレークポイントを使ってみる
●
変数の状態が確認できる
●
コールスタックが確認できる
●
おまけ
ちょっぴり紹介程度です。 (｡-д-｡)ゞﾍﾍ…

6. デベロッパーコンソールでの
エラーの見かた

7. 致命的なエラーはエラー表示される
プログラムに
シンタックス
エラーなど致
命的な問題が
あると、画面
右下にエラー
が表示される
クリック

8. コンソールのエラー詳細表示
●
のエラー表示をクリックしたら、コン
ソールが開いてエラーの詳細が確認できる
エラーの詳細

9. エラー個所へジャンプ
●
エラー詳細情報の中に、リンクがある。
このリンクからエラー個所へジャンプできる
クリック

10. ジャンプした先でコードを確認・修正
該当箇所の
コードが表示
される。
エラーとおぼしき場所に、 ここでは、
マーク等も出たりする
無名関数を
閉じるブレス
が抜けてた。

11. コンソールへのログ出力

12. ログ出力は止まらない
●
変数の値を確認したい時、
Alertで変数値を確認する方法では、
処理が中断して困ることがある。
●
例えば、MouseMove で何か処理していて、
その逐次変化する値を確認したい時など
●
そこで...
console.log(value);

13. console.log() を使うと...
●
プログラム中の好きな場所で、
コンソールにログを出力させることができる
●
alert と違って実行が止まらない
●
連続的な値の変化を見たい時など便利
●
例えば↓のような感じで使う
jQuery('body').mousemove(function(e) {
console.log(e.pageX, e.pageY);
});

14. ブレークポイントを使ってみる

15. ブレークポイントとは？
●
プログラム中の好きな場所で、
プログラムの実行を一時停止できます
●
ブレーク中には...
●
スコープ変数の状態を確認できる
●
コールスタック（呼び出し階層）を確認できる
●
再開、ステップオーバー・イン・アウト
⇒これらを用いて、プログラムの論理エラーを
調査するのに非常に強力に活用できる

16. ブレークポイントを設定する
●
ブレークしたい行の行番号をクリック
マークが付いたらOK

17. ブレークしてみる
●
ブレークポイントを通過するように実行すると
ブレークポイントでプログラムは自動停止
BPで止まる

18. ブレーク中は…
停止中...

19. 変数の状態が確認できる
ローカル変数
クロージャ変数
変数の値はもちろん、
オブジェクトなら
その中身も見れる
グローバル変数

20. コールスタックが確認できる
上から順に、
直近の呼び出し
各行クリックすると、
その呼び出し場所に
ジャンプ
ジャンプしたら、
ジャンプした先の
ローカル変数の
状態が見れる

21. コールスタックとは
●
プログラムの呼び出し階層のこと
●
現在位置から、関数やメソッドの呼び出しを遡
れる
●
あくまでも呼び出された階層なので、全てのプログ
ラムの実行順では無いことには注意
●
ブレークしたポイントまでに呼び出された関数
やメソッドが分かるので…
●
想定外の関数の動作を見つけたり、
●
思わぬ実行経路を見つけたりできる。

22. ブレークからの再開方法
●
【再開】ブレークした箇所から再開
●
【ｽﾃｯﾌﾟｵｰﾊﾞｰ】その行を実行し、次の行に進む
●
【ｽﾃｯﾌﾟｲﾝ】その行を実行し、次の行に進む。
関数があればその中に入る
●
【ｽﾃｯﾌﾟｱｳﾄ】現在の関数を抜けるまで実行を進める
●
また、BPを一時的に全てスキップするように無効化
することも出来ます。
ステップオーバー ステップイン ステップアウト
再開
BPの一時無効化

23. 論理エラーを探し出す
●
「論理エラー」とは、プログラムはエラーにな
らないが、意図した動作をしない状態
●
ワリと良くあるし、ワリとやっかいな状態
●
論理エラーの発見には、経験＆コツが必要だが...
●
プログラムのブレークは非常に強力な武器に。
●
おかしくなっていると思うところに、
ブレークポイントを設定
●
関連する変数の値を確認
●
呼び出し元からの引数がオカシイときは、
コールスタックを遡って、確認

24. おまけ

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)などの
イベント発生時に自動でブレーク

30. デベロッパーツールの設定も少しだけ
結構色々
できる ここから
開く

31. General タブ
キャッシュやJSの無効化
再描画された要素に枠を付けて
視覚化する

32. User agent タブ
User agent のオーバーライドやデバイスの
表示解像度のシミュレーションなどが行えるので、
Fire mobile シミュレータっぽいこともできる。

33. ドックの位置の変更
●
ドック右下のアイコンを
クリックして切り替える
●
クリック毎に変わる
●
長押しで３種類切り替わる
– 下側
– 右側
クリックまたは
– 個別ウィンドウ 長押しで切り替え
●
サイズ調整できるので、
右側にしてレスポンシブ
の確認にちょっと便利

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

36. ありがとうございました！
m(o＾ω＾o)m