![Page 1: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/1.jpg)
JSの基本的なことをちょっと掘り下げてみる話シリーズ
Chapter02. ~ デバッグ編 ~
We Are JavaScripters! :)) 2nd @21cafe
![Page 2: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/2.jpg)
今回の聴衆ターゲットベーシック担当たみーがお送りします
初心者~中級者向け Tips共有(知ってたら暖かい目で見守ってください)
知ってる方も復習がてらお付き合いくださいmm(ツッコミどころがあればお気軽にツッこんでください)
![Page 3: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/3.jpg)
みんな大好き Chrome Developer Tool
![Page 4: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/4.jpg)
どれくらい、 使いこなせていますか?
![Page 5: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/5.jpg)
console.log()
![Page 6: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/6.jpg)
console オブジェクトを
コンソール でみてみる
![Page 7: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/7.jpg)
console オブジェクトを
コンソール でみてみる
25個!
![Page 8: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/8.jpg)
今日はこんな感じです(前回の反省からスライドベースで進めます)
![Page 9: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/9.jpg)
INDEX
1. 厳選!便利なconsole.○○
2. breakpointを刺すいろんな方法
3. その他のTips
![Page 10: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/10.jpg)
INDEX
1. 厳選!便利なconsole.○○
2. breakpointを刺すいろんな方法
3. その他のTips
![Page 11: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/11.jpg)
1. 厳選!便利なconsole.○○1. console.logにラベルをつける
2. console.info、console.warn、console.error
3. console.count
4. console.time、console.timeEnd
5. console.assert
6. console.trace
7. console.dir
8. おまけ:console.table
9. おまけ:console.logでメッセージを伝えてみる
![Page 12: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/12.jpg)
1. console.logにラベルをつける
引数をとることでラベルがつけられます(地味に便利です・・!)
![Page 13: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/13.jpg)
2. console.info、console.warn、console.error
見え方が変わります(使いこなせば、開発者同士で情報を伝えやすくなりますね)
![Page 14: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/14.jpg)
3. console.count
何回呼ばれたかを表示してくれます(意図せず関数が何回も呼ばれてしまうのを察知したり、ループが何回まわってるのか調べたい時にいいですね!)
![Page 15: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/15.jpg)
4. console.time、console.timeEnd
特定処理から処理の間の時間をはかることができます(特定の処理のパフォーマンスをはかりたいときに
使ったりするのかな?)
![Page 16: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/16.jpg)
4. console.time、console.timeEnd
2回実行
![Page 17: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/17.jpg)
4. console.time、console.timeEnd
2.318ms
0.597ms
2.392ms
0.767ms
![Page 18: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/18.jpg)
4. console.time、console.timeEnd
2.318ms
0.597ms
2.392ms
0.767ms
for inで回したほうが 約4倍ほど速いようだ
![Page 19: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/19.jpg)
5. console.assert
テストコードでおなじみのassert式を判定して、違ったらエラーを出してくれます
(合っていたら何も出さない)
![Page 20: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/20.jpg)
6. console.trace
どのfunctionをたどってきたのかを表示してくれる(breakpointしたときに見れるCallStackと同じ.
わざわざbreakpointで止めたくないときに)
![Page 21: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/21.jpg)
7. console.dirDOM要素を出力した場合に、logと違いが出る!
console.dir→DOM要素のプロパティを
表示してくれる!
![Page 22: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/22.jpg)
8. おまけ:console.table配列やオブジェクトを表形式で表示してくれるはずだが・・Chromeだと特定条件でしか表示されないようでした・Array["one","two","three"] → 非表示・Object {“one”:”oneone”,”two”:”twotwo”...} → 非表示・Arrayの中にObject → なぜか表示された
![Page 23: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/23.jpg)
8. おまけ:console.tableFireFoxなら全部みれた!!
しかもソートもできる!
![Page 24: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/24.jpg)
9. おまけ:console.logでメッセージを伝えてみる
![Page 25: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/25.jpg)
9. おまけ:console.logでメッセージを伝えてみる
%cをつけることでスタイルを指定できる!
![Page 26: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/26.jpg)
![Page 27: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/27.jpg)
今は見れませんでした・・・orz
![Page 28: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/28.jpg)
INDEX
1. 厳選!便利なconsole.○○
2. breakpointを刺すいろんな方法
3. その他のTips
![Page 29: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/29.jpg)
2. breakpointを刺すいろんな方法
通常パターン
![Page 30: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/30.jpg)
2. breakpointを刺すいろんな方法
1. ソースコードで刺す!debugger!
2. 条件で刺す!条件付きbreakpoint
![Page 31: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/31.jpg)
1. ソースコードで刺す!debugger!
DevToolのSourcesでファイルを開かなくてもbreakpointを刺せる!(超便利)※ただし、更新しないと消せないため、 何度もアクセスされる関数はBAD. (breakpoint全無効は可能)※コミットしちゃうと他の開発者に怒られるw
![Page 32: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/32.jpg)
2. 条件で刺す!条件付きbreakpoint
1. Event Listener Breakpoints→ イベントでbreak
2. DOM Breakpoints→ DOMの変化でbreak
3. XHR Breakpoints→ XHR(HTTP通信)の条件でbreak・・・わりと言葉のまんまですねw
![Page 33: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/33.jpg)
1. Event Listener Breakpoints
Breakpointsのタブからたどれます.イベントの種類は・・・みればわかるでしょうw※eventをlistenしているメソッドがなかった場合、breakしません
![Page 34: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/34.jpg)
2. DOM Breakpoints
![Page 35: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/35.jpg)
2. DOM Breakpoints
1. Subtree Modification→ 要素が変更されたとき(下位の要素含む)
2. Attributes modifications→ 要素の属性が変更されたとき
3. Node removal→ 要素が削除されたとき
![Page 36: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/36.jpg)
3. XHR Breakpoints
Addしようとすると文字列を聞かれます.
上記の場合、「messages」を含むURLで通信しようとしたときにbreakします
![Page 37: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/37.jpg)
INDEX
1. 厳選!便利なconsole.○○
2. breakpointを刺すいろんな方法
3. その他のTips
![Page 38: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/38.jpg)
3. その他のTips
1. Disable cache が便利
2. VSCodeのこと
![Page 39: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/39.jpg)
1. Network > Disable cacheが便利
ブラウザキャッシュしなくなるので、更新しても反映されないってことがなくなる!常に初回アクセスのレスポンススピードがみたいときに便利!※DevToolが開いているときだけなので注意
![Page 40: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/40.jpg)
2. VSCodeのこと
![Page 41: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/41.jpg)
2. VSCodeのこと
Chromeと連携すると、今回紹介したことのほとんどがVSCode上で実行できる
素晴らしいエディタ(というかもはやIDE)
![Page 42: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/42.jpg)
2. VSCodeのことできたこと
1. Chromeと連携(少し面倒. Chromeの設定が変になるようだ)
2. エディタ上でbreakpointを刺す
3. consoleを使う
できなかったこと
1. DOMの検証(Elementタブ)
2. DevToolとの併用(開くと落ちる)
3. Debug用Chromeの設定
![Page 43: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/43.jpg)
2. VSCodeのこと
結論
Sublimeからの移行は様子見
(知見のある方いましたらご教示くださいmm)
![Page 44: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/44.jpg)
まとめ
今回はググれば出てくる(でも案外使われていない?)
基礎Tipsでした!
みなさんのデバッグTipsもぜひおしえてください!mm
![Page 45: JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜 デバッグ編 〜](https://reader038.vdocuments.pub/reader038/viewer/2022102917/5871b10d1a28abda6a8b69c7/html5/thumbnails/45.jpg)
参考URLconsole.logまとめ2016年夏http://qiita.com/ykyk1218/items/0f5858d077d43a49cfe2
Webフロントエンド表示速度、最速化手法まとめhttp://qiita.com/zaru/items/51ee8a5be22b75a42927
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能http://www.buildinsider.net/web/chromedevtools/01
JavaScriptのデバッグのコツと技http://postd.cc/javascript-debugging-tips-and-tricks/
JavaScript Consoleに面白い出力をしているサービスhttp://qiita.com/oohira/items/6c30bdf3636a134cf119
MDN console.loghttps://developer.mozilla.org/ja/docs/Web/API/Console/log
JavaScript in VS Codehttps://code.visualstudio.com/Docs/languages/javascript