Visual Studio Codeでリモートサーバー上のNodejsをデバッグする

リモート（別サーバーやVagrant）で実行するNodejsのデバッグをVisual Studio Codeで行えるように設定します。

※ここでは
dockerでVM上にnginx-Nodejs-Mongodbの開発用の雛形を作ってみた
をリモートサーバーのサンプルとして使用しています。

#環境
MacOS 10.12.6 (Sierra)
Visual Code Studio:1.15.1 (1.15.1)
Nodejs:7.10.1
npm:4.2.0

#下準備

• Visual Studio Codeをインストール済みであること。
  Download Visual Studio Code
• デバックしたいNodejsが稼働していること。
• 対象サーバーの下記で設定するデバッグ用のポートが開放されていること。

#デバッグの設定

#Nodejsのデバッグ設定

(2017/09/17追記・編集)
Nodejsのデバッグ設定は(ほんの少し詳しくして)下記に移動しました。
nodeのデバッグ実行を有効にしてforeverで稼働する

#Visual Studio Codeのデバッグ設定

##Visual Studio Codeで対象ディレクトリを開く
ツールバー上の「ファイル」→「開く…」を選択し、サーバー上で稼働しているデバッグしたいNodejsと同じソースが置いてあるローカル上のディレクトリを開きます。

##デバッグ設定を追加する
ツールバー上の「表示」→「デバッグ」（もしくはサイドバー内の虫のアイコン）を選択してデバッグ表示にします。

「デバッグ」→「構成の追加」（もしくはサイドバー内の歯車アイコン）を選択して表示される入力フォームにDoc..と入力して
、「Docker: Attach」を選択すると自動的に.vscode/launch.json作成されます。
※後で編集できるので違ったものを選択しても問題ありません。

##launch.jsonの編集
作成されたlaunch.jsonを以下を参考に編集します。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Process", //<- 自分のわかりやすい名前
            "port": 9229,　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//<- デバッガがlistenしているポート
            "address": "192.168.33.10",  //<- デバッガが稼働しているサーバーのIP
            "localRoot": "${workspaceRoot}", 
            "remoteRoot": null
        }
    ]
}

#デバッグの確認

##デバッグの実行

デバッグ画面のサイドバー内上部に表示されているデバッグ再生ボタンの横のプルダウンが上記でつけた名前が選択されていることを確認して再生ボタンを押します。
正常に開始されるとデバッグ用のボタンが上部に表示され、下部のステータスバーが赤くなります。

##ブレークポイントのテスト
適当な箇所にブレークポイントを設定します。

ブレークポイントを設定した箇所を実行するページを開いて、
正常にデバッガーが動作していれば自動でVisual Studio Codeがアクティブになり
サイドバー内で変数やウォッチ式の参照、上部のデバッグ用のボタンを使用してステップイン/オーバー/アウトをすることができます。
また、下部にはデバッグコンソールにコンソールログが表示されます。

##サーバー上のソース（実行しているソース）でブレークポイントの指定
ローカル上のソースでブレークポイントの指定をしなくても、
デバッグ画面の「LOADED SCRIPTS」で表示される実行ソースでもブレークポイントの設定が可能です。
※ブレークポイントで停止時にはローカル上のソースが開きます。

##デバッグの終了
上部デバッグ用のボタン群の中にあるコンセントアイコンをクリックすればデバッガから切断されます。

#参考サイト
Remote debug node js application using Visual Studio Code
Debugging in Visual Studio Code