Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
VS Codeでデバッグしよう JavaScript編
Kihara, Takuya
January 19, 2019
Technology
1
1.1k
VS Codeでデバッグしよう JavaScript編
デバッガ機能の簡単な説明と、Visual Studio Codeのデバッガ機能を使う導入。
デモにて、ブレークポイントを実際に使うところを解説。
Kihara, Takuya
January 19, 2019
Tweet
Share
More Decks by Kihara, Takuya
See All by Kihara, Takuya
tacck
0
33
tacck
0
35
tacck
0
41
tacck
0
65
tacck
1
410
tacck
1
85
tacck
1
120
tacck
1
100
tacck
1
68
Other Decks in Technology
See All in Technology
kekeke_47
0
400
papix
0
200
kraj
0
3.2k
ishiayaya
PRO
0
350
kyonmm
1
2.3k
masakick
0
130
texmeijin
1
340
opdavies
0
1.6k
hirosys
0
150
yasuakiomokawa
0
380
hisaichi5518
0
170
clustervr
0
170
Featured
See All Featured
jmmastey
9
540
kneath
294
39k
deanohume
295
27k
malarkey
192
8.6k
hursman
106
9.2k
pedronauck
652
110k
cherdarchuk
71
260k
caitiem20
308
17k
rocio
155
11k
imathis
478
150k
wjessup
338
16k
bryan
100
11k
Transcript
VS CodeͰσόοά͠Α͏ 2019/01/19 tacck JavaScript編 ゆるWeb勉強会@札幌#3
୭ UBDDL ໊લ ࡶͳϑϧελοΫΤϯδχΞ ͓ࣄ εϓϨουɾΠʔάϧ ͖ͳϑΟΪϡΞεέʔτͷٕ
ࠓ͓͢͠Δ͜ͱ • தڃऀΛࢦ͢ͱ • σόοΨͱ • Visual Studio CodeͷσόοΨΛͬͯΈΔ
தڃऀΛࢦ͢ͱ
ॳ৺ऀ͔Βதڃऀ • ୭͕ॳ৺ऀ͔Βελʔτɻ • ͍͔ͭΒ࣍ͷεςοϓʹਐΊΔͷͩΖ͏͔?
None
ॳ৺ऀ͔Βதڃऀ • ϓϩμΫτΛ࡞Γ࢝ΊΔͱɺ Ұؾʹ͘͠ͳΔɻɻɻ • Βͳ͖Ό͍͚ͳ͍͜ͱɺؾʹ͠ͳ͖Ό͍͚ ͳ͍͜ͱ͕ɺ్ʹଟ͘ͳͬͯ͘Δɻ • ʮ੍ʯˠ QCDS
QCDS 2VBMJUZ ࣭ $PTU ՁɾՁ֨ ਓతίετɾ֎෦αʔϏεར༻ %FMJWFSZ ೲظ 4DPQF ػೳ
QCDS • ࣄͷՌʮ੍ʯͷதͰୡ͠ͳ͚Ε ͍͚ͳ͍ɻ • ͱ͍͑ɺ͍͖ͳΓؾʹ͢Δͷ͍͠ɻɻɻ
ॳ৺ऀ͔Βதڃऀ • ·ͣʮޮΑ͘ʯ։ൃͰ͖ΔΑ͏ʹͳΓ· ͠ΐ͏ɻ • ޮΑ͘ = ͍͔ʹ͘ʮ࡞ۀྃʯʹͰ͖Δ ͔ɻ •
͘Ͱ͖Ε༨༟͕Ͱ͖ΔͷͰɺԿΛ͢Δʹ ͯ͠Γ͘͢ͳΔɻ
ͰίʔσΟϯά͍
ίʔσΟϯά͕͍? • ϙΠϯτೋͭ • ͦͦͲ͏࣮͢Ε͍͍͔Θ͔Βͳ͍ • ࣮ͨͭ͠Γ͚ͩͲ֬ೝʹ͕͔͔࣌ؒΔ
ίʔσΟϯά͕͍? • ϙΠϯτೋͭ • ͦͦͲ͏࣮͢Ε͍͍͔Θ͔Βͳ͍ • ࣮ͨͭ͠Γ͚ͩͲ֬ೝʹ͕͔͔࣌ؒΔ • ֬ೝ͕͘Ͱ͖Εɺ࣮ൺֱతૣ͘ͳΔɻ •
σόοΨΛͬͨ֬ೝΛ͠Α͏
σόοΨͱ
σόοΨͱ • σόοΨʢDebuggerʣͱɺσόοάΛࢧ ԉ͢ΔϓϩάϥϜͷ͜ͱɻରతʹར༻ऀ ͕ϓϩάϥϜΛಈ࡞ͤͨ͞ΓɺϓϩάϥϜ ͕͍ͬͯΔมΛදࣔͤ͞Δػೳ͕͋ ΔɻۙͰ౷߹։ൃڥʹؚ·Ε͍ͯΔ ͜ͱ͕ଟ͍ɻ ~ WikipediaΑΓ
(2019/01/14 12:48)
ͬͱ·ͱΊΔ • σόοΨͱɺ ʮ࣮ߦதͷϓϩάϥϜʯʹର͠ ʮ్தͷঢ়ଶʯΛ ʮ͍͍ײ͡ʹڭ͑ͯ͘ΕΔʯͭɻ
͍͍ͩͨԿ͕Ͱ͖Δ͔ • ϒϨʔΫϙΠϯτ ˠ Ұ࣌ఀࢭ • εςοϓ࣮ߦ ˠ ίϚૹΓ •
εςοϓΠϯ /εςοϓΞτ ˠ ζʔϜΠϯ ɹ/ζʔϜΞτ • ม֬ೝ ˠ ৄࡉ֬ೝ
Visual Studio Codeͷ σόοΨΛͬͯΈΔ
ͬͯΈΔ • VSCodeىಈ • VSCodeܦ༝Ͱϒϥβىಈ • ϒϨʔΫϙΠϯτͰঢ়ଶ֬ೝ • ݟ͍͚ͨ࣌ͩϒϨʔΫϙΠϯτΛ༗ޮʹ
֦ுػೳ: Debugger for Chrome
ͬͯΈΔ • σϞ
·ͱΊ
·ͱΊ • ʮҰൃͰ࠷ߴͷίʔυΛॻ͘ʯͷୡਓͰ ͍͠ɻ • গ͠ॻ͍ͯσόοΨͰ֬ೝɻ • ͘ಈ͔ͯ֬͘͠ೝ͢Δ͜ͱ͕ɺ্ୡ ͷۙಓͰ͢ɻ
·ͱΊ • Visual Studio CodeؚΊͯɺ࠷ۙͷΤσΟλ IDEʹσόοΨͷػೳ͕͋Δɻ • σόοΨΛ͏ͱɺ ؆୯ʹʮࢼ͢ʯ͜ͱ͕Ͱ͖Δɻ •
ࠓ͔ΒͬͯΈΑ͏!
end