使用外部瀏覽器視窗

預設情況下，DevTools 會在 Visual Studio Code 中開啟 Edge DevTools： 瀏覽器標籤。 另一種方法是讓 DevTools 開啟一個外部、自動化控制的 Microsoft Edge 視窗。

外部瀏覽器視窗

外部瀏覽器視窗 意指當你使用 Edge DevTools 擴充功能啟動瀏覽器實例時，會開啟一個完整的 Microsoft Edge 視窗，並由 DevTools 測試自動化控制：

當外部瀏覽器視窗開啟時，Edge DevTools： 瀏覽器標籤不會在啟動 DevTools 時開啟：

接著你點擊 Edge DevTools 分頁中的切換螢幕直播按鈕，Edge DevTools： 瀏覽器分頁會打開，顯示該分頁為非啟用狀態：

嵌入式 DevTools 瀏覽器

預設情況下，DevTools 會開啟 Visual Studio Code 中的 Edge DevTools： 瀏覽器標籤，而非直接開啟外部瀏覽器視窗。 Edge DevTools： 瀏覽器分頁底部包含一個裝置模擬工具列：

這個分頁也叫做：

• 無 頭瀏覽器，在 設定裡。
• 螢幕 投影，在工具提示中。
• 嵌入式瀏覽器。
• DevTools 瀏覽器。
• 內建的 DevTools 瀏覽器。

嵌入式 DevTools 瀏覽器的限制

Visual Studio Code DevTools 擴充功能中嵌入的 Edge DevTools 瀏覽器提供簡單且有許多限制的預覽，且不支援真實網頁瀏覽器的所有功能。 當你需要功能完整的瀏覽器時，請使用外部瀏覽器視窗，而非嵌入的瀏覽器。 嵌入式 DevTools 瀏覽器是一個沒有使用者介面的瀏覽器實例，並從中串流截圖畫面。 因此，並非所有使用者互動都被實作。

嵌入式 DevTools 瀏覽器有以下限制：

• 不支援拖放功能。
• onPasteCapture 事件 onPaste 不會觸發。
• CSS cursor 屬性不被尊重。
• 可能會有視覺效能的問題。

改變設定

要更改或檢查使用哪種瀏覽器視窗的設定：

1. 在 Visual Studio Code 中，選擇活動欄>Microsoft Edge Tools。 Microsoft Edge 工具側邊欄開啟。

2. 將滑鼠移到目標 右側，然後點擊 更多行動 (......) >開啟設定。

   

3. 如果你想使用 Visual Studio Code 中的 Edge DevTools： 瀏覽器標籤，請勾選無頭（Headless）勾選方塊。

   或者，如果你想使用外部自動化控制的瀏覽器視窗，請清除 Headless 的勾選框。

4. 關閉 DevTools。 請參閱開啟 DevTools 及 DevTools 瀏覽器中的關閉 DevTools。

5. 打開 DevTools。 請參閱 開啟 DevTools 及 DevTools 瀏覽器。

另請參閱

• 開始使用 Visual Studio Code 的 DevTools 擴充功能
• Microsoft Edge DevTools 擴充套件 for Visual Studio Code
• 在 Visual Studio Code 中除錯 Microsoft Edge

外部文章：

• VS Code 中的瀏覽器除錯