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

13725f35541aa680ed5f85d16b85947a?s=47 Kihara, Takuya
January 19, 2019
Technology
1
1.1k

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

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

13725f35541aa680ed5f85d16b85947a?s=128

Kihara, Takuya

January 19, 2019
Tweet

More Decks by Kihara, Takuya

See All by Kihara, Takuya
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
940
13725f35541aa680ed5f85d16b85947a?s=48 tacck
2
190
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
85
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
95
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
150
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
100
13725f35541aa680ed5f85d16b85947a?s=48 tacck
2
1.6k
13725f35541aa680ed5f85d16b85947a?s=48 tacck
1
370
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
140

Other Decks in Technology

See All in Technology
5919537a0ecfa5d4dea704cf878ae90e?s=48 toshimaru
28
10k
24606216ae4bbee28494552cb71cc220?s=48 yosshi_
12
2.6k
231dbe4867c139c325b61e808b757750?s=48 kotatsu360
0
120
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
2
210
B1cc148711c6a37a5c922b6e72a4ad52?s=48 upura
1
840
20451295e0cb4dce2b2805b2a61cd92d?s=48 tnk4on
6
650
88964b936e864ca7d326272eaa70fa9a?s=48 hgsgtk
0
1.3k
93cee2893801a424aab6ce248d88b515?s=48 shimizukaz
0
160
0251532f4fb413ea1a026efe6eb16b87?s=48 stajima
0
190
A4d1023b1de7890c67a083d14573882d?s=48 ktgrstsh
0
180
84cf8e2803e8ee2f48a2db6493eb749f?s=48 takanariko
5
390
92e7a56a50535ef4c51c112c71d3f9c1?s=48 jkubota
0
240

Featured

See All Featured
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
195
9.4k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
60
2.4k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
3
55
9375a9529679f1b42b567a640d775e7d?s=48 schacon
144
6.4k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
189
8.2k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
497
36k
11c84dff30266b907714802088852677?s=48 jasonvnalue
80
7.8k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
51
1.8k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
144
11k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
8.6k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
314
18k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
202
35k

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