DevTools外掛程式

公開開發 Proxy 訊息,以及 Chrome DevTools 中攔截的要求和回應的相關信息。 支援 HTTP 請求與 STDIO 通訊。

顯示開發人員 Proxy 訊息的 Microsoft Edge 開發人員工具螢幕快照。

Microsoft Edge 的螢幕快照,其中具有開發人員工具,其中顯示開發人員 Proxy 所攔截的要求和回應。

組態範例

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v4.0.0/rc.schema.json",
  "plugins": [
    {
      "name": "DevToolsPlugin",
      "enabled": true,
      "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll",
      "configSection": "devTools"
    }
  ],
  "devTools": {
    "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v4.0.0/devtoolsplugin.schema.json",
    "preferredBrowser": "Edge"
  }
}

組態屬性

財產 描述 違約
preferredBrowser 要用來啟動 Dev Tools 的瀏覽器。 支援的值:Edge、EdgeDev、Chrome Edge
port 外掛會監聽 DevTools 連線的埠口。 0 隨機選一個可用的港口。 當你需要發佈時,例如在容器中執行開發代理時,使用固定埠 0
launchBrowser 是否要用開發工具啟動瀏覽器。 當 false時,外掛不會啟動瀏覽器,而是記錄開發工具的 URL,你可以自己在 Microsoft Edge 或 Google Chrome 中開啟 true

命令行選項

沒有

備註

外掛會監聽 Dev Tools 在 Dev Proxy 使用的 IP 位址上連線,而你用這個 --ip-address 選項設定該位址。 當你設定為 0.0.0.0 或 ::時,外掛會監聽所有介面,開發工具的網址指向 127.0.0.1。 在 Windows 上,所有介面的監聽都需要管理員權限或 URL ACL。 如果外掛無法在所有介面上監聽,它就會監聽 127.0.0.1 ,所以你只能從同一台機器連接開發工具。

為了保護攔截的流量,該外掛僅接受以下 Dev Tools 連線:

  • 使用 Dev Proxy 啟動或記錄的網址。 URL 包含一個隨機標記,開發代理每次啟動時會產生。
  • 來自 Chrome DevTools 前端,可能是 devtools://devtools、 http://localhost:9222、 http://127.0.0.1:9222或 。

外掛會拒絕其他連線 403 Forbidden 並記錄警告。

當 Dev Proxy 在容器、開發容器或 GitHub Codespaces 執行時,要使用該外掛,請設port為固定埠,設launchBrowser為 false,然後將埠碼發佈或轉發到你的機器。 更多資訊請參閱「 當開發代理在容器中執行時檢查請求」。

已知問題

開發人員工具無法在 Windows 上的 Microsoft Edge 中開啟

您在 Windows 上使用開發人員 Proxy,並將其設定為使用 Microsoft Edge 來顯示開發人員工具。 啟動開發 Proxy 之後,它會啟動偵測器,但開發人員工具不會開啟或開啟空白。

若要修正此問題:

  1. 開啟 Microsoft Edge
  2. 移至 [設定]
  3. 開啟 系統與效能
  4. 停用 啟動提升
  5. 關閉所有Microsoft Edge 視窗和進程
  6. 啟動開發 Proxy

STDIO 支援

使用 DevToolsPlugin 搭配指令stdio時,你可以檢查 Chrome DevTools 中的 STDIN/STDOUT/STDERR 通訊:

  • 訊息會以 stdio://command-name 網址顯示
  • 請求顯示為 STDIN 方法
  • 回應顯示 STDOUT 為(200狀態)或 STDERR (500狀態)
  • 訊息主體在適用時會以 JSON 格式化
  • 每對請求/回應皆可取得時序資訊

STDIO 的配置範例

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v4.0.0/rc.schema.json",
  "plugins": [
    {
      "name": "DevToolsPlugin",
      "enabled": true,
      "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll",
      "configSection": "devTools"
    }
  ],
  "devTools": {
    "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v4.0.0/devtoolsplugin.schema.json",
    "preferredBrowser": "Edge"
  }
}

然後執行:

devproxy stdio npx -y @modelcontextprotocol/server-filesystem

後續步驟