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.3k
Chrome Devtools使いこなしたい/I want to master devtool
みんなの技教えて
果物リン
February 02, 2022
Tweet
Share
More Decks by 果物リン
See All by 果物リン
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
59
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
570
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
140
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
72
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
210
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
800
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
330
SFCで挑戦するFunctional Component/Functional Component Challenge at SFC
fruitriin
3
1.4k
[社内LT]元窓使いで林檎教信者ですが窓使いに転生します/I'm an ex-windowman, a follower of the apple cult, but I'm turning into a windowman.
fruitriin
0
290
Other Decks in Programming
See All in Programming
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.3k
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
1
110
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
390
Elm Form Validation
bkuhlmann
0
510
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
430
ONE WEDGE_company_guide
1wedge_one
0
480
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
380
Git Lint
bkuhlmann
4
750
GitHub Copilotのススメ
marcy731
1
200
Polars入門
daikikatsuragawa
1
100
Featured
See All Featured
Navigating Team Friction
lara
178
13k
What the flash - Photography Introduction
edds
64
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Bash Introduction
62gerente
604
210k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
The Language of Interfaces
destraynor
151
23k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
The Pragmatic Product Professional
lauravandoore
25
5.8k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
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