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

デバッガ機能の簡単な説明と、Visual Studio Codeのデバッガ機能を使う導入。
デモにて、ブレークポイントを実際に使うところを解説。

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. தڃऀΛ໨ࢦ͢ͱ͸
   

   View Slide

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

   View Slide

6. View Slide

7. ॳ৺ऀ͔Βதڃऀ΁
   • ϓϩμΫτΛ࡞Γ࢝ΊΔͱɺ

   Ұؾʹ೉͘͠ͳΔɻɻɻ
   • ΍Βͳ͖Ό͍͚ͳ͍͜ͱɺؾʹ͠ͳ͖Ό͍͚
   ͳ͍͜ͱ͕ɺ్୺ʹଟ͘ͳͬͯ͘Δɻ
   • ʮ੍໿ʯˠ QCDS
   

   View Slide

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

   View Slide

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

   View Slide

10. ॳ৺ऀ͔Βதڃऀ΁
    • ·ͣ͸ʮޮ཰Α͘ʯ։ൃͰ͖ΔΑ͏ʹͳΓ·
    ͠ΐ͏ɻ
    • ޮ཰Α͘ = ͍͔ʹ଎͘ʮ࡞ۀ׬ྃʯʹͰ͖Δ
    ͔ɻ
    • ଎͘Ͱ͖Ε͹༨༟͕Ͱ͖ΔͷͰɺԿΛ͢Δʹ
    ͯ͠΋΍Γ΍͘͢ͳΔɻ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. σόοΨͱ͸
    

    View Slide

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

    ~ WikipediaΑΓ (2019/01/14 12:48)
    

    View Slide

16. ΋ͬͱ·ͱΊΔ
    • σόοΨͱ͸ɺ

    ʮ࣮ߦதͷϓϩάϥϜʯʹର͠

    ʮ్தͷঢ়ଶʯΛ

    ʮ͍͍ײ͡ʹڭ͑ͯ͘ΕΔʯ΍ͭɻ
    

    View Slide

17. ͍͍ͩͨԿ͕Ͱ͖Δ͔
    • ϒϨʔΫϙΠϯτ

    ˠ Ұ࣌ఀࢭ
    • εςοϓ࣮ߦ

    ˠ ίϚૹΓ
    • εςοϓΠϯ

    /εςοϓΞ΢τ

    ˠ ζʔϜΠϯ

    ɹ/ζʔϜΞ΢τ
    • ม਺֬ೝ

    ˠ ৄࡉ֬ೝ
    

    View Slide

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

    View Slide

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

    View Slide

20. ֦ுػೳ:

    Debugger for Chrome
    

    View Slide

21. ࢖ͬͯΈΔ
    • σϞ
    

    View Slide

22. ·ͱΊ
    

    View Slide

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

    View Slide

24. ·ͱΊ
    • Visual Studio CodeؚΊͯɺ࠷ۙͷΤσΟλ΍
    IDEʹ͸σόοΨͷػೳ͕͋Δɻ
    • σόοΨΛ࢖͏ͱɺ

    ؆୯ʹʮࢼ͢ʯ͜ͱ͕Ͱ͖Δɻ
    • ࠓ೔͔Β࢖ͬͯΈΑ͏!
    

    View Slide

25. end
    

    View Slide