DevTools 擴充功能的 launch.json 檔案

Visual Studio Code 使用launch.json檔案來定義除錯設定。使用 DevTools 擴充功能時，只有當你想使用除錯器且網頁需要在網頁伺服器上運行，而不只是本地檔案系統時，才需要檔案 launch.json 。大多數情況下，如果你選擇使用 DevTools 產生的檔案) ，你只需要知道 DevTools 產生 launch.json 檔案的內容， (你只需要在字串中多處輸入你想要的 URL "url" 。如果你想使用自訂且進階的除錯設定，請閱讀這篇文章。

如果你想使用 Visual Studio Code 的 UI 如 F5 來啟動 DevTools 分頁和除錯模式，你開啟的資料夾 (工作區) 必須包含 DevTools 產生的 (相容 DevTools) launch.json 檔案.vscode。

關於檔案 launch.json 格式的詳細資訊如下。通常你不需要更改檔案中的任何東西，只要替換多個 URL 字串實例，如 Opening DevTools 中點擊 Opening DevTools 和 DevTools 瀏覽器中的啟動專案按鈕即可。

名稱字串出現在使用者介面上

"name"每個除錯設定的字串會在多個地方的下拉清單中出現。

選擇>「檔案關閉資料夾」。
在安裝 Visual Studio Code 的 DevTools 擴充功能時，選擇>「最近開啟>C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.html、複製的檔案，步驟 5：複製 demos 倉庫」。

假設目錄中.vscode沒有launch.json檔案。
選擇 活動欄>Microsoft Edge Tools> ，點擊 產生launch.json 按鈕。
在 活動欄>總管中，雙擊 index.html 即可開啟。

選擇活動欄>的執行與除錯>，點選執行與除錯按鈕。

在左上角的 Run 和 Debug 側邊欄，字串是 Launch Edge Headless 並附加 DevTools ，以及 Launch Edge 與 attach DevTools。在 Visual Studio Code 視窗底部，字串是 Launch Edge Headless 並附加 DevTools。這些是檔案中.json複合配置的名稱，指示 Visual Studio Code 除錯器開啟兩個 DevTools 分頁，或開啟 DevTools 分頁與外部瀏覽器：

 "compounds": [
     {
         "name": "Launch Edge Headless and attach DevTools",
         "configurations": [
             "Launch Microsoft Edge in headless mode",
             "Open Edge DevTools"
         ]
     },
     {
         "name": "Launch Edge and attach DevTools",
         "configurations": [
             "Launch Microsoft Edge",
             "Open Edge DevTools"
         ]
     }
 ]

執行與除錯側邊欄左上角的配置

在右下角的 除錯主控台 中，字串是 「Launch Microsoft Edge in headless mode」。這串字串不是關於 Edge DevTools 分頁，而是關於 Edge DevTools：瀏覽器 分頁。這是單一配置的名稱，而非複合配置的名稱：

    "configurations": [
     ...
     {
         "type": "pwa-msedge",
         "name": "Launch Microsoft Edge in headless mode",
         "request": "launch",
         "runtimeArgs": [
             "--headless",
             "--remote-debugging-port=9222"
         ],
         "url": "file://c:\\Users\\collabera\\Documents\\GitHub\\Demos\\demo-to-do\\index.html",
         "presentation": {
             "hidden": true
         }
     },

右下角除錯主控台的設定

在 執行與除錯 側邊欄，點選 開始除錯。兩個 DevTools 分頁打開，Visual Studio Code 進入除錯模式。這種做法是內建的 Visual Studio Code 介面，用來啟動除錯器，而非 Opening DevTools 和 DevTools 瀏覽器中描述的 DevTools 介面。

launch.json檔案的位置

在 Visual Studio Code 的檔案總管窗格中，檔案launch.json會被放在你打開資料夾根目錄的資料夾.vscode裡。
- 對於像 Demos 倉庫這樣的倉庫，如果你打開整個倉庫資料夾，按 Generate launch.json 按鈕會在根目錄附近建立 \.vscode\launch.json 一個檔案，涵蓋整個倉庫目錄。
- 如果你打開一個特定的較小資料夾，例如 \Demos\demo-to-do\，「 產生launch.json 」按鈕只會 launch.json 將檔案放到該資料夾。

Visual Studio Code 使用launch.json檔案來設定和自訂除錯器。 launch.json 是一個除錯器設定檔。此檔案同時控制與除錯器一起使用的瀏覽器。舉例來說，當你點擊網頁中的按鈕來測試網頁，讓 JavaScript 程式碼執行時，Visual Studio Code 除錯器會監聽瀏覽器，並逐步執行網頁的 JavaScript 程式碼。

以下是點擊擴充功能中建立launch.json按鈕後的副本launch.json。

預設有三種配置和兩種 化合物 ：

configurations- 在 Visual Studio Code 介面中，這些設定名稱會出現在除錯器介面中：
- 啟動 Microsoft Edge - 這是一種「啟動」型配置。
- 以無頭模式啟動 Microsoft Edge ——這是一種「啟動」類型的配置。
- Open Edge DevTools - 這是一種「除錯」型的 (或「附加」型的) 配置。
compounds- 在 Visual Studio Code 介面中，這些顯示在除錯工具列中：
- 啟動 Edge Headless 並附加 DevTools
- 啟動 Edge 並附加 DevTools

Intellisense 與自動補全

將滑鼠移到JSON名稱或值上可顯示提示：

滑鼠移至JSON名稱或值時的Intellisense工具提示

開始輸入雙引號，即可查看可用 JSON 屬性與描述的自動補全清單：

自動補全launch.json

儲存檔案時，務必提供格式良好的 JSON，包含逗號。

組態類型：啟動與除錯

這兩種不同類型的配置都在本檔案中定義.json，供 Visual Studio Code 除錯器使用。

設定

以下檔案區段launch.json來自擴充功能 v2.1.1，安裝於 Windows 上 Visual Studio Code 的預設安裝位置。

配置 1：啟動 Microsoft Edge

這是一種「啟動瀏覽器」類型的設定。此設定控制瀏覽器元件，例如當介面未選擇無頭時，要顯示哪個.html檔案。

這個設定名稱不會直接出現在介面中。此配置由下方的複合配置使用。

        {
            "type": "pwa-msedge",
            "name": "Launch Microsoft Edge",
            "request": "launch",
            "runtimeArgs": [
                "--remote-debugging-port=9222"
            ],
            "url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", // Provide your project's url to finish configuring
            "presentation": {
                "hidden": true
            }
        },

配置 2：以無頭模式啟動 Microsoft Edge

這是一種「啟動瀏覽器」類型的設定。此設定控制瀏覽器元件，例如在 Edge DevTools >設定頁面選擇 Headless 時，預設顯示哪.html個檔案。

此組態名稱「 Launch Microsoft Edge in headless 模式 」會出現在使用者介面中，例如除錯工具列和 除錯主控台。如果你啟動多個實例，介面中會附加一個數字，例如在 無頭模式 2 中啟動 Microsoft Edge。此配置由下方的複合配置使用。

        {
            "type": "pwa-msedge",
            "name": "Launch Microsoft Edge in headless mode",
            "request": "launch",
            "runtimeArgs": [
                "--headless",
                "--remote-debugging-port=9222"
            ],
            "url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", // Provide your project's url to finish configuring
            "presentation": {
                "hidden": true
            }
        },

配置 3：Open Edge DevTools

這是一種「附加除錯器」類型的配置。此設定控制窗格 (Edge DevTools 標籤) ，例如哪個 .html 檔案會填入 Elements 工具。

這個設定名稱不會直接出現在介面中。此配置由下方的複合配置使用。

        {
            "type": "vscode-edge-devtools.debug",
            "name": "Open Edge DevTools",
            "request": "attach",
            "url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", // Provide your project's url to finish configuring
            "presentation": {
                "hidden": true
            }
        }

複合配置

該compoundslaunch.json節定義了複合配置。

每種複合配置指兩種配置：一種設定用於Visual Studio Code開啟 Edge DevTools 標籤頁，另一種設定則是開啟 Edge DevTools： Browser 標籤， (有時稱為螢幕播報或無頭瀏覽器) ，或同時開啟 Edge DevTools：瀏覽器標籤及整個 Edge 瀏覽器視窗Microsoft。

在 Microsoft Edge 工具面板的目標區塊中，目標右側點擊切換螢幕投射按鈕。無頭嵌入式 Edge DevTools：瀏覽器 分頁 (窗格) 關閉或開啟。

在 Microsoft Edge 工具面板的目標區塊右側，點擊「附加」並開啟 Microsoft Edge 工具按鈕。

複合配置 1：啟動 Edge 無頭並安裝開發工具

此複合構型可啟動以下組件：

Edge DevTools：瀏覽器分頁 () 在 Visual Studio Code。這是由上述「 name 以無頭模式啟動 Microsoft Edge 的設定定義的。
Edge DevTools 分頁 (窗格) 在 Visual Studio Code。這是由上述「 name Open Edge DevTools」的配置定義的。

        {
            "name": "Launch Edge Headless and attach DevTools",
            "configurations": [
                "Launch Microsoft Edge in headless mode",
                "Open Edge DevTools"
            ]
        },

此複合配置名稱「Launch Edge Headless」並「附 DevTools」，顯示在 Visual Studio Code 的除錯工具列中。

複合配置 2：啟動 Edge 並附加 DevTools

此複合構型可啟動以下組件：

Edge DevTools：瀏覽器分頁 () 在 Visual Studio Code。這是由上述「 name 啟動 Microsoft Edge」的設定定義。
Microsoft Edge 瀏覽器視窗。這是由上述「 name 啟動 Microsoft Edge」的設定定義。
Edge DevTools 分頁 (窗格) 在 Visual Studio Code。這是由上述「 name Open Edge DevTools」的配置定義的。

        {
            "name": "Launch Edge and attach DevTools",
            "configurations": [
                "Launch Microsoft Edge",
                "Open Edge DevTools"
            ]
        }

此複合組態的名稱「Launch Edge and attach DevTools」會出現在 Visual Studio Code 除錯工具列的使用者介面中。

新增配置

你可以自訂額外的除錯配置。點擊 「新增設定 」按鈕。

另請參閱

launch.json其他平台

在 Visual Studio Code 文件中設定 C/C++ 除錯。
在 Visual Studio Code 文件中的「使用 React in Visual Studio Code」中設定除錯器。

意見反應

此頁面對您有幫助嗎？

Last updated on 2025-11-27