共用方式為

在 Visual Studio Code 偵錯設定中使用 Dev Proxy

一目了然
目標： 在 VS Code 除錯過程中自動啟動開發代理
時間： 10分鐘
插件： 各種
前置條件：設定 Dev Proxy、VS Code、Dev Proxy Toolkit 擴充功能

從擴充功能市集安裝 Dev Proxy 工具組 。 擴充套件提供開發 Proxy 的工作和監控功能。

將 Dev Proxy 新增至除錯設定

將 start 和 stop 工作新增至專案中的 tasks.json 檔案。

Tip

使用devproxy-task-start和devproxy-task-stop代碼段來快速將開發 Proxy 任務新增至您的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 文件中定義的工作標籤。 開發 Proxy 會在應用程式執行之前啟動，並在偵錯完成後停止。 下列範例示範如何設定 launch.json 檔案，以使用Dev Proxy和 Node.js 應用程式啟動偵錯會話。

檔案： .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檔案傳遞給 Dev Proxy。 例如，若要在錄製模式中啟動 Dev Proxy，請傳遞 --record 自變數：

檔案： .vscode/tasks.json（帶有 args 的任務）

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

另請參閱

  • Last updated on