序章

Visual Studio Code には、アプリケーションのデバッグのサポートなど、大量の機能が組み込まれています。 この記事では、 Debugger for Chrome 拡張機能をダウンロードし、デバッグ構成を作成し、デバッグ構成を起動し、ブレークポイントを設定することにより、Node.jsをデバッグするようにVSCodeを構成します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Debugger for Chrome extension in VS Code

このチュートリアルでは、ノードサーバーで実行できるJavaScriptプロジェクトの1つにレッスンを適用できます。

必要に応じて、サンプルアプリケーションを使用してフォローするオプションもあります。

ステップ1—サンプルアプリの作成(オプション)

このチュートリアルでは、 QuickChatというサンプルアプリケーションをデバッグします。 フォローするプロジェクトがない場合は、この手順に従ってこのアプリケーションを作成できます。

Quick Chat test application

Gitを使用してクローンDesign-and-Build-a-Chat-Application-with-Socket.iorepoを使用します。 zipファイルをダウンロードして内容を解凍することもできます。

GitHub repository for Quick Chat application

注:システムにGitをインストールする必要がある場合は、Gitの使用開始チュートリアルを参照してください。

このチュートリアルでは、プロジェクトのパート8のコードを使用します。 アプリケーションがどのように機能するかを理解するために少し時間を取ってください。

プロジェクトディレクトリに移動してから、part-8ディレクトリに移動します。

  1. cd Design-and-Build-a-Chat-Application-with-Socket.io
  2. cd part-8

次に、プロジェクトのnpmパッケージをインストールします。

  1. npm install

次に、サーバーを起動します。

  1. npm start

Chromeで127.0.0.1:3000にアクセスすると、ユーザー名のプロンプトが表示されます。 ユーザー名を入力してチャット!ボタンをクリックすると、チャットアプリに移動し、次のように表示されます。

  1. Output
    User joined the chat...

ウィンドウ下部の入力にテキストを入力し、送信ボタンをクリックすると、メッセージがチャットウィンドウに表示されます。

新しいブラウザタブを開いて同じURLにアクセスすると、別のユーザーとしてログインし、両方のブラウザタブでチャットウィンドウに送信されるチャットメッセージを確認できます。 この動作は、このアプリケーションに期待される機能です。

ステップ2—ブレークポイントを作成する

それでは、アプリにブレークポイントを作成しましょう。 ブレークポイントを使用すると、コードを一時停止して検査できます。

クイックチャットアプリケーションは、Socket.ioを使用してユーザーがリアルタイムでチャットできるようにするNode/Expressアプリです。 クライアントがサーバーに接続する場所にブレークポイントを追加します。

VS Codeにブレークポイントを作成するには、行番号の左側にあるガターまたは空のスペースをクリックします。

次のスクリーンショットに示すように、ユーザーが接続するたびに呼び出されるブレークポイント(赤い円)を関数内に作成しました。

A breakpoint in the Quick Chat app in VS Code

part-8 / server.js
// ...
io.on('connection', socket => {
  console.log('a user connected');
  // ...
});

デバッグしているアプリケーションに関係なく、アプリケーションのロード時、ルートのトリガー時など、簡単にトリガーできるブレークポイントを設定します。

ステップ3—VSCodeデバッグパネルを使用する

デバッグパネルを開くには、サイドバー(デフォルトでは左側)のバグアイコンをクリックします。 変数ウォッチコールスタック、およびブレークポイントの4つの異なるセクションがあることに気付くでしょう。

Debug panel in VS Code

パネルの上部に、緑色の再生ボタンと、デバッグ構成をまだ作成していない場合は構成なしというドロップダウンが表示されます。 すでに構成を作成している場合は、そこにリストされています。

VS Codeは、.vscodeというフォルダー内のlaunch.jsonというファイルにデバッグ構成を保存します。 VS Codeは、そのフォルダーとファイルを作成するだけでなく、事前定義された構成を生成するのにも役立ちます。 最初のものを作成する方法を見てみましょう。

最初のlaunch.jsonファイルを作成するには、構成なしドロップダウンをクリックし、構成の追加を選択します。 ここから、ポップアップを無視して、最初の構成の作成を開始します。

デバッグ構成の主要コンポーネント

  • name-構成ドロップダウンに表示される構成の名前。
  • request-実行するアクションのタイプ。
  • type-構成のデバッガーのタイプ。 このタイプには、ノード、Chrome、PHPなどがあります。

さまざまな構成を作成すると、VSCodeは定義可能な他のプロパティにIntelliSenseも提供します。

ステップ4—起動プログラムを使用したデバッグ

この最初の構成では、Nodeアプリケーションをデバッグモードで起動します。 デバッグモードで実行すると、VSCodeはデバッグのために特定のポートを介してアプリに接続します。 この構成では、実行するプログラムファイルを定義する必要があります。 構成は次のようになります。

.vscode / launch.json
{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js"
},

この構成を実行するには、構成ドロップダウンリストから構成を選択し、緑色の再生ボタンをクリックします。 デバッグアクションバーが右上にポップアップ表示され、ステップ続行再起動、および停止ボタンが表示されます。

Debug action bar in VS Code

今後、ノードアプリケーションをデバッグモードで起動するには、--inspectフラグを使用します。

ステップ5—プロセスIDによるアタッチを使用したデバッグ

ここで説明する2番目の構成は、プロセスIDによるノードプロセスへの接続です。 このシナリオは、ローカル環境ですでに実行されているアプリケーションに関連します。

.vscode / launch.json
{
  "type": "node",
  "request": "attach",
  "name": "Attach by Process ID",
  "processId": "${command:PickProcess}"
},

このため、デバッグ構成を実行する前に、ノードサーバーを自分で起動する必要があります。 次のコマンドを使用してサーバーを起動し(前述のように--inspectを使用)、app.jsをサーバーファイルの名前に置き換えます。

  1. node --inspect app.js

Starting the server in VS Code

サーバーが起動したら、デバッグ構成を実行できます。 プロンプトが表示されたら、サーバーを起動するために実行したコマンドに対応するノードプロセスを選択します。

接続が成功します。

Successful connection in VS Code

ステップ6—ポートに接続してデバッグする

3番目の構成では、特定のポートで実行されている既存のノードアプリケーションに接続します。

.vscode / launch.json
{
  "type": "node",
  "request": "attach",
  "name": "Attach to Port",
  "port": 9229
},

9229は、--inspectフラグを使用する場合のデバッグ用のデフォルトのポートであるため、これを使用します。

以前の構成でサーバーを既に起動しているので、先に進んでデバッグ構成を開始できます。 ポートに接続構成を選択し、再生をクリックします。

Successful configuration 3 in VS Code

portlocalRootremoteRootを指定することで、ネットワーク接続を介してリモートマシンに接続してデバッグすることもできます。

ステップ7—Nodemonを使用したポートへの接続を使用したデバッグ

最終的な構成では、Nodemonによる自動リロードをサポートするために、前の構成を微調整します。 Nodemon はパッケージであり、通常はnpmからグローバルにインストールされ、ファイルを保存するときにNodeサーバーを自動リロードします。 これにより、変更とテストを同時に行うことがはるかに簡単になります。

.vscode / launch.json
{
  "type": "node",
  "request": "attach",
  "name": "Nodemon Debug",
  "port": 9229,
  "restart": true
},

注:最新バージョンのVS Codeは、別の「Node.jsNodemonSetup」構成に使用できるruntimeExecutableパラメーターをサポートしています。

Nodemonをインストールするには、次のコマンドを使用します。

  1. npm install -g nodemon

Nodemonはサーバーを自動再起動するため、デバッグ構成でrestartプロパティをtrueに設定しました。 このように、サーバーが再起動したときにデバッガーが再接続します。 これをテストするには、次のコマンドを使用してサーバーを実行します(以前のnodenodemonに置き換えます)。

  1. nodemon --inspect app.js

Output of

次に、構成を実行します。

Running debug configuration 4 in VS Code

Nodemonを使用しているため、サーバーファイルに変更を加えて保存すると、サーバーが自動的に再ロードされます。 このシナリオを処理し、再接続するためのデバッグ構成を定義しました。 ファイルに小さな変更を加えて保存し、サーバーの再起動時にデバッガーが再接続することを確認します。

Debugger reconnecting when the server restarts

結論

このチュートリアルでは、Node.jsコードをデバッグするようにVSCodeを設定します。 これで、デバッグを開始するための適切な構成ができました。

Node.jsの詳細については、ノードシリーズのコーディング方法を参照してください。