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
160
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
66
Pkl/2024-04-17-llt31
ottijp
0
92
CDK for TerraformでAzureリソースをデプロイする/2023-05-15-llt29
ottijp
1
290
TWELITEへの誘い/2022-12-27-llt28
ottijp
0
160
ビルドツールBazelを触ってみた/2022-09-28-llt27
ottijp
0
180
HashiCorp Vaultを使ったシークレットのセキュアな一元管理 〜Ansibleを添えて〜/2022-07-12-llt26
ottijp
0
160
AWSインフラのデプロイをCDKでカイゼンする/2022-03-23-llt25
ottijp
0
98
Amazon Timestreamでデータ補間/2021-12-27-llt24
ottijp
0
110
ncurses/2021-05-12-llt21
ottijp
0
210
Other Decks in Programming
See All in Programming
CSC305 Lecture 08
javiergs
PRO
0
280
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
110
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
920
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
47k
CSC509 Lecture 06
javiergs
PRO
0
270
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
700
Pythonに漸進的に型をつける
nealle
1
130
AI Agent 時代的開發者生存指南
eddie
4
2.2k
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
470
ALL CODE BASE ARE BELONG TO STUDY
uzulla
28
6.8k
Devvox Belgium - Agentic AI Patterns
kdubois
1
150
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
130
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Gamification - CAS2011
davidbonilla
81
5.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
GitHub's CSS Performance
jonrohan
1032
470k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
Statistics for Hackers
jakevdp
799
220k
Side Projects
sachag
455
43k
Bash Introduction
62gerente
615
210k
Building Applications with DynamoDB
mza
96
6.7k
Optimizing for Happiness
mojombo
379
70k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
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