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
63
Pkl/2024-04-17-llt31
ottijp
0
90
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
170
HashiCorp Vaultを使ったシークレットのセキュアな一元管理 〜Ansibleを添えて〜/2022-07-12-llt26
ottijp
0
160
AWSインフラのデプロイをCDKでカイゼンする/2022-03-23-llt25
ottijp
0
94
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
Swift Concurrency - 状態監視の罠
objectiveaudio
2
470
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
110
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.5k
CSC509 Lecture 06
javiergs
PRO
0
240
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
150
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.3k
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
160
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
390
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.5k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Gamification - CAS2011
davidbonilla
81
5.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Documentation Writing (for coders)
carmenintech
75
5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Balancing Empowerment & Direction
lara
4
680
It's Worth the Effort
3n
187
28k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
The Pragmatic Product Professional
lauravandoore
36
6.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
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