VSCode-DebuggerでChromeのリモートデバッグを使う
何度やっても忘れるのでここにメモ。特に2を忘れる。
0.事前準備 launch.jsonの作成
これはReactの例。ポイントはrequestをattachにしているのと、portが9222になっているところ。
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost",
"type": "chrome",
"request": "attach",
"port": 9222
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}
設定はVSCode本家、Chrome for DebuggerのGitHubを参考にしている。前者はReact以外にも各JSフレームワークごとにデバッグの設定方法のページが記載してあるので、必要な場合はそちらを参照するのがいいだろう。
1.Chromeをリモートデバッグ有効にした状態で起動
MDNの記事を参考にリモートデバッグを有効化してChromeを起動する。
デスクトップ版 を以下の特別なフラグ付きで起動して、リモートデバッグを有効にします。重要なフラグは --remote-debugging-port=9222 です。
Windowsであれば、Chromeのショートカットを作り、リンクにこんな指定をしておくと楽。
"C:\Program Files (x86)\Google\Chrome\Application\Chrome.exe" --remote-debugging-port=9222
2.attach先のURLを開く
launch.jsonで指定したurlをChromeで開く。デバッグ起動をするより前に開いておく。これをよく忘れる。デバッグ起動より後にChromeを開いた場合、デバッグができないので注意。
3.VSCodeでデバッグ起動
VSCodeから起動。ショートカットはF5。
Appendix.デバッグ時のショートカット
Toggle Breakpoint (F9)
Pause (F6)
Step Over (F10)
Step Into (F11)
Step Out (Shift+F11)
Restart(Ctrl+Shift+5)
Stop (Shift+5)
VSCodeとブラウザ, さらにEclipseとも微妙に違うので混ざる。。。
この記事が気に入ったらサポートをしてみませんか?