Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Chromeでjavascriptデバッグ!まず半歩♪

26,771 views

Published on

Published in: Technology

Chromeでjavascriptデバッグ!まず半歩♪

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

×