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.4k
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
23
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
79
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
720
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
150
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
100
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
230
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
870
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
SFCで挑戦するFunctional Component/Functional Component Challenge at SFC
fruitriin
3
1.5k
Other Decks in Programming
See All in Programming
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
200
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
230
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
230
CSC509 Lecture 11
javiergs
PRO
0
180
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
CSC509 Lecture 09
javiergs
PRO
0
140
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.7k
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Visualization
eitanlees
145
15k
A better future with KSS
kneath
238
17k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Why Our Code Smells
bkeepers
PRO
334
57k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Done Done
chrislema
181
16k
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