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
68
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
120
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
850
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
920
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.6k
Other Decks in Programming
See All in Programming
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
120
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
Hack Claude Code with Claude Code
choplin
4
2k
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Featured
See All Featured
It's Worth the Effort
3n
185
28k
We Have a Design System, Now What?
morganepeng
53
7.7k
Visualization
eitanlees
146
16k
GraphQLとの向き合い方2022年版
quramy
49
14k
A better future with KSS
kneath
238
17k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Site-Speed That Sticks
csswizardry
10
690
Designing Experiences People Love
moore
142
24k
Facilitating Awesome Meetings
lara
54
6.4k
GitHub's CSS Performance
jonrohan
1031
460k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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