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
150
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
Testcontainers/2024-11-20-llt32
ottijp
0
56
Pkl/2024-04-17-llt31
ottijp
0
83
CDK for TerraformでAzureリソースをデプロイする/2023-05-15-llt29
ottijp
1
270
TWELITEへの誘い/2022-12-27-llt28
ottijp
0
150
ビルドツールBazelを触ってみた/2022-09-28-llt27
ottijp
0
160
HashiCorp Vaultを使ったシークレットのセキュアな一元管理 〜Ansibleを添えて〜/2022-07-12-llt26
ottijp
0
150
AWSインフラのデプロイをCDKでカイゼンする/2022-03-23-llt25
ottijp
0
87
Amazon Timestreamでデータ補間/2021-12-27-llt24
ottijp
0
100
ncurses/2021-05-12-llt21
ottijp
0
210
Other Decks in Programming
See All in Programming
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
290
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
220
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
210
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.5k
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
1k
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
730
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
750
AIのメモリー
watany
11
1.1k
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
7
1k
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
300
JetBrainsのAI機能の紹介 #jjug
yusuke
0
120
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.4k
Embracing the Ebb and Flow
colly
86
4.8k
BBQ
matthewcrist
89
9.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Why Our Code Smells
bkeepers
PRO
337
57k
How to Ace a Technical Interview
jacobian
278
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
860
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Building Applications with DynamoDB
mza
95
6.5k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
The Pragmatic Product Professional
lauravandoore
35
6.8k
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