開啟 DevTools 與 DevTools 瀏覽器

有幾種方式可以開啟 DevTools 標籤和 Edge DevTools： 瀏覽器 標籤：

以下將說明這些方法。 關於使用 Demos 倉庫的詳細步驟，請參考 Visual Studio Code 的 DevTools 擴充功能開始。

右鍵點擊 HTML 檔案開啟 DevTools

此方法會以除錯模式開啟 DevTools 分頁，建議除非網頁需要在網頁伺服器上執行，如某些 API。

要開啟 DevTools 和嵌入式瀏覽器，以及硬碟中 HTML 檔案的除錯工具列：

1. 在 Visual Studio Code 中，請執行以下任一操作：

   • 選擇 活動欄>、檔案總管 () > 點擊 開啟資料夾 按鈕。
   • 選擇「 檔案>開啟資料夾」。
   • 選擇「最近開啟檔案>」。

2. 打開一個包含網頁應用程式原始碼檔案的資料夾。

3. 在 Visual Studio Code 的檔案總管中，右鍵點擊檔案.html，選擇「以 Edge 開啟」，然後選擇「用 DevTools 開啟瀏覽器」：

   

   DevTools 開啟，Visual Studio Code 處於除錯模式：

   

   以下元件可在 Visual Studio Code 開啟：

   • Edge DevTools 分頁，包括 Elements 分頁和其他工具分頁。
   • Edge DevTools： 瀏覽器 分頁，包括底部的裝置模擬工具列。
   • 頂部的除錯工具列，包含暫停、跨步、進入、重置和停止等按鈕。
   • 底部是除錯主控台。
   • 執行與除錯側邊列 (選擇檢視>執行) 。

此方法中，實例不會被列在Microsoft Edge 工具>目標的活動欄>中。

在除錯網頁時，使用活動欄的檔案總管側欄開啟.js檔案。

Edge DevTools： 瀏覽器分頁包含裝置模擬工具列。 此分頁包含內建 DevTools 功能的網頁瀏覽器。 這個瀏覽器有時被稱為 螢幕錄影 或 DevTools 的 無頭瀏覽器 。

另請參閱:

• 開始時，右鍵點擊 HTML 檔案

點擊啟動實例按鈕開啟 DevTools

這種方式會以非除錯模式開啟 DevTools 分頁，當你不想使用除錯工具列時很有用。

這些步驟假設一開始 Visual Studio Code 沒有開啟任何資料夾，且你打開的資料夾也沒有launch.json檔案。

1. 在 Visual Studio Code 中，請執行以下任一操作：

   • 選擇 活動欄>總管 () > 點 選開啟資料夾 按鈕。
   • 選擇「 檔案>開啟資料夾」。
   • 選擇「最近開啟檔案>」。

   要使用 DevTools 的所有功能，包括在 DevTools 編輯 CSS 時對本地原始檔案的 CSS 鏡像編輯，請開啟一個資料夾，裡面有與你想在 DevTools 顯示網頁相符的原始碼檔案。

2. 在 活動列中，點擊 Microsoft Edge 工具) ，然後點擊 啟動實例 按鈕：

   

   如果有「 啟動專案 」按鈕而不是 「啟動實例 」按鈕，表示該資料夾包含一個 launch.json 檔案。 檢查檔案中 launch.json 指定的 URL，並考慮點擊啟動 專案，如開啟開發工具時所描述的， 點擊啟動專案按鈕。 或者，如果你想了解 啟動實例 按鈕的運作方式，可以刪除該 launch.json 檔案，之後再產生新 launch.json 檔案。

   

   • Edge DevTools 標籤會開啟，最初包含成功頁面的資訊，例如 C:\Users\username\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.1\out\startpage\index.html。
   • Edge DevTools：瀏覽器標籤 (嵌入的瀏覽器) 開啟，最初顯示 成功 頁面。
   • Visual Studio Code 的除錯工具列和除錯介面無法開啟。
   • 在 Microsoft Edge 工具 面板中，會開啟 目標區塊 ，列出目標，啟動 實例 按鈕被移除。

3. 在 Edge DevTools：瀏覽器分頁的地址列，貼上一個檔案路徑或網址，與 Visual Studio Code 中開啟的資料夾相符。

   如果你想取得檔案路徑：在Visual Studio Code活動欄>的檔案總管 (按鈕) >> 右鍵點擊.html>檔案複製路徑。

   如果你想貼上網址，範例如下：

   • http://localhost:8080
   • http://127.0.0.1:8080
   • http://10.0.1.8:8080

   類似的網址也會顯示在命令列，例如輸入 () npx http-server 以在本地運行網頁伺服器。

   你指定的網頁會顯示在 Edge DevTools：瀏覽器分頁 (嵌入的瀏覽器) 。 Edge DevTools 標籤會顯示網頁相關資訊。

另請參閱:

• 點擊啟動實例按鈕即可開始

點擊啟動專案按鈕開啟 DevTools

此方法會在除錯模式下開啟 DevTools 分頁，若網頁需要在網頁伺服器上執行，如某些 API，建議採用此方法。

摘要：

1. 打開一個包含網頁應用程式原始碼檔案的本地資料夾。
2. 點擊 「產生launch.json 」按鈕。
3. 在檔案中 .json 新增 localhost 網址。
4. 點擊 啟動專案 按鈕。

這些步驟假設你正在運行 localhost 網頁伺服器，詳見步驟 6：在安裝 Visual Studio Code 的 DevTools 擴充套件中設定 localhost 伺服器。

點擊 啟動專案 按鈕開啟 DevTools，請執行以下步驟。

打開包含網頁應用程式原始碼檔案的本地資料夾

1. 在 Visual Studio Code 中，請執行以下任一操作：

   • 選擇 活動欄>總管 () > 點選 「開啟資料夾 」按鈕。
   • 選擇「 檔案>開啟資料夾」。
   • 選擇「最近開啟檔案>」。

   選擇包含網頁原始檔案的目錄。 例如，C:\Users\username\Documents\GitHub\Demos\demo-to-do\。

2. 在 活動列中，點擊 Edge Tools Microsoft () 。 Microsoft Edge 工具面板打開。

   • 如果資料夾中還沒有 .vscode 包含 launch.json file的目錄， Microsoft Edge 工具 側邊欄會有一個 啟動實例 按鈕和一個 產生launch.json 按鈕。

   • 如果資料夾中已有 .vscode 包含 launch.json 檔案的目錄， Microsoft Edge 工具 側邊欄會有一個 啟動專案 按鈕，而非 產生launch.json 按鈕。 在這種情況下，你可能需要檢查或更改 url 現有 launch.json 檔案中的字串，如下所述。

請繼續往下看。

點擊「產生launch.json」按鈕

1. 點擊 產生launch.json 按鈕：

   

   新 launch.json 檔案打開。

請繼續往下看。

在 .json 檔案中新增 localhost 網址

1. 在檔案的 launch.json 幾個地方，每 "url" 行往右捲動，並注意註解：「請提供你的專案網址以完成設定」：

   "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
   

   典型例子：

   • http://localhost:8080
   • http://127.0.0.1:8080
   • http://10.0.1.8:8080

   當你輸入 npx http-server. 來啟動伺服器時，命令列會顯示類似的網址。

2. 將路徑貼入引號路徑字串中的其中一個 "url" 字串。 例如：

   "url": "http://localhost:8080", // Provide your project's url to finish configuring
   

   URL 字串可以是本地檔案路徑，不過在這種情況下，你不需要檔案launch.json;要啟動 DevTools，你可以直接在 Visual Studio Code 的檔案總管中右鍵點擊檔案.html。

   (如果你保持 URL 不變，預設的 成功 頁面會顯示，你可以將 localhost URL 或檔案路徑貼到 Edge DevTools： 瀏覽器 分頁的地址列 )

3. 將修改過的網址行複製貼上到檔案的其他 launch.json 位置。 要同時修改所有實例，你可以複製更新後的 URL 字串，然後選擇初始 URL 字串的實例，按 Ctrl+Shift+L 選取所有實例，最後貼上更新後的字串。

4. 存檔 launch.json 。

請繼續往下看。

點擊啟動專案按鈕

1. 在Visual Studio Code，活動欄中點選Microsoft邊緣工具) 按鈕。 Microsoft Edge 工具面板開啟，現在新增了啟動專案按鈕 (取代啟動實例按鈕) ，且不再有產生launch.json檔案按鈕：

   

2. 點擊 啟動專案 按鈕。

   Edge DevTools 標籤和 Edge DevTools： 瀏覽器標籤分開，分別在不同窗格中開啟，顯示以下欄位指定的launch.json網頁應用程式 URL：

   

另請參閱:

• 點擊啟動專案按鈕即可開始

將 URL 檔案映射到已開啟的資料夾

如果 DevTools 能夠將從伺服器下載的檔案與你打開資料夾中的檔案對應並建立工作區對應，DevTools 就能提供完整功能，包括當你在 DevTools 中更改 CSS 時，為本地原始檔案做 CSS 鏡像編輯。

如果 DevTools 無法將 Edge DevTools： Browser 標籤中的檔案對應到你在 Visual Studio Code 檔案總管中開啟的資料夾檔案，你可以檢查網頁並進行修改，例如在 Edge DevTools 標籤中元素工具的 Sources 標籤中更改 CSS 值。不過在這種情況下，你不能用 CSS 鏡像編輯，讓 DevTools 自動編輯你的原始檔案。 選項包括：

• 在樣式標籤中清除 CSS 鏡像編輯的勾選框，繼續嘗試 CSS 變更。

• 打開一個包含與網頁相符原始檔案的資料夾。

• 透過在 Visual Studio Code 開啟資料夾來賦予該資料夾信任。

例如：

1. 使用Visual Studio Code的DevTools擴充功能，打開你本機版Demos倉庫中的資料夾，例如C:\Users\username\Documents\GitHub\Demos\demo-to-do\，如《Get Started》中所述。

2. 如上所述，開啟 DevTools。

3. 在 Edge DevTools：瀏覽器 標籤的地址列中，貼上遠端 github.io 網址，例如 https://microsoftedge.github.io/Demos/demo-to-do/。

   該地址的檔案實際上是以原始檔案的形式存在於 GitHub 上 https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do，而不是在你的硬碟上。

   你現在可以在元素工具中更改 CSS 值，因為在 Visual Studio Code 的檔案總管中，有一個資料夾打開，裡面包含 DevTools 能將這些原始碼檔案對應到組成網頁的下載資源檔案：

   

   上圖顯示的是使用 Styles 標籤，並勾選 CSS 鏡像編輯 勾選框，將正文放大至 24 位元。 Edge DevTools： Browser 標籤會隨著你改變數值而渲染頁面。 分頁的地址列顯示的是 URL 而非檔案路徑。 由於選取了 CSS 鏡像編輯 的核取方塊，且對應 .css 檔案位於可寫入的本地資料夾中，本地 .css 磁碟上的檔案會自動被編輯成 24pt;。

避免鏡像或映射錯誤訊息

接著，試著在沒有開啟對應資料夾的情況下更改 CSS：

1. 選擇>「檔案關閉資料夾」。

2. 如上所述，點擊 啟動實例 按鈕即可啟動 DevTools。

3. 在 Edge DevTools：瀏覽器 標籤的地址列中，貼上遠端 github.io 網址，例如 https://microsoftedge.github.io/Demos/demo-to-do/。

   現在包含原始檔案的資料夾已經關閉，如果你嘗試在 Elements 工具中更改 CSS 值，會跳出 DevTools 錯誤訊息。 你可以檢查網頁，但不能編輯它們。 你可以透過 Edge DevTools：瀏覽器 標籤底部的裝置模擬工具列，與該頁面互動，並在不同裝置中查看其呈現狀態。

   你也可以檢查 CSS 和 HTML。 但如果你嘗試更改頁面，會跳出錯誤訊息，例如鏡 像時出現錯誤：

   

   作為另一種觀點，這裡是 Microsoft Edge 工具 側邊欄，當點擊 啟動實例 按鈕時，當查看 URL 且資料夾未開啟且包含與該 URL 資源相符的原始檔案時：

   

此案的選項包括：

• 在樣式標籤中清除 CSS 鏡像編輯的勾選框，繼續嘗試 CSS 變更， (不自動編輯原始檔案中的 CSS) 。 這避免了關於 CSS 鏡像編輯時映射到原始檔案的錯誤訊息。

• 打開一個包含與網頁相符原始碼檔案的資料夾，這樣就能自動編輯原始碼檔案中的 CSS。

• 在 Visual Studio Code 開啟資料夾時，可以授權信任，以防 DevTools 嘗試編輯原始檔案但Visual Studio Code還沒信任包含的資料夾。

另請參閱:

• DevTools 擴充功能故障排除

網址、檔案路徑，以及開啟相符資料夾

在某些情況下，DevTools 對檔案路徑的行為與 URL 不同。

• 如果你在 DevTools 瀏覽器的地址列輸入檔案路徑，並在 DevTools 編輯 CSS，瀏覽器就會知道來源檔案在哪裡。 你可能需要打開那個資料夾，才能信任它，才能使用 CSS 鏡像編輯。 或者，清除 CSS 鏡像編輯 的勾選框。

• 如果你在 DevTools 瀏覽器的網址列輸入網址，瀏覽器會知道下載的原始檔案副本在哪裡，前提是你只是檢查網頁並嘗試 CSS。 如果你想使用 CSS 鏡像編輯 (，讓 DevTools 在原始碼檔案) 中編輯 CSS，必須勾選 CSS 鏡像編輯的勾選框，並且你必須在 Visual Studio Code 中開啟包含與網頁相符原始碼檔案的資料夾。

關閉 DevTools

使用以下任一方法接近 DevTools 的實例：

• 如果 Visual Studio Code 處於除錯模式，請點擊除錯工具列中的停止按鈕，或選擇執行>停止除錯：

  

  Edge DevTools 與 Edge DevTools：瀏覽器分頁會關閉。

• 如果 Edge DevTools 分頁開啟 ，請點擊 該分頁上的 (x) 關閉。

• 如果 Edge DevTools： 瀏覽器 分頁開啟，請點擊該分頁上的 關閉 (x) 。

• 選擇 活動欄>Microsoft Edge Tools。 如果 目標區塊 有列出任何目標，請將滑鼠移到目標實例右側，然後點擊 關閉實例 (x) ：

  

  接著會顯示啟動 實例 或 啟動專案 按鈕。

• 選擇>「檔案關閉資料夾」。

• 關閉 Visual Studio Code 視窗。

• 如果 DevTools 擴充功能開啟了外部自動化控制的瀏覽器，請關閉該外部瀏覽器視窗。

另請參閱

• 開始使用 Visual Studio Code 的 DevTools 擴充功能
• Microsoft Edge DevTools 擴充套件 for Visual Studio Code
• 使用外部瀏覽器視窗時，嵌入 DevTools 瀏覽器的限制。