開発者ドキュメント

VisualStudioCodeでNode.jsコードをデバッグする方法

序章

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

前提条件

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

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

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

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

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

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

注:システムに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

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

  1. Output
    User joined the chat...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

今後、Nodeアプリケーションをデバッグモードで起動するには、 --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

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

接続が成功します。

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

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

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

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

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

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

ステップ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 デバッグ構成で。 このように、サーバーが再起動したときにデバッガーが再接続します。 これをテストするには、このコマンドを使用してサーバーを実行します( node、以前から、 nodemon):

  1. nodemon --inspect app.js

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

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

結論

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

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

モバイルバージョンを終了