DevTools 擴充功能故障排除

• 務必以支援的方式或情境開啟 DevTools。 請參閱 開啟 DevTools 及 DevTools 瀏覽器。

控制 CSS 鏡像編輯

預設情況下，CSS 鏡像編輯的核取方塊會被勾選，該框位於 Edge DevTools 標籤的元素工具中，樣式標籤中。如果你用 DevTools 更改 CSS 值，但 DevTools 在 Visual Studio Code 中開啟的工作區 () 資料夾找不到相符的檔案，會出現關於 CSS 鏡像編輯時映射到原始檔案的錯誤訊息。

如果你在 DevTools 中更改 CSS，可以選擇：

• 選擇 CSS 鏡像編輯 的勾選框，並打開一個資料夾，裡面有與你用 DevTools 檢查網頁相符的原始碼檔案。

• 或者，清除 CSS 鏡像編輯 的核取框，以避免此類錯誤訊息。

另請參閱:

• 在 CSS鏡像編輯) 的樣式標籤中，從 Update .css files (
• 將 URL 檔案映射到Opening DevTools 和 DevTools 瀏覽器中已開啟的資料夾。

重新啟動 DevTools

重新啟動 DevTools 的一個強力方法是關閉並重新開啟資料夾：

1. 在 Visual Studio Code 中，選擇「關閉檔案>資料夾」。

2. 如果你在 Visual Studio Code 中使用 Terminal 啟動網頁伺服器，請重新啟動網頁伺服器，例如執行 npx http-server。 或者，你可以從 Visual Studio Code 外的命令提示字元啟動網頁伺服器，讓它持續執行。 更多資訊請參閱安裝 Visual Studio Code DevTools 擴充套件中的步驟 6：設定本地主機伺服器。

3. 在 Visual Studio Code 中，選擇「最近檔案>開啟」，並打開包含網頁原始碼檔案的資料夾。

關閉所有 DevTools 實例

通常，關閉兩個 DevTools 分頁會關閉所有 DevTools 和 DevTools 瀏覽器的實例。 如果除錯工具列開啟，點擊 停止 按鈕。

要重設 DevTools 狀態，請關閉所有 DevTools 實例。 請確保啟動實例按鈕顯示在 Visual Studio > Code 活動欄>的Microsoft Edge 工具側邊欄。 這表示沒有任何 DevTools 實例正在執行。

如有需要，請關閉所有 Visual Studio Code 實例，然後開啟 Visual Studio Code，並確保Microsoft Edge 工具側邊欄的活動欄>顯示啟動實例按鈕。

錯誤訊息

大多數錯誤訊息的解決方法是用推薦的方式開啟 DevTools。 確保有一個資料夾是打開的，裡面有網頁原始碼檔案，DevTools 可以把這些檔案對應到 DevTools 瀏覽器使用的檔案路徑或網址。

DevTools 瀏覽器會用你指定的 URL 或檔案路徑，以下方式如下：

如果您在 DevTools 瀏覽器的網址列輸入不同的 URL 或檔案路徑，DevTools 若要自動鏡像本地原始碼檔案，您必須開啟一個資料夾，裡面包含與網頁 (檔案路徑或 URL) 相符的檔案，並可在 DevTools 瀏覽器中指定。

假設你點擊 啟動實例 按鈕，然後把 localhost 網址貼到地址列 http://localhost:8080，例如 ，但你沒有開啟本地原始檔案資料夾。 接著在元素工具的 樣式 標籤中，嘗試更改 CSS 值。 可能會出現錯誤訊息，例如：

• 在鏡像 CSS 內容到文件時出錯。 無法將 CSS 變更鏡像到文件中。 沒有找到工作區映射。

• 無法在編輯器中開啟檔案。

• 在編輯器中開啟檔案時出現錯誤。

• 取回時出錯。

• 無法鎖定主要目標。

• 取得可用目標清單時出現錯誤。 沒有可用目標可附著。

如果你在指向檔案路徑時出現錯誤，與其使用 launch.json 檔案，不如右鍵點擊該 .html 檔案：

請參閱 開啟 DevTools 及 DevTools 瀏覽器。

刪除或重建launch.json

除了關閉並重新開啟資料夾外，如果你想重置專案以搭配 DevTools，也可以刪除並選擇性地重新建立 launch.json。 launch.json 定義除錯配置。

以下 launch.json 檔案對 DevTools 擴充功能來說太短。 它是由 Visual Studio Code 創建，並未使用 DevTools 擴充功能。 Demos 的 Demos 倉庫沒有 launch.json in demo-to-do，所以你可能想移除這個檔案：

要重新建立 DevTools 的新 launch.json 檔案：

1. 備份 launch.json 檔案。

2. 在 Visual Studio Code >活動欄>總管中，右鍵點擊launch.json>刪除。

   活動酒吧>Microsoft Edge 工具 現在會顯示啟動 實例 按鈕和 產生launch.json 按鈕。

3. 如果你想用 launch.json DevTools 檔案，請確保你在活動欄>的檔案總管裡開啟了想要的資料夾Visual Studio Code>，然後點擊產生launch.json按鈕。 請參閱開啟 DevTools 和 DevTools 瀏覽器中的「啟動專案」按鈕開啟 DevTools。

launch.json需要良好的 JSON

如果Edge Tools Microsoft活動欄>中，當開啟資料夾中有 DevTools 產生launch.json的檔案時，會用「配置launch.json」按鈕取代預期的啟動專案按鈕，這可能是因為新增了缺少逗號或空引號的行。 確保 launch.json 包含格式良好的 JSON。

另請參閱

• 開始使用 Visual Studio Code 的 DevTools 擴充功能
• Microsoft Edge DevTools 擴充套件 for Visual Studio Code
• 開啟 DevTools 與 DevTools 瀏覽器