Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

69b4dadef85efe143ac825b62d36ed7c?s=47 果物リン
February 02, 2022

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

みんなの技教えて

69b4dadef85efe143ac825b62d36ed7c?s=128

果物リン

February 02, 2022
Tweet

More Decks by 果物リン

Other Decks in Programming

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