LoginSignup
5
5

More than 5 years have passed since last update.

Vagrant上のNode.jsをchromeの開発ツールを使ってデバッグする

Last updated at Posted at 2017-11-24

概要

Vagrant上のNode.jsをホストOS上のChromeの開発者ツールを使ってデバッグする。

環境

  • Mac OS X Sierra 10.12.6
  • Vagrant 2.0.0
  • OSイメージ Amazon Linux

手順

1.デバッグモードで起動(ゲストOS)
デバッガーがポート9229番(デフォルト)で起動します。

$ node --inspect app.js
Debugger listening on ws://127.0.0.1:9229/27c2d3d8-b74a-4aac-8bd7-73723c0d0343
For help see https://nodejs.org/en/docs/inspector

ホストマシンからVarantのポート番号9229へのアクセスを可能とすることで、
Chromeの開発ツールからデバッグできるように設定します。

2.ポートフォワーディング設定(ホストOS)
ホストOSのポート9229番と、ゲストOSのポート9229番を接続します。

Vagrantfile
config.vm.network :forwarded_port, guest: 9229, host: 9229

Vagrantをリロードします。

$ vagrant reload

3.ポートを開ける(ゲストOS)

$ sudo iptables -A INPUT -p tcp --dport 9229 -j ACCEPT

4.Google ChromeのdevToolsの設定(ホストOS)
Google Chromeのアドレスバーに chrome://inspect と入力します。
以下のような画面が表示されます。
devTools.png

Configure...から、ゲストOSに接続するIPアドレスとポート番号9229を設定します。
configure.png

上記では、IPアドレス:192.168.33.100、ポート番号:9229を設定しています。
IPアドレスはVagrantfileを確認してください。

Vagrantfile
config.vm.network "private_network", ip: "192.168.33.100"

5.Debuggerを起動
IPアドレスとポート番号を指定して、デバッグを実行します。

$ node --inspect=192.168.33.100:9229 app.js

chrome://inspect を入力すると、以下のように表示されます。
debug.png
inspect のリンクを開くとデバッグがDebuggerが起動します。

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5