VS Codeでデバッグしよう JavaScript編

Transcript

1. VS CodeͰσόοά͠Α͏ 2019/01/19 tacck JavaScript編 ゆるWeb勉強会@札幌#3

2. ୭ UBDDL
   ໊લ ࡶͳϑϧελοΫΤϯδχΞ
   ͓࢓ࣄ εϓϨουɾΠʔάϧ
   ޷͖ͳϑΟΪϡΞεέʔτͷٕ

3. ࠓ೔͓࿩͢͠Δ͜ͱ • தڃऀΛ໨ࢦ͢ͱ͸ • σόοΨͱ͸ • Visual Studio CodeͷσόοΨΛ࢖ͬͯΈΔ

4. தڃऀΛ໨ࢦ͢ͱ͸

5. ॳ৺ऀ͔Βதڃऀ΁ • ୭΋͕ॳ৺ऀ͔Βελʔτɻ • ͍͔ͭΒ࣍ͷεςοϓʹਐΊΔͷͩΖ͏͔?

6. None

7. ॳ৺ऀ͔Βதڃऀ΁ • ϓϩμΫτΛ࡞Γ࢝ΊΔͱɺ
 Ұؾʹ೉͘͠ͳΔɻɻɻ • ΍Βͳ͖Ό͍͚ͳ͍͜ͱɺؾʹ͠ͳ͖Ό͍͚ ͳ͍͜ͱ͕ɺ్୺ʹଟ͘ͳͬͯ͘Δɻ • ʮ੍໿ʯˠ QCDS

8. QCDS 2VBMJUZ ඼࣭ $PTU
   Ձ஋ɾՁ֨
   ਓతίετɾ֎෦αʔϏεར༻ %FMJWFSZ ೲظ 4DPQF ػೳ

9. QCDS • ࢓ࣄͷ੒Ռ͸ʮ੍໿ʯͷதͰୡ੒͠ͳ͚Ε͹ ͍͚ͳ͍ɻ • ͱ͸͍͑ɺ͍͖ͳΓؾʹ͢Δͷ΋೉͍͠ɻɻɻ

10. ॳ৺ऀ͔Βதڃऀ΁ • ·ͣ͸ʮޮ཰Α͘ʯ։ൃͰ͖ΔΑ͏ʹͳΓ· ͠ΐ͏ɻ • ޮ཰Α͘ = ͍͔ʹ଎͘ʮ࡞ۀ׬ྃʯʹͰ͖Δ ͔ɻ •

    ଎͘Ͱ͖Ε͹༨༟͕Ͱ͖ΔͷͰɺԿΛ͢Δʹ ͯ͠΋΍Γ΍͘͢ͳΔɻ

11. Ͱ΋ίʔσΟϯά஗͍

12. ίʔσΟϯά͕஗͍? • ϙΠϯτ͸ೋͭ • ͦ΋ͦ΋Ͳ͏࣮૷͢Ε͹͍͍͔Θ͔Βͳ͍ • ࣮૷ͨͭ͠΋Γ͚ͩͲ֬ೝʹ͕͔͔࣌ؒΔ

13. ίʔσΟϯά͕஗͍? • ϙΠϯτ͸ೋͭ • ͦ΋ͦ΋Ͳ͏࣮૷͢Ε͹͍͍͔Θ͔Βͳ͍ • ࣮૷ͨͭ͠΋Γ͚ͩͲ֬ೝʹ͕͔͔࣌ؒΔ • ֬ೝ͕଎͘Ͱ͖Ε͹ɺ࣮૷΋ൺֱతૣ͘ͳΔɻ •

    σόοΨΛ࢖ͬͨ֬ೝΛ͠Α͏

14. σόοΨͱ͸

15. σόοΨͱ͸ • σόοΨʢDebuggerʣͱ͸ɺσόοάΛࢧ ԉ͢ΔϓϩάϥϜͷ͜ͱɻର࿩తʹར༻ऀ ͕ϓϩάϥϜΛಈ࡞ͤͨ͞ΓɺϓϩάϥϜ ͕࢖͍ͬͯΔม਺౳Λදࣔͤ͞Δػೳ͕͋ Δɻۙ೥Ͱ͸౷߹։ൃ؀ڥʹؚ·Ε͍ͯΔ ͜ͱ͕ଟ͍ɻ
 ~ WikipediaΑΓ

    (2019/01/14 12:48)

16. ΋ͬͱ·ͱΊΔ • σόοΨͱ͸ɺ
 ʮ࣮ߦதͷϓϩάϥϜʯʹର͠
 ʮ్தͷঢ়ଶʯΛ
 ʮ͍͍ײ͡ʹڭ͑ͯ͘ΕΔʯ΍ͭɻ

17. ͍͍ͩͨԿ͕Ͱ͖Δ͔ • ϒϨʔΫϙΠϯτ
 ˠ Ұ࣌ఀࢭ • εςοϓ࣮ߦ
 ˠ ίϚૹΓ •

    εςοϓΠϯ
 /εςοϓΞ΢τ
 ˠ ζʔϜΠϯ
 ɹ/ζʔϜΞ΢τ • ม਺֬ೝ
 ˠ ৄࡉ֬ೝ

18. Visual Studio Codeͷ σόοΨΛ࢖ͬͯΈΔ

19. ࢖ͬͯΈΔ • VSCodeىಈ • VSCodeܦ༝Ͱϒϥ΢βىಈ • ϒϨʔΫϙΠϯτͰঢ়ଶ֬ೝ • ݟ͍͚ͨ࣌ͩϒϨʔΫϙΠϯτΛ༗ޮʹ

20. ֦ுػೳ:
 Debugger for Chrome

21. ࢖ͬͯΈΔ • σϞ

22. ·ͱΊ

23. ·ͱΊ • ʮҰൃͰ࠷ߴͷίʔυΛॻ͘ʯͷ͸ୡਓͰ΋ ೉͍͠ɻ • গ͠ॻ͍ͯσόοΨͰ֬ೝɻ • ଎͘ಈ͔ͯ͠଎֬͘ೝ͢Δ͜ͱ͕ɺ্ୡ΁ ͷۙಓͰ͢ɻ

24. ·ͱΊ • Visual Studio CodeؚΊͯɺ࠷ۙͷΤσΟλ΍ IDEʹ͸σόοΨͷػೳ͕͋Δɻ • σόοΨΛ࢖͏ͱɺ
 ؆୯ʹʮࢼ͢ʯ͜ͱ͕Ͱ͖Δɻ •

    ࠓ೔͔Β࢖ͬͯΈΑ͏!

25. end