jsの基本的なことをちょっと掘り下げてみる話シリーズ chapter02. 〜...
Post on 08-Jan-2017
90 Views
Preview:
TRANSCRIPT
JSの基本的なことをちょっと掘り下げてみる話シリーズ
Chapter02. ～ デバッグ編 ～
We Are JavaScripters! :)) 2nd @21cafe
今回の聴衆ターゲットベーシック担当たみーがお送りします
初心者～中級者向け Tips共有（知ってたら暖かい目で見守ってください）
知ってる方も復習がてらお付き合いくださいmm（ツッコミどころがあればお気軽にツッこんでください）
みんな大好き Chrome Developer Tool
どれくらい、 使いこなせていますか？
console.log()
console オブジェクトを
コンソール でみてみる
console オブジェクトを
コンソール でみてみる
25個!
今日はこんな感じです(前回の反省からスライドベースで進めます)
INDEX
1. 厳選！便利なconsole.○○
2. breakpointを刺すいろんな方法
3. その他のTips
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
何回呼ばれたかを表示してくれます（意図せず関数が何回も呼ばれてしまうのを察知したり、ループが何回まわってるのか調べたい時にいいですね！）
4. console.time、console.timeEnd
特定処理から処理の間の時間をはかることができます（特定の処理のパフォーマンスをはかりたいときに
使ったりするのかな？）
4. console.time、console.timeEnd
2回実行
4. console.time、console.timeEnd
2.318ms
0.597ms
2.392ms
0.767ms
4. console.time、console.timeEnd
2.318ms
0.597ms
2.392ms
0.767ms
for inで回したほうが 約4倍ほど速いようだ
5. console.assert
テストコードでおなじみのassert式を判定して、違ったらエラーを出してくれます
（合っていたら何も出さない）
6. console.trace
どのfunctionをたどってきたのかを表示してくれる（breakpointしたときに見れるCallStackと同じ.
わざわざbreakpointで止めたくないときに）
7. console.dirDOM要素を出力した場合に、logと違いが出る！
console.dir→DOM要素のプロパティを
表示してくれる！
8. おまけ：console.table配列やオブジェクトを表形式で表示してくれるはずだが・・Chromeだと特定条件でしか表示されないようでした・Array["one","two","three"] → 非表示・Object {“one”:”oneone”,”two”:”twotwo”...} → 非表示・Arrayの中にObject → なぜか表示された
8. おまけ：console.tableFireFoxなら全部みれた！！
しかもソートもできる！
9. おまけ：console.logでメッセージを伝えてみる
9. おまけ：console.logでメッセージを伝えてみる
%cをつけることでスタイルを指定できる!
今は見れませんでした・・・orz
INDEX
1. 厳選！便利なconsole.○○
2. breakpointを刺すいろんな方法
3. その他のTips
2. breakpointを刺すいろんな方法
通常パターン
2. breakpointを刺すいろんな方法
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
2. DOM Breakpoints
1. Subtree Modification→ 要素が変更されたとき(下位の要素含む)
2. Attributes modifications→ 要素の属性が変更されたとき
3. Node removal→ 要素が削除されたとき
3. XHR Breakpoints
Addしようとすると文字列を聞かれます.
上記の場合、「messages」を含むURLで通信しようとしたときにbreakします
INDEX
1. 厳選！便利なconsole.○○
2. breakpointを刺すいろんな方法
3. その他のTips
3. その他のTips
1. Disable cache が便利
2. VSCodeのこと
1. Network > Disable cacheが便利
ブラウザキャッシュしなくなるので、更新しても反映されないってことがなくなる！常に初回アクセスのレスポンススピードがみたいときに便利！※DevToolが開いているときだけなので注意
2. VSCodeのこと
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
参考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
top related