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
430
業務に役立つ! ブラウザデベロッパーツールの機能紹介と活用例
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.8k
Next.js 採用の説得材料を考える
iuchimasatoshi
0
130
新卒研修でNext.js AppRouterを導入した 学びと反省
iuchimasatoshi
3
2.3k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
How STYLIGHT went responsive
nonsquared
100
5.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Writing Fast Ruby
sferik
629
62k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
RailsConf 2023
tenderlove
30
1.3k
4 Signs Your Business is Dying
shpigford
185
22k
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 デベロッパーツールを活用して 開発効率を上げよう!