Tweet
Tweet

Slide 1

Slide 1 text

© DMM © DMM CONFIDENTIAL 業務に役立つ！ ブラウザデベロッパーツールの 機能紹介と活用例 井内将俊 LC開発部 VCグロースグループ 2024/12/29(金) teamLab×DMM tech meetup ~frontend~

Slide 2

Slide 2 text

© DMM 自己紹介 2 井内 将俊 (いうち まさとし) 合同会社DMM.com 23新卒 ライブコミュニケーション開発部 X(旧Twitter) @pengin_engineer 趣味：同人誌を描いたり 入社の決め手 →趣味の同人活動の話をしやすそう！

Slide 3

Slide 3 text

© DMM 開発プロダクト紹介 バーチャルな ライブコミュニケーションサービスを開発 3

Slide 4

Slide 4 text

© DMM 開発プロダクト紹介 4 Live2Dキャラクターの表示速度改善で 
 学んだ高速化のポイント バーチャルな ライブコミュニケーションサービスを開発

Slide 5

Slide 5 text

© DMM 今日の話 5 ここの話

Slide 6

Slide 6 text

© DMM みなさん デベロッパーツール 活用してますか？？

Slide 7

Slide 7 text

© DMM 私は少し前 (特に学生時代 ) は活用できていなかった ...

Slide 8

Slide 8 text

© DMM 業務で頻繁に 使っている機能を紹介！ SNSで便利機能をシェアしましょ〜！ #teamlab_dmm

Slide 9

Slide 9 text

© DMM 今回はGoogleChrome に限定🙏 公式ドキュメント：https://developer.chrome.com/

Slide 10

Slide 10 text

© DMM BEとの繋ぎこみ！ ~ネットワークタブ周辺 ~

Slide 11

Slide 11 text

© DMM ネットワークタブ 11

Slide 12

Slide 12 text

© DMM ネットワークタブ 12 どのタイミングで

Slide 13

Slide 13 text

© DMM ネットワークタブ 13 どのタイミングで どんな内容が

Slide 14

Slide 14 text

© DMM ネットワークタブ 14 どのタイミングで どこから どんな内容が

Slide 15

Slide 15 text

© DMM ネットワークタブ 15 どのタイミングで どこから どんな内容が APIの繋ぎ込み実装で とても便利！

Slide 16

Slide 16 text

© DMM 16 API実装者とのコミュニケーションにも役立つ

Slide 17

Slide 17 text

© DMM デザイン実装に役立つ！ ~インスペクタモード他 ~

Slide 18

Slide 18 text

© DMM インスペクタモード(セレクトモード) 18 HTML/CSSの構造確 認 - 想定通りに実装で きない場合 👍 - 既存ページの構造 確認👍 ショートカット Win: Command+Shift+C Mac: Ctrl+Shift+C

Slide 19

Slide 19 text

© DMM Elementsタブ 19 要素の親子関係の確 認 隠れた要素の確認 要素が持つスタイルの 確認

Slide 20

Slide 20 text

© DMM Elementsタブ　小技 20 Hキーで要素を隠せる 一時的に消してデバッ グに活用👍

Slide 21

Slide 21 text

© DMM Elementsタブ　小技 21 Deleteキーで要素を 消せる 要素を消して表示を シンプルに 👍

Slide 22

Slide 22 text

© DMM Elementsタブ　小技 22 Deleteキーで要素を 消せる 要素を消して表示をシ ンプルに👍 レイアウト崩れの 原因特定に繋がる

Slide 23

Slide 23 text

© DMM レスポンシブモード 23 縦長のスマホ画面を 再現 途中途中で活用し、 スマホでレイアウトが は ちゃめちゃ 😇 になることを防げる！

Slide 24

Slide 24 text

© DMM Layers機能 24 Mac:Command+Shift+P Win:Ctrl+Shift+P Layersと検索 レイヤーを 3Dで視覚化 - 重ね合わせの確認 - 構造の把握

Slide 25

Slide 25 text

© DMM Full size scrrenshot 25 Mac:Command+Shift+P Win:Ctrl+Shift+P Captureと検索 ページ全体を 1枚の画像 として保存 デザイナーさんとの共有に便利！

Slide 26

Slide 26 text

© DMM パフォーマンス改善 ~パフォーマンスタブ他 ~

Slide 27

Slide 27 text

© DMM パフォーマンスタブ 27

Slide 28

Slide 28 text

© DMM 28 CPU使用状況 パフォーマンスタブ

Slide 29

Slide 29 text

© DMM 29 CPU使用状況 画面構築 パフォーマンスタブ

Slide 30

Slide 30 text

© DMM 30 CPU使用状況 画面構築 ファイル読み込み秒数 パフォーマンスタブ

Slide 31

Slide 31 text

© DMM 31 CPU使用状況 画面構築 ファイル読み込み秒数 Core Web Vitals パフォーマンスタブ

Slide 32

Slide 32 text

© DMM 32 CPU使用状況 画面構築 ファイル読み込み秒数 Core Web Vitals パフォーマンスタブ

Slide 33

Slide 33 text

© DMM パフォーマンスモニター 33 Mac:Command+Shift+P Win:Ctrl+Shift+P Performance monitor と検索 リアルタイムに確認 - CPU利用状況 - JS heap size 等

Slide 34

Slide 34 text

© DMM パフォーマンスモニター 34 Mac:Command+Shift+P Win:Ctrl+Shift+P Performance monitor と検索 リアルタイムに確認 - CPU利用状況 - JS heap size ページ遷移で少し上がり、アニメーションがなく なったので、 CPUを使わなくなった

Slide 35

Slide 35 text

© DMM まとめ デベロッパーツールの活用例 - APIの繋ぎ込み - デザイン実装 - パフォーマンス改善 35 開発業務の大部分で役立つ！

Slide 36

Slide 36 text

© DMM デベロッパーツールを活用して 開発効率を上げよう！