Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScriptのデバッグ/2023-09-04-llt30
Search
Satoshi SAKAO
September 04, 2023
Programming
0
80
JavaScriptのデバッグ/2023-09-04-llt30
社内のLTイベント「えるLT Vol.30 オンライン」で発表した資料です
Satoshi SAKAO
September 04, 2023
Tweet
Share
More Decks by Satoshi SAKAO
See All by Satoshi SAKAO
Pkl/2024-04-17-llt31
ottijp
0
18
CDK for TerraformでAzureリソースをデプロイする/2023-05-15-llt29
ottijp
0
66
TWELITEへの誘い/2022-12-27-llt28
ottijp
0
110
ビルドツールBazelを触ってみた/2022-09-28-llt27
ottijp
0
98
HashiCorp Vaultを使ったシークレットのセキュアな一元管理 〜Ansibleを添えて〜/2022-07-12-llt26
ottijp
0
110
AWSインフラのデプロイをCDKでカイゼンする/2022-03-23-llt25
ottijp
0
53
Amazon Timestreamでデータ補間/2021-12-27-llt24
ottijp
0
60
ncurses/2021-05-12-llt21
ottijp
0
150
ghqでソースコードを管理しよう/2021-03-23-llt20
ottijp
0
280
Other Decks in Programming
See All in Programming
『WordPressコミュニティで学ぶ』OSS貢献の多様性
ippey
0
300
哲学史とモデリング
tanakahisateru
3
440
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
420
酒飲んでたらテックリードになった話
spbaya0141
0
210
An adventure of Happy Eyeballs
coe401_
1
400
Jetpack Composeとデザインシステム
rmakiyama
0
250
欠陥を早期に発見するための Software Engineer in Test とその重要性 / What is Software Engineer in Test and How they works
orgachem
PRO
19
2.6k
Adding Security to Microcontroller Ruby
sylph01
1
690
JS RPCを理解する
yusukebe
5
310
Porting mruby/c for the SNES (Super Famicom) - RubyKaigi 2024
gedorinku
0
1k
Powerfully Typed TypeScript
euxn23
4
1.8k
RuboCop: LSP and Prism
koic
2
140
Featured
See All Featured
Scaling GitHub
holman
457
140k
Practical Orchestrator
shlominoach
183
9.8k
Six Lessons from altMBA
skipperchong
22
3k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
84
45k
Statistics for Hackers
jakevdp
790
220k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.7k
Navigating Team Friction
lara
179
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
Facilitating Awesome Meetings
lara
43
5.6k
What's in a price? How to price your products and services
michaelherold
238
11k
Transcript
JavaScriptのデバッグ Satoshi SAKAO えるLT Vol.30 2023-09-04 1
話すひと 2 🏢 インフォコム株式会社 サービスマネジメント室 👨🔧 ソフトウェアエンジニア 🛠 Node.js /
AWS / IoT / iOS (Swift) / Linux 💖 猫,B'z,テクテクライフ(ランク: 28) Satoshi SAKAO @ottijp.com 𝕏 @ottijp
まとめ • printfデバッグをやめてデバッガを使おう • Chrome + `--inspect` で簡単にデバッグできる 3
printfデバッグ 4 class FizzBuzz { fizzbuzz(n: number): string { console.log(`debug
n=${n}`) if (n % 15 == 0) { return 'fizzbuzz' } else if (n % 3 == 0) { return 'fizz' } else if (n % 5 == 0) { return 'buzz' } else { return `${n}` } } } • 問題箇所が特定できていない状態では非効率である • 副作用により挙動が変わる可能性がある
ブラウザ実行時のデバッグ 5 • Chrome DevToolsでデバッグ可能 • source mapを出力すればTypeScriptコードとマップ可能
demo 6
Node実行時のデバッグ 7 • `--inspect` か `--inspect-brk` でデバッグクライアントを待つ • Chromeからアタッチしてデバッグできる •
source mapを出力すればTypeScriptコードとマップ可能 $ node --inspect-brk index.js Nodeプロセス tcp/9229
demo 8
フレームワーク利用時のデバッグ • Next.js • デフォルトで対応されている • サーバサイドも `--inspect` するだけでデバッグ可能 •
AWS SAM • AWS Toolkitで対応 • テストのデバッグは工夫が必要 9
まとめ • printfデバッグをやめてデバッガを使おう • Chrome + `--inspect` で簡単にデバッグできる 10
11 Appendix
デバッガとは • 機能 • ブレークポイント • ステップ実行 • 変数値参照・書き換え •
デバッガ - Wikipedia https://ja.wikipedia.org/wiki/%E3%83%87%E3%83%90%E3%83%83%E3%82%AC 12
nodeとインスペクタとのやり取り • Nodeがtcp/9229でインスペクタクライアントを待つ • インスペクタクライアントが接続 • Chrome • node-inspect •
VSCode • etc • V8 inspectorプロトコルでnodeと通信 13
コンソールでのnodeのデバッグ • `node inspect` でコンソール上でデバッグすることも可能 14
Refs • JavaScript, TypeScript, Next.jsのデバッグ方法 | ottijp blog https://blog.ottijp.com/2023/08/13/js-debug/
• AWS SAM (TypeScript) のテストをデバッグする方法 | ottijp blog https://blog.ottijp.com/2023/09/02/sam-test-debug/ • Lambda 関数のローカルでのステップスルーデバッグ - AWS Serverless Application Model https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/ developerguide/serverless-sam-cli-using-debugging.html 15