Developer Consoleを使い倒そう / Use Web Browser DevTools

発表日：2024/08/05（月）
『Progate BAR 学生エンジニア限定 LT会&交流会』にて
( https://progate.connpass.com/event/323831/ )

"Developer Console" と呼んでいたけど
この発表のために調べてみると "DevTools" と書くことが圧倒的に多いとわかって、
いったい私が Developer Console って呼ぶようになってしまったきっかけはなんだったんだろう……と思いました・・・

Transcript

1. Α͑͜ Developer Console を使い倒そう！！ @yokoe24
2. ࣗݾ঺հ よこえ • X (Twitter): @yokoe24 • 出張写真撮影のラブグラフCTO （3年前の2021/01入社） • Rails, JavaScript, Go とか • 4月からグロービス経営大学院に 入学したので26卒院生です！ • ニコニコ閉じててアニメ見てない
3. ࠓ೔࿩͢ͷ͸ ͜Εʂ →
4. ̍ まずアンケート
5. ։ൃதDeveloper ConsoleΛ • ほぼいつも開いている • 半分くらいの時間は開いている • ほとんど使っていない • 今回初めて Developer Console を 知ります！ （当日アンケート結果）ほぼいつも: 8, 半分: 3, ほぼない: 5, 初めて知ります: 1
6. ։ൃʹ࢖͍ͬͯΔϒϥ΢β͸ʁ • Safari • Chrome • Firefox • Brave • Arc • それ以外 (Vivaldi, Opera, Edge...) （当日アンケート結果）Safari: 2, Chrome: 11, Firefox: 4, Brave: 1, Arc: 2, Edge: 1
7. ͓͢͢Ί͸ Chromium ܥ • Chrome • Brave • Arc • Vivaldi • Microsoft Edge • などの Chromium 系のブラウザ
8. ॆ࣮ͷ Developer Console • Chromium 系の Developer Console は 機能が豊富でとても便利！ • Firefox も便利で、独自の便利機能が ありますが今回は取り上げません • Safari は iOS の挙動を試したい とき以外はあまりお勧めできず……
9. ̎ Elements タブ
10. Elements λϒ • CSSのスタイルコーディングするときに 役立つ！ • React や Vue.js などのコンポーネン トが HTML 的にはどう表示されている のか見ることでデバッグに役立つ！ • 印刷やスクショのときに役立つ！
11. ελΠϧίʔσΟϯά
12. ελΠϧίʔσΟϯά 1. 気になる箇所を選択 2. letter-spacing などを調整 3. ほどよい設定値を見つけていく 4. それに合わせてCSSを更新
13. ϨεϙϯγϒରԠ
14. ϨεϙϯγϒରԠ • ボタン一発でスマホ・PCの見た目に すぐに切り替えが可能！ • それだけでなく、Developer Console との境界の位置をいじることで、 特定の横幅のときに起こるデザイン崩 れを見つけられる！
15. ҹ࡮΍εΫγϣʹ໾ཱͭ • 印刷やスクショが見やすくなるよう 不要なコンポーネントを削除すること も Developer Console からおこなえ る
16. σόοάʹ໾ཱͭ • HTMLバリデーションと サーバーバリデーションの両方が かかっている場合に、 あえて input タグの required 要素 を消すことなどでサーバーバリデー ションの挙動を見ることもできる
17. ̏ Console タブ
18. Console λϒ • JavaScript のデバッグに役立つ！ • JavaScript のちょっとした挙動の確認 に役立つ！
19. JavaScript ͷσόοά • デバッグの基本はログ出力！ • メソッドの途中で、変数にどんな値が 入っているのか確認するために console.log(hensuu); など書けば、Console タブに変数の値 が出てくる！
20. ͪΐͬͱͨ͠ڍಈ֬ೝ • 「JavaScript Playground」などで 検索をしなくても、 F12キーで Developer Console を呼び 出すだけで、JavaScript の挙動確認が おこなえる！
21. ͪΐͬͱͨ͠ڍಈ֬ೝ
22. ̐ Network タブ
23. Network λϒ • ブラウザキャッシュを無効化できる • サイトが開くまでの速度を確認できる • ページ表示のためにどれだけユーザー に通信を発生させているかを見られる • APIリクエストの実行回数や速度、失敗 した際の原因を探れる
24. ϒϥ΢βΩϟογϡແޮԽ
25. ϒϥ΢βΩϟογϡແޮԽ • 「Disable cache」のチェックは 必ず付けましょう！ • これによって、ブラウザキャッシュが 働くことを抑制でき、APIリクエストを スキップするなどが起きにくくなりま す
26. αΠτ଎౓ͷ֬ೝ
27. αΠτ଎౓ͷ֬ೝ • サイトが開かれるまでの速度を確認で きます。これに２秒以上かかるような ページは要注意です • ページ速度の改善を目指す場合は、 Before/After それぞれの速度を取得 し、成果を発表できるように！
28. ௨৴શମͷ ֬ೝ
29. ௨৴શମͷ֬ೝ • 速度だけでなく、 全体的にどのくらいのファイルサイズ の通信がおこなわれているかもチェッ クしましょう • 5MBもあるような画像がいくつも通信さ れていないでしょうか？
30. APIϦΫΤετͷ֬ೝ • React や Vue.js の実装不備で、 APIリクエストが実装者の想定よりも多 い回数おこなわれている場合がよくあ ります • Network タブをしっかり監視すること で、適正かを確認できます
31. ̑ まとめ！！
32. ·ͱΊ̍ • このように Developer Console は 情報の宝庫です！ • 開発中は、Developer Console の なにかしらのタブを並行して見ている くらいの状態になれると、より プロに近付けます！！
33. ·ͱΊ̎ • 今回は書きませんでしたが Webアプリケーションのサーバーログ なんかも宝の山です！ • データをしっかり確認することで、 強いエンジニアになりましょう！！