Download as PDF, PPTX
![他にもある console API
console.log(object[, object, ...]) 引数の内容をコンソールに表
示する。
console.dir(object[, object, ...]) 引数に指定されたオブジェク
トのプロパティ一覧を表示す
る。
console.time(name) 引数名のタイマーを内部で作
成する。
console.timeEnd(name) console.time(name) で生成さ
れたタイマーを停止して経過
時間を Console パネルに表示
します.](https://image.slidesharecdn.com/chromejavascript-120907182949-phpapp02/85/Chrome-javascript-25-320.jpg)
More Related Content
![世界を跨ぐリアルタイム PvP 対戦への挑戦 [Google Cloud INSIDE Games & Apps]](https://cdn.slidesharecdn.com/ss_thumbnails/0607inside2bne-180607074012-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Chromeでjavascriptデバッグ！まず半歩♪
Chromeでjavascriptデバッグ！まず半歩♪
- 1. Chrome で Javascriptデバッグ！ まず半歩♪
- 2. 自己紹介 ノジマ ユウジ @yuka2py ● 株式会社フォーエンキー 代表 ● Android/iPhoneアプリ開発。 Webシステム開発、デザインや印刷全般など。 Web関係は...ここ最近はスマホ系三昧♪ ● 好きな言語：Python (*´Д`*)、Javascript しかし一番書いているのは PHP... ● グラフィックデザインもやります。 ● 趣味：オサレ♪（若干かわいい系 (｀･ω･´)ｷﾘ ● 弱点：お嫁ちゃん
- 3.
- 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.
- 32. User agent タブ Useragent のオーバーライドやデバイスの 表示解像度のシミュレーションなどが行えるので、 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.