與 Visual Studio Code 除錯的整合

要在 Visual Studio Code 中以除錯模式使用 DevTools UI 開啟 DevTools，請右鍵點擊檔案.html或點擊啟動專案按鈕，詳情請參考開啟 DevTools 及 DevTools 瀏覽器。 你也可以利用 Visual Studio Code UI 啟動除錯器，例如 F5，開啟 DevTools 分頁，只要在 Microsoft Edge 工具側邊欄點擊「產生launch.json」按鈕，即可開啟 DevTools 分頁launch.json。

當你在 Visual Studio Code 的除錯模式下開啟 DevTools 時，會開啟以下 UI 元件：

• Edge DevTools 標籤。
• Edge DevTools：瀏覽器標籤。
• 除錯工具列。
• Run (Debugger) 側邊欄，包括手錶面板。
• 視窗底部的 除錯主控台 。

另見 步驟5：在除錯器 中透過 右鍵點擊 HTML 檔案逐步完成 JavaScript 程式碼。

啟動除錯器以及開發工具分頁的方法

大多數這些方法都需要一個由 DevTools 產生 launch.json 的檔案，裡面包含你的 URL。

DevTools UI 功能可在除錯模式下開啟 DevTools

• 在檔案總管>裡用 .htmlEdge 開啟一個檔案。 這種方法基本上是使用檔案路徑而非 URL，且不需要你產生 launch.json 檔案。

• 活動酒吧>Microsoft Edge 工具> 點擊 啟動專案 按鈕。

Visual Studio Code 在除錯模式下開啟 DevTools 的 UI 功能

• 按 [F5]****。

• 在 活動欄，點擊執行 與除錯 圖示 (執行 ) ，然後在 執行與除錯 側欄點選執行 與除錯 按鈕。

• 打開 Visual Studio Code 指令面板，開始輸入「debug」這個字，接著>選擇「除錯：開啟連結」。 請參考 VS Code 中瀏覽器除錯中的「開啟連結」指令。

在除錯時開啟瀏覽器

你可以在除錯時開啟 Edge DevTools：瀏覽器 分頁 (嵌入的 DevTools 瀏覽器) 。 DevTools 擴充功能會以 Visual Studio Code 內嵌瀏覽器的形式開啟一個新的瀏覽器。 這個 Devtools： 瀏覽器 分頁可以在編輯器內任意移動。 你可以將這個分頁與原始碼並列使用，或拆分窗格，讓瀏覽器預覽顯示在程式碼下方：

你可以用 DevTools 擴充功能搭配一般的 Visual Studio Code 除錯 UI/工作流程，如下所示。 在此方法中，進入除錯模式時，我們不使用 DevTools 介面;我們沒有右鍵點擊.html檔案來選擇「用 Edge 開啟」，也沒有點擊活動欄>的Microsoft Edge 工具>啟動專案按鈕。

JavaScript 除錯功能內建於 Visual Studio Code;你可以在 Chrome、Microsoft Edge 或 Node.js 中除錯，無需安裝擴充功能。 如果你使用 Microsoft Edge 選項搭配 Visual Studio Code 除錯功能和使用者介面來除錯，就可以從 JavaScript 除錯器啟動 Microsoft Edge DevTools。 如果 DevTools 擴充功能尚未安裝，系統會提示你選擇性安裝。

DevTools 擴充功能提供額外功能，例如內建的 DevTools 瀏覽器，內含裝置模擬工具列，並提供更多方式進入 Visual Studio Code 除錯模式。

另請參閱:

• 使用外部瀏覽器視窗時，嵌入 DevTools 瀏覽器的限制。

啟動除錯器

要啟動 Visual Studio Code 除錯器與 DevTools，使用Visual Studio Code中常見的介面：

1. 開啟一個新的 Visual Studio Code 視窗。 沒有資料夾 (工作區) 開啟， DevTools 分頁也沒開。

2. 打開工作區 (資料夾) 。 例如，選擇「 近期檔案>開啟>C:\Users\username\Documents\GitHub\Demos\demo-to-do」。 DevTools 分頁沒有開啟。

3. 打開檔案 .html 。

4. 在編輯器中點選檔案.html，然後執行以下任一 UI 動作，啟動 Visual Studio Code 除錯器，並以常見方式啟動：

   • 按 [F5]****。

   • 在 活動列中，點擊執行 與除錯 圖示 () ，然後在 執行與除錯 側欄點擊執行 與除錯 按鈕，如下所示。

   • 打開 Visual Studio Code 指令面板，開始輸入「debug」這個字，然後選擇「除錯：開啟連結」。

   

   Microsoft Edge Tools 沒有出現在上面的截圖中，因為這張截圖中 DevTools 已經卸載。

5. 選擇 網頁應用程式 (Edge) 。

6. 在除錯工具列中，點擊 檢查 按鈕，該按鈕有 「開啟瀏覽器開發工具」的提示：

   

   當你第一次點擊除錯工具列上的 檢查 按鈕時，會開啟擴充 功能：市場 側邊欄，裡面包含 Microsoft Edge Tools for VS Code：

   

7. 點擊 Microsoft Edge 工具安裝 VS Code>。

8. 關閉 DevTools 後再關閉 DevTools。

9. 打開一個資料夾和一個 .html 檔案。

請繼續往下看。

產生以 DevTools 為導向的launch.json

假設開啟的資料夾裡沒有 .vscode 另一個資料夾已經包含檔案 launch.json ：

1. 選擇 活動列>Microsoft Edge Tools，> 點擊 產生launch.json 按鈕，然後按 F5。 或者，請參閱 開啟 DevTools 和 DevTools 瀏覽器。

   安裝 DevTools 擴充功能後，當你打開.html檔案並點擊除錯工具列上的檢查按鈕時，Visual Studio Code 內的 Edge DevTools 分頁會開啟：

   

   在上面的截圖中，檔案總管裡資料夾裡.vscode有一個launch.json檔案，視窗底部有一個字串「Launch Edge Headless and attach DevTools」，因為 DevTools 是由 Visual Studio Code 功能（如 F5）開啟，該功能使用了 DevTools 產生launch.json的檔案。

2. 如有需要，在 Edge DevTools 分頁左上角，點擊切換 螢幕投播 按鈕：

   

   Edge DevTools：瀏覽器 分頁打開。

   在上面的截圖中，檔案總管.vscode裡的資料夾裡沒有launch.json檔案，也沒有像是「啟動 Edge Headless」和「附加 DevTools」這類字串，因為 DevTools 是透過在檔案總管右鍵點擊.html該檔案開啟的。

如需更多 UI 步驟與截圖，請參閱「 名稱字串在 UI 中出現的位置」。 在大多數情況下，你只需要知道 DevTools 產生 launch.json 檔案的內容，只要在字串裡多處輸入你想要的網址 "url" 。

在 Visual Studio Code 除錯時自動開啟瀏覽器與 DevTools

要除錯你的專案，你可能想在 Visual Studio Code 中更改 Microsoft Edge 開啟的預設頁面。 要將預設頁面改為您的專案網站：

1. 在 Visual Studio Code 中，選擇「新視窗檔案>」。 注意沒有開啟任何資料夾。

2. 在 活動列中，選擇 Microsoft Edge Tools。

3. 在 Microsoft Edge 工具：目標 面板中，點選「 開啟資料夾 」連結。

4. 選擇你的專案資料夾，使用新的預設頁面，在 Visual Studio Code 中開始除錯時顯示。

   第一次打開資料夾時，必須確認你信任該資料夾中檔案的作者：

   

5. 可選擇「 信任父資料夾中所有檔案的作者」勾選框，然後點擊 「是，我信任作者 」按鈕：

   第一次執行此步驟時，你必須再次選擇Microsoft Edge 工具的活動欄>。

   Microsoft Edge 工具：目標面板現在顯示兩個按鈕：啟動實例與產生launch.json：

   

產生以 DevTools 為導向的launch.json

1. 選擇產生launch.json以在您的專案中建立 。launch.json 這必須是 DevTools 建立的較長檔案，如 The launch.json 檔案中所示，而非 Visual Studio Code 建立的較短且通用的檔案。 另見 DevTools 擴充功能故障排除中的刪除或重建launch.json。

2. 在 launch.json中，新增你專案的網址。 如果你把網址留空，預設頁面就會顯示出來。

3. 儲存 launch.json。

當你選擇在 Visual Studio Code 中除錯專案時，無論你使用 DevTools 的 UI 功能還是一般的 Visual Studio Code UI，它都會自動啟動瀏覽器並開啟開發者工具，顯示你在檔案中launch.json指定的網址。

如果你看到成功頁面但想要自己的網頁

哪個網頁是在 DevTools 中開啟，取決於 launch.json 該檔案是否存在於你的工作區 (開啟的資料夾) 。 因此，你可能在自己檔案開啟時.html按 F5，卻在 DevTools 分頁看到預設的成功頁面。 在這種情況下，有以下選項：

• 在你開啟的資料夾裡編輯 launch.json ，指向一個 (通常) 的網址，或可能是檔案路徑。 接著你可以使用 Visual Studio Code 的除錯工作流程/介面，例如 F5。

• 或者，刪除 launch.json，然後 在活動欄>總管> 右鍵點擊你的 .html 檔案 > ，選擇 用 Edge 開啟。 這種方法不使用 Visual Studio Code 除錯器的工作流程/介面，例如 F5。

另請參閱

• DevTools 擴充功能的 launch.json 檔案
• 在 Visual Studio Code 中除錯 Microsoft Edge
• Microsoft Edge DevTools 擴充套件 for Visual Studio Code
• Visual Studio Code除錯器現在已與 DevTools 擴充功能整合， (Microsoft Edge 93) 。

外部頁面：

• 請在 Visual Studio Code 的除錯文章中啟動設定。
• VS Code 中的瀏覽器除錯