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
1
80
13725f35541aa680ed5f85d16b85947a?s=48 tacck
1
50
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
9
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
970
13725f35541aa680ed5f85d16b85947a?s=48 tacck
2
190
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
89
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
110
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
190
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
110

Other Decks in Technology

See All in Technology
C636093440dd4a8be6416e83cb980979?s=48 iselegant
13
2.4k
0d29d155ce5c5a93ed46363626da3ea7?s=48 ocise
1
1.9k
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
0
420
2564c99f616f1ecfc0f617a6fe87e2a9?s=48 penguin045
0
150
1def12864e30f8ea1a4d3bdd67cbb124?s=48 pitan
2
720
A97eee01397705443a72a48ce29d3e19?s=48 cybozuinsideout
0
210
F0ec1a6cb9e7be1911ed97b6561ed5ac?s=48 k1nakayama
0
120
8aba6de431668fc8d09977c0e33c63c1?s=48 jaguar_imo
4
1k
80a3a3857a55f154d23acb705eff72cc?s=48 star_zero
4
350
405fe9ab689473f267e2cfbd95f78c75?s=48 kyonmm
0
1.5k
D5a8875907107294786ee8cba72c7f4c?s=48 torufuru
0
150
5c772b62f1974e9da3a88fbb4ef02696?s=48 hariby
1
100

Featured

See All Featured
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
23
3.7k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1019
370k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
10k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
5
300
B47b288784fda77a94aeb234ca743c24?s=48 keavy
105
14k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
8.7k
79acae287842acf29084005533a7fb3b?s=48 hursman
104
9.1k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
326
35k
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
2
820
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
84
7.7k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
770
190k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
144
12k

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