Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Chrome DevTool s ͍͜ͳ͍ͨ͠ ՌϦϯ גࣜձࣾελσΟετ 2022/02/02 Studist Lightning Talks #46
Slide 2
Slide 2 text
ࣗݾհ • Vue.js͕͖ • Լखͷԣ͖આ͋Δ • ͘͠શʹཧղͨ͠ͱ φχϞϫΧϥφΠͷڱؒ
Slide 3
Slide 3 text
DevTools͍͜ͳ͍ͨ͠ ಛʹ໘നΈͷͳ͍εϥΠυ
Slide 4
Slide 4 text
Tips • ࠓͷDevToolsຊޠԽͰ͖Δͧʂ
Slide 5
Slide 5 text
• Perfomance • Element • Console • Sorce
Slide 6
Slide 6 text
Performanceλϒ • هதͷ͕ͱΕΔ
Slide 7
Slide 7 text
͜Μͳײ͡
Slide 8
Slide 8 text
͜ͷลΛ͛Δ
Slide 9
Slide 9 text
͔͔ͬͯΔ࣌ؒ
Slide 10
Slide 10 text
ԿΛࢦͯ͠վળ͍͖͔ͯ͘͠ • ࡉ͔͘ௐ͢ͱΓ͕ͳ͍ • Webϑϩϯτతʹ60FPSΛࢦ͢ͷ͕Αͦ͞͏ • Ϣʔβʔͷૢ࡞ʹରͯ͠100msͰԿΒ͔ͷϦΞΫγϣϯ͕͋Δ ͱຬײ͋Δ • 1000ms ͑͜ΔͳΒ͙Δ͙Δ͢Δͱ͔
Slide 11
Slide 11 text
ͳΜ͔͍ͳʁͱࢥͬͨΒ PerformanceλϒΛݟͯΈΑ͏
Slide 12
Slide 12 text
͓͢͢Ίຊ
Slide 13
Slide 13 text
Elementλϒ HTML Style
Slide 14
Slide 14 text
Element HTML
Slide 15
Slide 15 text
Cmd+C, VͰίϐϖ DelͰআ μϒϧΫϦοΫͰฤू
Slide 16
Slide 16 text
Cmd+C, VͰίϐϖ DelͰআ μϒϧΫϦοΫͰฤू
Slide 17
Slide 17 text
λάͷߏ͍͡Γ͍ͨͱ͖ HTMLͱͯ͠ฤू
Slide 18
Slide 18 text
Element HTML Style
Slide 19
Slide 19 text
Element HTML Style
Slide 20
Slide 20 text
બதͷElementͷ style λάͱͯ͠ࢦఆ
Slide 21
Slide 21 text
બதͷElementͷ style λάͱͯ͠ࢦఆ ৽͍͠ελΠϧͷઃఆɺআ
Slide 22
Slide 22 text
બதͷElementͷ style λάͱͯ͠ࢦఆ ৽͍͠ελΠϧͷઃఆɺআ
Slide 23
Slide 23 text
ϚεϗΠʔϧ ΩʔϘʔυͰΓସ͑ΒΕΔ
Slide 24
Slide 24 text
ίʔυ͍ͬͯ͡ίϯύΠϧ →ϒϥβΛݟΔΑΓ ϒϥβ্Ͱฤूͯ֬͠ೝ →ίʔυʹөͷ΄͏͕ૣ͍
Slide 25
Slide 25 text
ελΠϧͷద༻༏ઌ
Slide 26
Slide 26 text
hoverঢ়ଶͰݻఆ͍ͨ͠ͱ͖ ։͘
Slide 27
Slide 27 text
% ࢦఆͱ͔ px ͰͰΔ ܭࢉࡁΈ Computed #FFF -> rgb(255, 255, 255) ʮ͜͜ʹͳ͔ͬͨΒͳ͍Ͱ͢Ͷʯ
Slide 28
Slide 28 text
͖ͨͷͰElement͜͜·Ͱ
Slide 29
Slide 29 text
ConsoleͱSource
Slide 30
Slide 30 text
debugger • ιʔείʔυʹ debugger ΛࠐΉͱ DevToolsΛ։͍͍ͯΕͦ͜Ͱࢭ·Δ
Slide 31
Slide 31 text
ιʔελϒʹͳΔ ϒϨʔΫϙΠϯτࠐ·ͳͯ͘Α͍
Slide 32
Slide 32 text
breakpoint Ͱࢭ·ͬͯΔ࠷தͷconsoleͦͷείʔϓ
Slide 33
Slide 33 text
͓͢͢Ίهࣄ • $_, $1, $(), $$(),ͱ͔͓͠Ζ͍Α • Chrome DevTools Console Ͱ͑ΔศརͳίϚϯυ https://zenn.dev/lollipop_onl/articles/eoz-devtools-console- commands