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
46
Pkl/2024-04-17-llt31
ottijp
0
77
CDK for TerraformでAzureリソースをデプロイする/2023-05-15-llt29
ottijp
1
250
TWELITEへの誘い/2022-12-27-llt28
ottijp
0
150
ビルドツールBazelを触ってみた/2022-09-28-llt27
ottijp
0
150
HashiCorp Vaultを使ったシークレットのセキュアな一元管理 〜Ansibleを添えて〜/2022-07-12-llt26
ottijp
0
140
AWSインフラのデプロイをCDKでカイゼンする/2022-03-23-llt25
ottijp
0
82
Amazon Timestreamでデータ補間/2021-12-27-llt24
ottijp
0
98
ncurses/2021-05-12-llt21
ottijp
0
200
Other Decks in Programming
See All in Programming
型付け力を強化するための Hoogle のすゝめ / Boosting Your Type Mastery with Hoogle
guvalif
1
240
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
19
6.7k
TypeScript だけを書いて Tauri でデスクトップアプリを作ろう / Tauri with only TypeScript
tris5572
2
540
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
moznion
1
130
Use Perl as Better Shell Script
karupanerura
0
660
Blueskyのプラグインを作ってみた
hakkadaikon
1
290
クラシルリワードにおける iOSアプリ開発の取り組み
funzin
1
810
External SecretsのさくらProvider初期実装を担当しています
logica0419
0
250
複数アプリケーションを育てていくための共通化戦略
irof
4
1.4k
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
7
380
PT AI без купюр
v0lka
0
200
primeNumberでのRBS導入の現在 && RBS::Traceでinline RBSを拡充してみた
mnmandahalf
0
260
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
BBQ
matthewcrist
88
9.7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Invisible Side of Design
smashingmag
299
50k
Why Our Code Smells
bkeepers
PRO
336
57k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Scaling GitHub
holman
459
140k
What's in a price? How to price your products and services
michaelherold
245
12k
GraphQLの誤解/rethinking-graphql
sonatard
71
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