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
41
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
87
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
780
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
160
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
120
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
230
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
900
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
Unity Android XR入門
sakutama_11
0
180
自力でTTSモデルを作った話
zgock999
0
100
Domain-Driven Transformation
hschwentner
2
1.9k
PEPCは何を変えようとしていたのか
ken7253
2
230
はじめての Go * WASM *OCR
sgash708
1
100
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
250
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
270
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.6k
楽しく向き合う例外対応
okutsu
0
660
Jasprが凄い話
hyshu
0
160
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
200
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Git: the NoSQL Database
bkeepers
PRO
427
65k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Raft: Consensus for Rubyists
vanstee
137
6.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Docker and Python
trallard
44
3.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
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