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
350
業務に役立つ! ブラウザデベロッパーツールの機能紹介と活用例
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.7k
Next.js 採用の説得材料を考える
iuchimasatoshi
0
130
新卒研修でNext.js AppRouterを導入した 学びと反省
iuchimasatoshi
3
2.2k
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Writing Fast Ruby
sferik
628
61k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Fireside Chat
paigeccino
37
3.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Why Our Code Smells
bkeepers
PRO
337
57k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
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 デベロッパーツールを活用して 開発効率を上げよう!