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

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
33
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
35
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
41
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
65
13725f35541aa680ed5f85d16b85947a?s=48 tacck
1
410
13725f35541aa680ed5f85d16b85947a?s=48 tacck
1
85
13725f35541aa680ed5f85d16b85947a?s=48 tacck
1
120
13725f35541aa680ed5f85d16b85947a?s=48 tacck
1
100
13725f35541aa680ed5f85d16b85947a?s=48 tacck
1
68

Other Decks in Technology

See All in Technology
34d5dd227dad6526e026f43b42b269b6?s=48 kekeke_47
0
400
120b74af626c2b23f954926ef68ac5d6?s=48 papix
0
200
79c9f45e8a3cd4bfa9d7292adb3a6dc0?s=48 kraj
0
3.2k
966e29b84ae7dbde170f66b0bc75b7a6?s=48 ishiayaya
PRO
0
350
405fe9ab689473f267e2cfbd95f78c75?s=48 kyonmm
1
2.3k
3487ed46845ad0c09d36c3c1c0533ea6?s=48 masakick
0
130
7fccfb690a818ed2f3a15fc21d426d5a?s=48 texmeijin
1
340
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
1.6k
35f1e35d8c02c612e281c6c7a9d22341?s=48 hirosys
0
150
79fc33e55cacc42beef647541de24d58?s=48 yasuakiomokawa
0
380
4b7536b1ad854fa552a2cea0248bb5cc?s=48 hisaichi5518
0
170
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
170

Featured

See All Featured
A9704266587836f7e784235e5073b93e?s=48 jmmastey
9
540
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
294
39k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
295
27k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
192
8.6k
79acae287842acf29084005533a7fb3b?s=48 hursman
106
9.2k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
652
110k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
71
260k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
308
17k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
155
11k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
478
150k
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
338
16k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k

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