Chrome Devtools使いこなしたい/I want to master devtool

みんなの技教えて

Transcript

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