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
76
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
Pkl/2024-04-17-llt31
ottijp
0
16
CDK for TerraformでAzureリソースをデプロイする/2023-05-15-llt29
ottijp
0
57
TWELITEへの誘い/2022-12-27-llt28
ottijp
0
100
ビルドツールBazelを触ってみた/2022-09-28-llt27
ottijp
0
97
HashiCorp Vaultを使ったシークレットのセキュアな一元管理 〜Ansibleを添えて〜/2022-07-12-llt26
ottijp
0
110
AWSインフラのデプロイをCDKでカイゼンする/2022-03-23-llt25
ottijp
0
52
Amazon Timestreamでデータ補間/2021-12-27-llt24
ottijp
0
57
ncurses/2021-05-12-llt21
ottijp
0
150
ghqでソースコードを管理しよう/2021-03-23-llt20
ottijp
0
280
Other Decks in Programming
See All in Programming
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
140
Anthropic Cookbook のおすすめレシピ
schroneko
7
990
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
290
Apache Hive 4 on Treasure Data
ryukobayashi
0
340
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
210
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
SIMD Parallel Programming with the Vector API
josepaumard
0
180
Ruby GitHub Packages
bkuhlmann
0
630
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
500
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
In The Pink: A Labor of Love
frogandcode
138
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Facilitating Awesome Meetings
lara
42
5.6k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Code Review Best Practice
trishagee
55
15k
Designing Experiences People Love
moore
136
23k
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