Tweet
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