VSCodeDebugger
with VSCodeのデバッグ
初回
サイドバー、虫マークをクリックして上部メニューから「Chrome」を選択
launch.jsonを編集する
2回目以降
touch barの三角でデバッガーを起動
$ npm startとかでアプリケーションを起動
VSCodeのterminal起動
shift-ctrl-`
launch.jsonの設定
code:json
{
"version": "0.2.0",
"configurations": [
{
"name": "Chrome",
"type": "chrome",
"request": "launch",
"webRoot": "${workspaceRoot}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
何ができる？
サイドバーの変数のところから全ての変数の中身が見える
選択して右クリックで「デバッグ; 評価」
選択された範囲の式を評価してデバッグコンソールに表示される
サイドバーからコールスタックが見れる
console.log一切書かずに済みそう！！！！mrsekut.icon*4
最近辛いのはRNなのでRNで動かしたいな...mrsekut.icon
https://image.itmedia.co.jp/ait/articles/1707/21/dt-09.gif
ちなみにtouch barでも選択できる
①続行
次のブレークポイントまで進む
②ステップオーバー
現在の行が関数の場合、その中に進む
③ステップイン
現在実行中の関数を抜けるまで実行する
④ ステップアウト
現在実行している関数が終了するまでステップ実行を継続する
⑤再起動
デバッグのやり直し
始めから？
⑥停止
デバッグ自体を終了
用語
breack point
ストップさせるとこ
行だけでなく列にも置ける
debugメニューから
条件文にも置ける
logpointでPrintDebugのようなことが出来る
データインスペクション
データの中身を見ること
ブレークポイントに止まった状態で、ファイル内のどこでも、変数をホバーするとその状態の値がすべて見れる
知りたいこと
breakするところのコツ
場所とか頻度とか
launch.jsonの書き方
何が出来るのか
typescript
vscode
実機デバッグ
参考
詳しい