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.2k

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
「ソフトウェアアーキテクチャの基礎」を読む #ゆるWeb札幌
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
66
ゆるWeb勉強会@札幌 OnLine #19 #ゆるWeb札幌
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
58
AWS Amplify で触れる AWS CDK #jawsug_cdk #jawsug
13725f35541aa680ed5f85d16b85947a?s=48 tacck
1
290
ゆるWeb勉強会@札幌 OnLine #18 #ゆるWeb札幌
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
140
AWS Amplify でホスティングしよう #ゆるWeb札幌
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
83
AWS Amplify と AWS CDK の良い関係 #awsbasics #AWSAmplifyJP
13725f35541aa680ed5f85d16b85947a?s=48 tacck
1
890
ゆるWeb勉強会@札幌 OnLine #17 #ゆるWeb札幌
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
66
Twitter の OAuth 2.0 を使ってみた #ゆるWeb札幌
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
110
ゆるWeb勉強会@札幌 OnLine #16 #ゆるWeb札幌
13725f35541aa680ed5f85d16b85947a?s=48 tacck
0
78

Other Decks in Technology

See All in Technology
2022 COSCUP - GKE Backend Cluster 除雷分享
89f41026db2c96853402524fca4a2ff8?s=48 brentchang
0
120
ECS Fargate+Mackerelにおける監視費用を削減するまでの話
3e77f9dbec6a87756d1dbdddab283aee?s=48 nulabinc
PRO
1
510
ここが好きだよAWS管理ポリシー_devio2022/i_am_iam_lover
325ce6fcd0a74ff78990b8632817da55?s=48 yukihirochiba
0
3.2k
Dangerous attack paths: Modern Development Environment Security - Devices and CI/CD pipelines
Dc03bf56cb3157b6036f9818593d7e40?s=48 rung
PRO
0
170
塩漬けにしているMySQL 8.0.xxをバージョンアップしたくなる、ここ数年でのMySQL 8.0の改善点 / MySQL Update 202208
7fb060398b26ed622d34921bd64e4f5d?s=48 yoshiakiyamasaki
1
730
AWS CLI でやってみる ~ AWS Hands-on for Beginners ECS ハンズオン ~
8785139c395ce2345ce535822b522dde?s=48 kentosuzuki
1
540
サイバー攻撃を想定したクラウドネイティブセキュリティガイドラインとCNAPP及びSecurity Observabilityの未来
D9130a0952480278c7f44527c6989da7?s=48 syoshie
2
1.5k
インフラのテストに VPC Reachability Analyzer は外せないという話
3e77f9dbec6a87756d1dbdddab283aee?s=48 nulabinc
PRO
3
760
PMMやプロダクト関係者と協働するために役割を整理した話 / 20220810_pdmtipslt
Cdf97a1b1b132c56582773c3ba09a3a6?s=48 rakus_dev
0
120
セキュリティ・キャンプ全国大会2022 企業紹介イベント/seccamp2022-nikkei
0e0cf8e93ddd87cf0224ae7f1ed8e46c?s=48 nikkei_engineer_recruiting
0
120
年700万円損するサーバレスの 認可システムをご紹介します！！
Fb0a40e5e7a9dc85520f1646fd41eb44?s=48 higuuu
3
340
CityGMLとFBXの連携で地理空間のエンタメ化
A3990cfe49309642cb8d1f50b617c141?s=48 soh_mitian
0
760

Featured

See All Featured
Building Flexible Design Systems
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
310
34k
Ruby is Unlike a Banana
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
91
9.3k
The Brand Is Dead. Long Live the Brand.
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
46
2.7k
Product Roadmaps are Hard
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
35
6.9k
KATA
E9221b172e78e888355fa2fe4541b595?s=48 mclloyd
7
8.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
980
Navigating Team Friction
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
YesSQL, Process and Tooling at Scale
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
157
12k
JavaScript: Past, Present, and Future - NDC Porto 2020
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
37
3.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
21
1.4k
Documentation Writing (for coders)
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenintech
48
2.6k
Optimizing for Happiness
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
364
64k

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