何度やっても忘れるのでここにメモ。特に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とも微妙に違うので混ざる。。。