環境
ホストマシン: Mac、Google Chrome Ver.60
ゲストマシン: Vagrant上のUbuntu 16.04 Server、Node.js: V6.11.2
やりたいこと
Vagrant上にあるNode.jsに対して、MacのChrome DevToolsを使ってステップ実行等のデバッグがしたい。
手順
1. Node.jsアプリをデバッグモードで起動します(ゲスト側)
node --inspectコマンドで起動します。--inspectについては公式のDebugging Guideに書いてあります。
$ node --inspect app.js Debugger listening on port 9229. Warning: This is an experimental feature and could change at any time. To start debugging, open the following URL in Chrome: chrome-devtools://devtools/remote/serve_file/@60cd6e859b9f557d2312f5bf532f6aec5f284980/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/5c5884e4-25e5-4852-891c-79c2b26c14d6
するとアプリケーションとは別に、デバッガーがポート9229番(デフォルト)で起動します。
通常は chrome-devtools://***の長いURLをブラウザのURL欄に貼り付けてアクセスすればデバッグができるのですが、今はホストマシンからVarantのポート番号9229へアクセスできないため動きません。
2. ポートフォワードする(ホスト側)
ホストマシンのポート9229番と、ゲストマシンのポート9229番を繋げます。
Vagrantfileを開いて、次のようにポートフォワードを設定します。
config.vm.network "forwarded_port", host: 9229, guest: 9229
Vagrantはリロードしておきます。
$ vagrant reload
3. ポートを開ける(ゲスト側)
9229番ポートを外部に対して開け、ホストマシンからのポートフォワードを受け取れるようにします。こちらの記事のように永続化したほうがよいのかも。
$ sudo iptables -A INPUT -p tcp --dport 9229 -j ACCEPT
4. デバッグ！
これで準備完了です。
手順1のアプリの起動をもう一度行って、表示されたchrome-devtools://***の長いURLへChromeからアクセスします。するとデバッガーが表示されるので、ステップ実行やブレイク等のデバッグが可能です。
4-1. Chromeデバッガーの基本操作
ブレークポイントの追加・解除: 行番号をクリックする。
ブレークポイントの一時的解除・復活: 右欄の Deactivate breakpoints ボタンをクリックするか、Command+F8を押す（※1）。
ブレークポイント後の実行: 右欄の Resume script execution ボタンをクリックするか、F8を押す（※1）。
ステップオーバー(関数の中に入らない): 右欄の Step over next function call ボタンをクリックするか、F10を押す（※1）。
ステップイントゥ(関数の中に入る): 右欄の Step into next function call ボタンをクリックするか、F11を押す（※1）。
ステップアウト(関数から出る): 右欄の Step out of current function ボタンをクリックするか、shift+F11を押す（※1）。
ローカル変数の確認: 右欄の Scope – Local に表示される。もしくは変数にカーソルを当てるとポップアップ表示される。
グローバル変数の確認: 右欄の Scope – Global に表示される。
変数のウォッチ: 右欄の Watch の + ボタンから変数を追加する（※2）。
※1 ホストマシンがMacの場合は、Functionキーが Mission Control に割り当てられているとそちらが動作してしまうので、システム環境設定 の Mission Control にて、Functionキーの割当を解除するとデバッガーが操作できます。
※2 なぜか + ボタンが押せない場合は、Watch 欄で右クリックし、Add Watch Expression から追加できます。