Node.jsアプリケーションを作成

デバッグ対象となる適当なアプリケーションを作成します。

VSCodeを立ち上げてserve.jsという名前でファイルを作成し、下記の内容を記述します。

const http = require('http');
const port = 3000;
const server = http.createServer( (req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World\n');
    console.log('/にアクセスがありました')
});
server.listen(port);

console.log(`http://localhost:${port}/でListenしています`);

動作確認

ターミナルを起動してserve.jsを実行します。

$ node serve.js 
http://localhost:3000/でListenしています

ブラウザでlocalhost:3000にアクセスします。

ブラウザに「Hello World」と表示されます。またターミナルに以下の出力があります。

$ node serve.js 
http://localhost:3000/でListenしています
/にアクセスがありました   <<<

ちゃんと動作していることが確認できました。次はこのアプリケーションをデバッグします。

Ctrl + Cでserve.jsを終了します。

デバッグ設定

VSCode画面左の虫ボタンをクリックします。Run and Debugの下のcreate a launch.json fileをクリックします。

f:id:hogehoge666:20210201224243p:plain

「Select Environment」と要求されるので選択肢の中からNode.js(legacy)を選択します。

f:id:hogehoge666:20210201224433p:plain

Node.js(legacy)が従来のデバッグ機能でNode.js(preview)が実験中の新しいデバッグ機能です。新しもの好きの人はNode.js(preview)を選んでも結構です。

launch.jsonファイルが自動生成されます。launch.jsonはデバッグ実行に関連する各種の構成情報を記述するファイルです。programがserve.jsになっていることを確認します。

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/serve.js"   <<<
        }
    ]
}