We Are JavaScripters!:)) 2nd の発表資料です

1. JSの基本的なことをちょっと
掘り下げてみる話シリーズ
Chapter02. ～ デバッグ編 ～
We Are JavaScripters! :)) 2nd
@21cafe

2. 今回の聴衆ターゲット
ベーシック担当たみーがお送りします
初心者～中級者向け Tips共有
（知ってたら暖かい目で見守ってください）
知ってる方も復習がてらお付き合いく
ださいmm（ツッコミどころがあれば
お気軽にツッこんでください）

3. みんな大好き
Chrome Developer Tool

4. どれくらい、
使いこなせていますか？

5. console.log()

6. console
オブジェクトを
コンソール
でみてみる

7. console
オブジェクトを
コンソール
でみてみる
25個!

8. 今日はこんな感じです
(前回の反省からスライドベースで進めます)

9. INDEX
1. 厳選！便利なconsole.○○
2. breakpointを刺すいろんな方法
3. その他のTips

10. INDEX
1. 厳選！便利なconsole.○○
2. breakpointを刺すいろんな方法
3. その他のTips

11. 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でメッセージを伝えてみる

12. 1. console.logにラベルをつける
引数をとることでラベルがつけられます
（地味に便利です・・！）

13. 2. console.info、console.warn、console.error
見え方が変わります
（使いこなせば、開発者同士で情報を伝えやすくなりますね）

14. 3. console.count
何回呼ばれたかを表示してくれます
（意図せず関数が何回も呼ばれてしまうのを察知したり、
ループが何回まわってるのか調べたい時にいいですね！）

15. 4. console.time、console.timeEnd
特定処理から処理の間の時間をはかることができます
（特定の処理のパフォーマンスをはかりたいときに
使ったりするのかな？）

16. 4. console.time、console.timeEnd
2回実行

17. 4. console.time、console.timeEnd
2.318ms
0.597ms
2.392ms
0.767ms

18. 4. console.time、console.timeEnd
2.318ms
0.597ms
2.392ms
0.767ms
for inで回したほうが
約4倍ほど速いようだ

19. 5. console.assert
テストコードでおなじみのassert
式を判定して、違ったらエラーを出してくれます
（合っていたら何も出さない）

20. 6. console.trace
どのfunctionをたどってきたのかを表示してくれる
（breakpointしたときに見れるCallStackと同じ.
わざわざbreakpointで止めたくないときに）

21. 7. console.dir
DOM要素を出力した場合に、logと違いが出る！
console.dir→
DOM要素のプロパティを
表示してくれる！

22. 8. おまけ：console.table
配列やオブジェクトを
表形式で表示してくれるはずだが・・
Chromeだと特定条件でしか表示されないようでした
・Array["one","two","three"] → 非表示
・Object {“one”:”oneone”,”two”:”twotwo”...} → 非表示
・Arrayの中にObject → なぜか表示された

23. 8. おまけ：console.table
FireFoxなら全部みれた！！
しかもソートもできる！

24. 9. おまけ：console.logで
メッセージを伝えてみる

25. 9. おまけ：console.logで
メッセージを伝えてみる
%cをつけることでスタイル
を指定できる!

27. 今は見れませんでした・・・orz

28. INDEX
1. 厳選！便利なconsole.○○
2. breakpointを刺すいろんな方法
3. その他のTips

29. 2. breakpointを刺すいろんな方法
通常パターン

30. 2. breakpointを刺すいろんな方法
1. ソースコードで刺す！debugger！
2. 条件で刺す！条件付きbreakpoint

31. 1. ソースコードで刺す！debugger！
DevToolのSourcesでファイルを開かなくても
breakpointを刺せる！（超便利）
※ただし、更新しないと消せないため、
何度もアクセスされる関数はBAD.
(breakpoint全無効は可能)
※コミットしちゃうと他の開発者に怒られるw

32. 2. 条件で刺す！条件付きbreakpoint
1. Event Listener Breakpoints
→ イベントでbreak
2. DOM Breakpoints
→ DOMの変化でbreak
3. XHR Breakpoints
→ XHR(HTTP通信)の条件でbreak
・・・わりと言葉のまんまですねw

33. 1. Event Listener Breakpoints
Breakpointsのタブから
たどれます.
イベントの種類は・・・
みればわかるでしょうw
※eventをlistenしている
メソッドがなかった場合、
breakしません

34. 2. DOM Breakpoints

35. 2. DOM Breakpoints
1. Subtree Modification
→ 要素が変更されたとき(下位の要素含む)
2. Attributes modifications
→ 要素の属性が変更されたとき
3. Node removal
→ 要素が削除されたとき

36. 3. XHR Breakpoints
Addしようとすると文字列を聞かれます.
上記の場合、「messages」を含むURLで通信
しようとしたときにbreakします

37. INDEX
1. 厳選！便利なconsole.○○
2. breakpointを刺すいろんな方法
3. その他のTips

38. 3. その他のTips
1. Disable cache が便利
2. VSCodeのこと

39. 1. Network > Disable cacheが便利
ブラウザキャッシュしなくなるので、
更新しても反映されないってことがなくなる！
常に初回アクセスのレスポンススピードが
みたいときに便利！
※DevToolが開いているときだけなので注意

40. 2. VSCodeのこと

41. 2. VSCodeのこと
Chromeと連携すると、今回紹介したことの
ほとんどがVSCode上で実行できる
素晴らしいエディタ（というかもはやIDE）

42. 2. VSCodeのこと
できたこと
1. Chromeと連携
(少し面倒. Chromeの
設定が変になるようだ)
2. エディタ上で
breakpointを刺す
3. consoleを使う
できなかったこと
1. DOMの検証
(Elementタブ)
2. DevToolとの併用
(開くと落ちる)
3. Debug用Chromeの
設定

43. 2. VSCodeのこと
結論
Sublimeからの移行は様子見
(知見のある方いましたらご教示くださいmm)

44. まとめ
今回はググれば出てくる
（でも案外使われていない?）
基礎Tipsでした！
みなさんのデバッグTipsも
ぜひおしえてください！mm

45. 参考URL
console.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.log
https://developer.mozilla.org/ja/docs/Web/API/Console/log
JavaScript in VS Code
https://code.visualstudio.com/Docs/languages/javascript