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
Chrome Devtools使いこなしたい/I want to master devtool
Search
果物リン
February 02, 2022
Programming
3
1.5k
Chrome Devtools使いこなしたい/I want to master devtool
みんなの技教えて
果物リン
February 02, 2022
Tweet
Share
More Decks by 果物リン
See All by 果物リン
Electron+Vue+Swift=真のデスクトップアプリ / How to create "Really" desktop app using Electron
fruitriin
0
72
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
120
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
860
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
170
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
140
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
240
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
930
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
360
SFCで挑戦するFunctional Component/Functional Component Challenge at SFC
fruitriin
3
1.6k
Other Decks in Programming
See All in Programming
AI Ramen Fight
yusukebe
0
120
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
10
1.5k
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
250
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
320
NEWT Backend Evolution
xpromx
1
170
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
430
iOS開発スターターキットの作り方
akidon0000
0
230
What's new in Adaptive Android development
fornewid
0
130
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
4
2.4k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
36
11k
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
280
decksh - a little language for decks
ajstarks
4
21k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
The Invisible Side of Design
smashingmag
301
51k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Become a Pro
speakerdeck
PRO
29
5.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Music & Morning Musume
bryan
46
6.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
750
Visualization
eitanlees
146
16k
Thoughts on Productivity
jonyablonski
69
4.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Transcript
Chrome DevTool s ͍͜ͳ͍ͨ͠ ՌϦϯ גࣜձࣾελσΟετ 2022/02/02 Studist Lightning Talks
#46
ࣗݾհ • Vue.js͕͖ • Լखͷԣ͖આ͋Δ • ͘͠શʹཧղͨ͠ͱ φχϞϫΧϥφΠͷڱؒ
DevTools͍͜ͳ͍ͨ͠ ಛʹ໘നΈͷͳ͍εϥΠυ
Tips • ࠓͷDevToolsຊޠԽͰ͖Δͧʂ
• Perfomance • Element • Console • Sorce
Performanceλϒ • هதͷ͕ͱΕΔ
͜Μͳײ͡
͜ͷลΛ͛Δ
͔͔ͬͯΔ࣌ؒ
ԿΛࢦͯ͠վળ͍͖͔ͯ͘͠ • ࡉ͔͘ௐ͢ͱΓ͕ͳ͍ • Webϑϩϯτతʹ60FPSΛࢦ͢ͷ͕Αͦ͞͏ • Ϣʔβʔͷૢ࡞ʹରͯ͠100msͰԿΒ͔ͷϦΞΫγϣϯ͕͋Δ ͱຬײ͋Δ • 1000ms
͑͜ΔͳΒ͙Δ͙Δ͢Δͱ͔
ͳΜ͔͍ͳʁͱࢥͬͨΒ PerformanceλϒΛݟͯΈΑ͏
͓͢͢Ίຊ
Elementλϒ HTML Style
Element HTML
Cmd+C, VͰίϐϖ DelͰআ μϒϧΫϦοΫͰฤू
Cmd+C, VͰίϐϖ DelͰআ μϒϧΫϦοΫͰฤू
λάͷߏ͍͡Γ͍ͨͱ͖ HTMLͱͯ͠ฤू
Element HTML Style
Element HTML Style
બதͷElementͷ style λάͱͯ͠ࢦఆ
બதͷElementͷ style λάͱͯ͠ࢦఆ ৽͍͠ελΠϧͷઃఆɺআ
બதͷElementͷ style λάͱͯ͠ࢦఆ ৽͍͠ελΠϧͷઃఆɺআ
ϚεϗΠʔϧ ΩʔϘʔυͰΓସ͑ΒΕΔ
ίʔυ͍ͬͯ͡ίϯύΠϧ →ϒϥβΛݟΔΑΓ ϒϥβ্Ͱฤूͯ֬͠ೝ →ίʔυʹөͷ΄͏͕ૣ͍
ελΠϧͷద༻༏ઌ
hoverঢ়ଶͰݻఆ͍ͨ͠ͱ͖ ։͘
% ࢦఆͱ͔ px ͰͰΔ ܭࢉࡁΈ Computed #FFF -> rgb(255,
255, 255) ʮ͜͜ʹͳ͔ͬͨΒͳ͍Ͱ͢Ͷʯ
͖ͨͷͰElement͜͜·Ͱ
ConsoleͱSource
debugger • ιʔείʔυʹ debugger ΛࠐΉͱ DevToolsΛ։͍͍ͯΕͦ͜Ͱࢭ·Δ
ιʔελϒʹͳΔ ϒϨʔΫϙΠϯτࠐ·ͳͯ͘Α͍
breakpoint Ͱࢭ·ͬͯΔ࠷தͷconsoleͦͷείʔϓ
͓͢͢Ίهࣄ • $_, $1, $(), $$(),ͱ͔͓͠Ζ͍Α • Chrome DevTools Console
Ͱ͑ΔศརͳίϚϯυ https://zenn.dev/lollipop_onl/articles/eoz-devtools-console- commands