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

498 views

Published on

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

Published in: Engineering
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
498
On SlideShare
0
From Embeds
0
Number of Embeds
409
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. JSの基本的なことをちょっと 掘り下げてみる話シリーズ Chapter02. ~ デバッグ編 ~ We Are JavaScripters! :)) 2nd @21cafe
  2. 2. 今回の聴衆ターゲット ベーシック担当たみーがお送りします 初心者~中級者向け Tips共有
 (知ってたら暖かい目で見守ってください) 知ってる方も復習がてらお付き合いく ださいmm(ツッコミどころがあれば お気軽にツッこんでください)
  3. 3. みんな大好き Chrome Developer Tool
  4. 4. どれくらい、 使いこなせていますか?
  5. 5. console.log()
  6. 6. console オブジェクトを コンソール でみてみる
  7. 7. console オブジェクトを コンソール でみてみる 25個!
  8. 8. 今日はこんな感じです
 (前回の反省からスライドベースで進めます)
  9. 9. INDEX 1. 厳選!便利なconsole.○○ 2. breakpointを刺すいろんな方法 3. その他のTips
  10. 10. INDEX 1. 厳選!便利なconsole.○○ 2. breakpointを刺すいろんな方法 3. その他のTips
  11. 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. 12. 1. console.logにラベルをつける 引数をとることでラベルがつけられます
 (地味に便利です・・!)
  13. 13. 2. console.info、console.warn、console.error 見え方が変わります
 (使いこなせば、開発者同士で情報を伝えやすくなりますね)
  14. 14. 3. console.count 何回呼ばれたかを表示してくれます
 (意図せず関数が何回も呼ばれてしまうのを察知したり、
 ループが何回まわってるのか調べたい時にいいですね!)
  15. 15. 4. console.time、console.timeEnd 特定処理から処理の間の時間をはかることができます
 (特定の処理のパフォーマンスをはかりたいときに
 使ったりするのかな?)
  16. 16. 4. console.time、console.timeEnd 2回実行
  17. 17. 4. console.time、console.timeEnd 2.318ms 0.597ms 2.392ms 0.767ms
  18. 18. 4. console.time、console.timeEnd 2.318ms 0.597ms 2.392ms 0.767ms for inで回したほうが 約4倍ほど速いようだ
  19. 19. 5. console.assert テストコードでおなじみのassert
 式を判定して、違ったらエラーを出してくれます
 (合っていたら何も出さない)
  20. 20. 6. console.trace どのfunctionをたどってきたのかを表示してくれる
 (breakpointしたときに見れるCallStackと同じ.
 わざわざbreakpointで止めたくないときに)
  21. 21. 7. console.dir DOM要素を出力した場合に、logと違いが出る! console.dir→
 DOM要素のプロパティを
 表示してくれる!
  22. 22. 8. おまけ:console.table 配列やオブジェクトを
 表形式で表示してくれるはずだが・・
 Chromeだと特定条件でしか表示されないようでした
 
 ・Array["one","two","three"] → 非表示
 ・Object {“one”:”oneone”,”two”:”twotwo”...} → 非表示
 ・Arrayの中にObject → なぜか表示された

  23. 23. 8. おまけ:console.table FireFoxなら全部みれた!! しかもソートもできる!
  24. 24. 9. おまけ:console.logで
 メッセージを伝えてみる
  25. 25. 9. おまけ:console.logで
 メッセージを伝えてみる %cをつけることでスタイル を指定できる!
  26. 26. 今は見れませんでした・・・orz
  27. 27. INDEX 1. 厳選!便利なconsole.○○ 2. breakpointを刺すいろんな方法 3. その他のTips
  28. 28. 2. breakpointを刺すいろんな方法 通常パターン
  29. 29. 2. breakpointを刺すいろんな方法 1. ソースコードで刺す!debugger! 2. 条件で刺す!条件付きbreakpoint
  30. 30. 1. ソースコードで刺す!debugger! DevToolのSourcesでファイルを開かなくても
 breakpointを刺せる!(超便利)
 
 ※ただし、更新しないと消せないため、
  何度もアクセスされる関数はBAD.
  (breakpoint全無効は可能)
 ※コミットしちゃうと他の開発者に怒られるw
  31. 31. 2. 条件で刺す!条件付きbreakpoint 1. Event Listener Breakpoints
 → イベントでbreak 2. DOM Breakpoints
 → DOMの変化でbreak 3. XHR Breakpoints
 → XHR(HTTP通信)の条件でbreak
 
 ・・・わりと言葉のまんまですねw
  32. 32. 1. Event Listener Breakpoints Breakpointsのタブから
 たどれます.
 
 イベントの種類は・・・
 みればわかるでしょうw
 
 ※eventをlistenしている
 メソッドがなかった場合、
 breakしません
  33. 33. 2. DOM Breakpoints
  34. 34. 2. DOM Breakpoints 1. Subtree Modification
 → 要素が変更されたとき(下位の要素含む) 2. Attributes modifications
 → 要素の属性が変更されたとき 3. Node removal
 → 要素が削除されたとき

  35. 35. 3. XHR Breakpoints Addしようとすると文字列を聞かれます.
 上記の場合、「messages」を含むURLで通信
 しようとしたときにbreakします
  36. 36. INDEX 1. 厳選!便利なconsole.○○ 2. breakpointを刺すいろんな方法 3. その他のTips
  37. 37. 3. その他のTips 1. Disable cache が便利 2. VSCodeのこと
  38. 38. 1. Network > Disable cacheが便利 ブラウザキャッシュしなくなるので、
 更新しても反映されないってことがなくなる!
 
 常に初回アクセスのレスポンススピードが
 みたいときに便利!
 
 ※DevToolが開いているときだけなので注意

  39. 39. 2. VSCodeのこと
  40. 40. 2. VSCodeのこと Chromeと連携すると、今回紹介したことの
 ほとんどがVSCode上で実行できる
 素晴らしいエディタ(というかもはやIDE)
  41. 41. 2. VSCodeのこと できたこと 1. Chromeと連携
 (少し面倒. Chromeの
 設定が変になるようだ) 2. エディタ上で
 breakpointを刺す 3. consoleを使う できなかったこと 1. DOMの検証
 (Elementタブ) 2. DevToolとの併用
 (開くと落ちる) 3. Debug用Chromeの
 設定
  42. 42. 2. VSCodeのこと 結論
 
 Sublimeからの移行は様子見
 
 (知見のある方いましたらご教示くださいmm)
  43. 43. まとめ 今回はググれば出てくる
 (でも案外使われていない?)
 基礎Tipsでした!
 
 みなさんのデバッグTipsも
 ぜひおしえてください!mm
  44. 44. 参考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

×