Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
業務に役立つ! ブラウザデベロッパーツールの機能紹介と活用例
Search
井内 将俊
December 20, 2024
0
250
業務に役立つ! ブラウザデベロッパーツールの機能紹介と活用例
2024/12/20日に行われた、teamLabさんとDMMの合同イベントでのLT資料です!
https://connpass.com/event/333153/
井内 将俊
December 20, 2024
Tweet
Share
More Decks by 井内 将俊
See All by 井内 将俊
ReactメインのチームにNext.jsを導入した道のり
iuchimasatoshi
1
2.6k
Next.js 採用の説得材料を考える
iuchimasatoshi
0
110
新卒研修でNext.js AppRouterを導入した 学びと反省
iuchimasatoshi
3
2k
Featured
See All Featured
Producing Creativity
orderedlist
PRO
343
39k
Documentation Writing (for coders)
carmenintech
67
4.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
What's in a price? How to price your products and services
michaelherold
244
12k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Automating Front-end Workflow
addyosmani
1367
200k
Visualization
eitanlees
146
15k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
How to train your dragon (web standard)
notwaldorf
89
5.8k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Transcript
© DMM © DMM CONFIDENTIAL 業務に役立つ! ブラウザデベロッパーツールの 機能紹介と活用例 井内将俊 LC開発部
VCグロースグループ 2024/12/29(金) teamLab×DMM tech meetup ~frontend~
© DMM 自己紹介 2 井内 将俊 (いうち まさとし) 合同会社DMM.com 23新卒
ライブコミュニケーション開発部 X(旧Twitter) @pengin_engineer 趣味:同人誌を描いたり 入社の決め手 →趣味の同人活動の話をしやすそう!
© DMM 開発プロダクト紹介 バーチャルな ライブコミュニケーションサービスを開発 3
© DMM 開発プロダクト紹介 4 Live2Dキャラクターの表示速度改善で 学んだ高速化のポイント バーチャルな ライブコミュニケーションサービスを開発
© DMM 今日の話 5 ここの話
© DMM みなさん デベロッパーツール 活用してますか??
© DMM 私は少し前 (特に学生時代 ) は活用できていなかった ...
© DMM 業務で頻繁に 使っている機能を紹介! SNSで便利機能をシェアしましょ〜! #teamlab_dmm
© DMM 今回はGoogleChrome に限定🙏 公式ドキュメント:https://developer.chrome.com/
© DMM BEとの繋ぎこみ! ~ネットワークタブ周辺 ~
© DMM ネットワークタブ 11
© DMM ネットワークタブ 12 どのタイミングで
© DMM ネットワークタブ 13 どのタイミングで どんな内容が
© DMM ネットワークタブ 14 どのタイミングで どこから どんな内容が
© DMM ネットワークタブ 15 どのタイミングで どこから どんな内容が APIの繋ぎ込み実装で とても便利!
© DMM 16 API実装者とのコミュニケーションにも役立つ
© DMM デザイン実装に役立つ! ~インスペクタモード他 ~
© DMM インスペクタモード(セレクトモード) 18 HTML/CSSの構造確 認 - 想定通りに実装で きない場合 👍
- 既存ページの構造 確認👍 ショートカット Win: Command+Shift+C Mac: Ctrl+Shift+C
© DMM Elementsタブ 19 要素の親子関係の確 認 隠れた要素の確認 要素が持つスタイルの 確認
© DMM Elementsタブ 小技 20 Hキーで要素を隠せる 一時的に消してデバッ グに活用👍
© DMM Elementsタブ 小技 21 Deleteキーで要素を 消せる 要素を消して表示を シンプルに 👍
© DMM Elementsタブ 小技 22 Deleteキーで要素を 消せる 要素を消して表示をシ ンプルに👍 レイアウト崩れの 原因特定に繋がる
© DMM レスポンシブモード 23 縦長のスマホ画面を 再現 途中途中で活用し、 スマホでレイアウトが は ちゃめちゃ
😇 になることを防げる!
© DMM Layers機能 24 Mac:Command+Shift+P Win:Ctrl+Shift+P Layersと検索 レイヤーを 3Dで視覚化 -
重ね合わせの確認 - 構造の把握
© DMM Full size scrrenshot 25 Mac:Command+Shift+P Win:Ctrl+Shift+P Captureと検索 ページ全体を
1枚の画像 として保存 デザイナーさんとの共有に便利!
© DMM パフォーマンス改善 ~パフォーマンスタブ他 ~
© DMM パフォーマンスタブ 27
© DMM 28 CPU使用状況 パフォーマンスタブ
© DMM 29 CPU使用状況 画面構築 パフォーマンスタブ
© DMM 30 CPU使用状況 画面構築 ファイル読み込み秒数 パフォーマンスタブ
© DMM 31 CPU使用状況 画面構築 ファイル読み込み秒数 Core Web Vitals パフォーマンスタブ
© DMM 32 CPU使用状況 画面構築 ファイル読み込み秒数 Core Web Vitals パフォーマンスタブ
© DMM パフォーマンスモニター 33 Mac:Command+Shift+P Win:Ctrl+Shift+P Performance monitor と検索 リアルタイムに確認
- CPU利用状況 - JS heap size 等
© DMM パフォーマンスモニター 34 Mac:Command+Shift+P Win:Ctrl+Shift+P Performance monitor と検索 リアルタイムに確認
- CPU利用状況 - JS heap size ページ遷移で少し上がり、アニメーションがなく なったので、 CPUを使わなくなった
© DMM まとめ デベロッパーツールの活用例 - APIの繋ぎ込み - デザイン実装 - パフォーマンス改善
35 開発業務の大部分で役立つ!
© DMM デベロッパーツールを活用して 開発効率を上げよう!