業務に役立つ！ ブラウザデベロッパーツールの機能紹介と活用例

2024/12/20日に行われた、teamLabさんとDMMの合同イベントでのLT資料です！

https://connpass.com/event/333153/

Transcript

1. © DMM © DMM CONFIDENTIAL 業務に役立つ！ ブラウザデベロッパーツールの 機能紹介と活用例 井内将俊 LC開発部 VCグロースグループ 2024/12/29(金) teamLab×DMM tech meetup ~frontend~
2. © DMM 自己紹介 2 井内 将俊 (いうち まさとし) 合同会社DMM.com 23新卒 ライブコミュニケーション開発部 X(旧Twitter) @pengin_engineer 趣味：同人誌を描いたり 入社の決め手 →趣味の同人活動の話をしやすそう！
3. © DMM 開発プロダクト紹介 バーチャルな ライブコミュニケーションサービスを開発 3
4. © DMM 開発プロダクト紹介 4 Live2Dキャラクターの表示速度改善で 
 学んだ高速化のポイント バーチャルな ライブコミュニケーションサービスを開発
5. © DMM 今日の話 5 ここの話
6. © DMM みなさん デベロッパーツール 活用してますか？？
7. © DMM 私は少し前 (特に学生時代 ) は活用できていなかった ...
8. © DMM 業務で頻繁に 使っている機能を紹介！ SNSで便利機能をシェアしましょ〜！ #teamlab_dmm
9. © DMM 今回はGoogleChrome に限定🙏 公式ドキュメント：https://developer.chrome.com/
10. © DMM BEとの繋ぎこみ！ ~ネットワークタブ周辺 ~
11. © DMM ネットワークタブ 11
12. © DMM ネットワークタブ 12 どのタイミングで
13. © DMM ネットワークタブ 13 どのタイミングで どんな内容が
14. © DMM ネットワークタブ 14 どのタイミングで どこから どんな内容が
15. © DMM ネットワークタブ 15 どのタイミングで どこから どんな内容が APIの繋ぎ込み実装で とても便利！
16. © DMM 16 API実装者とのコミュニケーションにも役立つ
17. © DMM デザイン実装に役立つ！ ~インスペクタモード他 ~
18. © DMM インスペクタモード(セレクトモード) 18 HTML/CSSの構造確 認 - 想定通りに実装で きない場合 👍 - 既存ページの構造 確認👍 ショートカット Win: Command+Shift+C Mac: Ctrl+Shift+C
19. © DMM Elementsタブ 19 要素の親子関係の確 認 隠れた要素の確認 要素が持つスタイルの 確認
20. © DMM Elementsタブ　小技 20 Hキーで要素を隠せる 一時的に消してデバッ グに活用👍
21. © DMM Elementsタブ　小技 21 Deleteキーで要素を 消せる 要素を消して表示を シンプルに 👍
22. © DMM Elementsタブ　小技 22 Deleteキーで要素を 消せる 要素を消して表示をシ ンプルに👍 レイアウト崩れの 原因特定に繋がる
23. © DMM レスポンシブモード 23 縦長のスマホ画面を 再現 途中途中で活用し、 スマホでレイアウトが は ちゃめちゃ 😇 になることを防げる！
24. © DMM Layers機能 24 Mac:Command+Shift+P Win:Ctrl+Shift+P Layersと検索 レイヤーを 3Dで視覚化 - 重ね合わせの確認 - 構造の把握
25. © DMM Full size scrrenshot 25 Mac:Command+Shift+P Win:Ctrl+Shift+P Captureと検索 ページ全体を 1枚の画像 として保存 デザイナーさんとの共有に便利！
26. © DMM パフォーマンス改善 ~パフォーマンスタブ他 ~
27. © DMM パフォーマンスタブ 27
28. © DMM 28 CPU使用状況 パフォーマンスタブ
29. © DMM 29 CPU使用状況 画面構築 パフォーマンスタブ
30. © DMM 30 CPU使用状況 画面構築 ファイル読み込み秒数 パフォーマンスタブ
31. © DMM 31 CPU使用状況 画面構築 ファイル読み込み秒数 Core Web Vitals パフォーマンスタブ
32. © DMM 32 CPU使用状況 画面構築 ファイル読み込み秒数 Core Web Vitals パフォーマンスタブ
33. © DMM パフォーマンスモニター 33 Mac:Command+Shift+P Win:Ctrl+Shift+P Performance monitor と検索 リアルタイムに確認 - CPU利用状況 - JS heap size 等
34. © DMM パフォーマンスモニター 34 Mac:Command+Shift+P Win:Ctrl+Shift+P Performance monitor と検索 リアルタイムに確認 - CPU利用状況 - JS heap size ページ遷移で少し上がり、アニメーションがなく なったので、 CPUを使わなくなった
35. © DMM まとめ デベロッパーツールの活用例 - APIの繋ぎ込み - デザイン実装 - パフォーマンス改善 35 開発業務の大部分で役立つ！
36. © DMM デベロッパーツールを活用して 開発効率を上げよう！