JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜デバッグ編〜

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

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

みんな大好き
Chrome Developer Tool

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

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

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

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

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

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

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

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

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

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

2回実行

2.318ms
0.597ms
2.392ms
0.767ms

2.318ms
0.597ms
2.392ms
0.767ms
for inで回したほうが
約4倍ほど速いようだ

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

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

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

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

FireFoxなら全部みれた！！
しかもソートもできる！

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

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

JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜デバッグ編〜

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

通常パターン

1. ソースコードで刺す！debugger！
2. 条件で刺す！条件付きbreakpoint

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

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

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

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

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

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

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

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

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

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

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

参考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

JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜デバッグ編〜

More Related Content

Viewers also liked (20)

Similar to JSの基本的なことをちょっと掘り下げてみる話シリーズ Chapter02. 〜デバッグ編〜 (13)