JavaScriptのデバッグ/2023-09-04-llt30

社内のLTイベント「えるLT Vol.30 オンライン」で発表した資料です

Transcript

1. JavaScriptのデバッグ Satoshi SAKAO えるLT Vol.30 2023-09-04 1
2. 話すひと 2 🏢 インフォコム株式会社 サービスマネジメント室 👨🔧 ソフトウェアエンジニア 🛠 Node.js / AWS / IoT / iOS (Swift) / Linux 💖 猫，B'z，テクテクライフ（ランク: 28） Satoshi SAKAO @ottijp.com 𝕏 @ottijp
3. まとめ • printfデバッグをやめてデバッガを使おう • Chrome + `--inspect` で簡単にデバッグできる 3
4. 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. ブラウザ実行時のデバッグ 5 • Chrome DevToolsでデバッグ可能 • source mapを出力すればTypeScriptコードとマップ可能
6. demo 6
7. Node実行時のデバッグ 7 • `--inspect` か `--inspect-brk` でデバッグクライアントを待つ • Chromeからアタッチしてデバッグできる • source mapを出力すればTypeScriptコードとマップ可能 $ node --inspect-brk index.js Nodeプロセス tcp/9229
8. demo 8
9. フレームワーク利用時のデバッグ • Next.js • デフォルトで対応されている • サーバサイドも `--inspect` するだけでデバッグ可能 • AWS SAM • AWS Toolkitで対応 • テストのデバッグは工夫が必要 9
10. まとめ • printfデバッグをやめてデバッガを使おう • Chrome + `--inspect` で簡単にデバッグできる 10
11. 11 Appendix
12. デバッガとは • 機能 • ブレークポイント • ステップ実行 • 変数値参照・書き換え • デバッガ - Wikipedia 
 https://ja.wikipedia.org/wiki/%E3%83%87%E3%83%90%E3%83%83%E3%82%AC 12
13. nodeとインスペクタとのやり取り • Nodeがtcp/9229でインスペクタクライアントを待つ • インスペクタクライアントが接続 • Chrome • node-inspect • VSCode • etc • V8 inspectorプロトコルでnodeと通信 13
14. コンソールでのnodeのデバッグ • `node inspect` でコンソール上でデバッグすることも可能 14
15. 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