![他にもある 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)
![[GTCJ2018]CuPy -NumPy互換GPUライブラリによるPythonでの高速計算- PFN奥田遼介](https://cdn.slidesharecdn.com/ss_thumbnails/gtcj2018cupypfnryosukeokuta-181009073034-thumbnail.jpg?width=560&fit=bounds)
![[DL輪読会]The Neuro-Symbolic Concept Learner: Interpreting Scenes, Words, and Se...](https://cdn.slidesharecdn.com/ss_thumbnails/theneuro-symbolicconceptlearnerinterpretingsceneswordsandsentencesfromnaturalsupervision-190906012005-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Viewers also liked (20)
Similar to 颁丑谤辞尘别で箩补惫补蝉肠谤颈辫迟デバッグ！まず半歩? (20)
More from Yuji Nojima (7)
颁丑谤辞尘别で箩补惫补蝉肠谤颈辫迟デバッグ！まず半歩?
- 1. Chrome て? Javascript テ?ハ?ック?！ ます?半歩?
- 2. 自己紹介 ノジマ ユウジ @yuka2py ● 株式会社フォーエンキー 代表 ● Android/iPhoneアプリ開発。 Webシステム開発、テ?ザインや印刷全般など。 Web関係は...ここ最近はスマホ系三昧? ● 好きな言語：Python (*?Д`*)、Javascript しかし一番書いているのは PHP... ● ク?ラフィックテ?ザインもやります。 ● 趣味：オサレ?（若干かわいい系 (｀?ω??)?? ● 弱点：お嫁ちゃん
- 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. デベロッパーツールの設定も少しだけ 結構色々 て?きる ここから 開く
- 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