次の方法で共有

Visual Studio Code デバッグ構成で開発プロキシを使用する

概要
目標： VS Code でのデバッグ時の開発プロキシの自動起動
時間: 10 分
プラグイン： 各種
前提条件:開発プロキシ、VS Code、開発プロキシ ツールキット拡張機能を設定する

拡張機能マーケットプレースから Dev Proxy Toolkit をインストールします。 拡張機能は、開発プロキシのタスクと監視機能を提供します。

デバッグ構成に開発プロキシを追加する

startタスクとstopタスクをプロジェクトのtasks.json ファイルに追加します。

Tip

devproxy-task-startスニペットとdevproxy-task-stop スニペットを使用して、開発プロキシ タスクをすばやくtasks.json ファイルに追加します。

ファイル: .vscode/tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "devproxy-start",
            "type": "devproxy",
            "command": "start",
            "isBackground": true,
            "problemMatcher": "$devproxy-watch",
        },
        {
            "label": "devproxy-stop",
            "type": "devproxy",
            "command": "stop"
        }
    ]
}

preLaunchTask ファイルで定義したタスク ラベルを使用して、postDebugTaskプロパティとtasks.jsonプロパティを構成します。 開発プロキシは、アプリケーションが実行される前に開始され、デバッグが完了した後に停止します。 次の例では、開発プロキシと Node.js アプリケーションとのデバッグ セッションを開始するように launch.json ファイルを構成する方法を示します。

ファイル: .vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/index.mjs",
            "preLaunchTask": "devproxy-start",
            "postDebugTask": "devproxy-stop",
            "env": {
                "NODE_ENV": "development",
                "http_proxy": "http://127.0.0.1:8000",
                "https_proxy": "http://127.0.0.1:8000"
            }
        }
    ]
}

オプションを開発プロキシに渡す

オプションを開発プロキシに渡すには、args ファイルのstart タスクのtasks.json プロパティにオプションを追加します。 たとえば、記録モードで開発プロキシを起動するには、 --record 引数を渡します。

ファイル: .vscode/tasks.json (args を含むタスク)

{
    "label": "devproxy-start",
    "type": "devproxy",
    "command": "start",
    "args": [
        "--record"
    ],
    "isBackground": true,
    "problemMatcher": "$devproxy-watch"
}

こちらも参照ください

  • Last updated on