適用於 Visual Studio Code 的 Microsoft Edge DevTools 擴充功能可讓您直接從 Visual Studio Code 中使用 Microsoft Edge DevTools 和內嵌版本的 Microsoft Edge 瀏覽器，包括裝置模擬。 DevTools 延伸模組提供許多與 Visual Studio Code 中 Microsoft Edge 瀏覽器 DevTools 相同的工具。
Visual Studio Code 是適用於 Windows、Linux 和 macOS 的輕量級但功能強大的原始碼編輯器。 Visual Studio Code 是一個完整的 IDE (整合式開發環境) ，具有強大的 Web 開發功能。 Visual Studio Code 包含 JavaScript、TypeScript 和 Node.js 的內建支援，因此對於網頁開發人員來說是絕佳的工具，尤其是使用此 DevTools 擴充功能時。
Visual Studio Code 的開發工具延伸模組可讓您：
開發網頁並使用 DevTools，而不需要離開 Visual Studio Code。 此擴充功能可讓您替代在瀏覽器視窗中使用 DevTools 進行網頁開發。
模擬裝置，例如在開發期間以各種檢視區大小顯示網頁。
從 Visual Studio Code 中測試網頁的協助工具。
即時編輯 CSS 和 SASS，並在編輯實際來源檔案時，立即在瀏覽器執行個體中查看您的變更。 CSS 鏡像編輯可讓您控制是否儲存對檔案的
.css變更。 DevTools 會開啟並編輯您的.css檔案，但不會自動儲存檔案，因此您可以決定和控制是否要儲存在 [元素] 工具的 [樣式] 索引標籤中所做的變更。
比較的方法
Visual Studio Code 的開發工具延伸模組是使用 開發工具變更本機檔案的數種不同方式之一。
| 方法 | 優點和缺點 | 文章 |
|---|---|---|
| 瀏覽器開發 > 工具 >元素 工具 | 您必須手動將 DevTools 的變更複製到來源檔案。 | 使用元素工具檢查、編輯和偵錯 HTML 和 CSS |
| 瀏覽器 > DevTools >來源 工具 >[工作區 ] 索引標籤，用於定義 工作區 | 一律儲存變更，這可能會阻礙實驗 | 選取本機工作區，以使用 DevTools 在 [來源工具概觀] 中編輯檔案並儲存對磁碟的變更 |
| 瀏覽器開發>工具>設定>實驗>Visual Studio Code 中的開放原始碼檔案 | 一律儲存變更，這可能會阻礙實驗 | 在 Visual Studio Code 中開啟來源檔案 |
| 適用於 Visual Studio Code 的 Microsoft Edge DevTools 擴充功能 | 自動開啟和編輯 CSS 來源檔案，但不會自動儲存檔案，因此您可以選擇是否要儲存編輯。 | 本文。 |
雙向編輯
變更會反映在開啟資料夾、 Edge DevTools 索引標籤和 Edge DevTools： 瀏覽器 索引標籤中的來源檔案之間，如下所示。
CSS
透過 CSS 鏡像編輯，您可以在 Edge DevTools 索引標籤中變更 CSS，它會在 OR .css 來源檔案中.html自動變更，並反映在 Edge DevTools：瀏覽器索引標籤中。DevTools 可讓您決定是否要儲存變更，讓您進行實驗。
您可以在 或.html來源檔案中.css變更 CSS、儲存變更，然後在 [Edge 開發工具：瀏覽器] 索引標籤中重新載入網頁，這也會更新 Edge 開發工具索引標籤。
HTML
您可以在 [Edge DevTools ] 索引標籤中編輯 DOM 樹狀結構 (例如變更 <h2>Success!</h2> 為 <h2>CSS Success!</h2>) ，然後按 Enter，然後重新整理 Edge DevTools：瀏覽器索引 標籤以查看變更。 (這不會自動編輯 .html 來源檔案。)
您可以變更來源檔案中的 .html HTML 程式碼、儲存變更，然後在 [Edge 開發工具：瀏覽器 ] 索引標籤中重新載入網頁，這也會更新 Edge 開發工具 索引標籤。
開發人員工具支援的工作
Visual Studio Code 的開發工具延伸模組可讓您：
| 工作 | 文章 |
|---|---|
| 使用 DevTools 為您的專案啟動新的瀏覽器執行個體。 | 開啟 DevTools 和 DevTools 瀏覽器 |
| 模擬不同的裝置，並在不同的顯示模式下查看您的專案。 | 裝置模擬 |
| 使用 [元素 ] 工具檢視頁面的執行階段 DOM 結構和版面配置。 | 從 [元素] 工具開啟來源檔案 |
| 透過即時預覽和專案來源檔案的即時變更來分析和變更專案的 CSS 樣式。 | 從 [樣式] 工具內更新.css檔案 (CSS 鏡像編輯) |
| 使用 網路 工具分析網站流量。 | 網路工具整合 |
| 記錄資訊、試用 JavaScript，以及使用 主控台 工具存取 Window/DOM。 | 主控台整合 |
| 使用 應用程式 工具檢查存儲和服務工作者。 | 應用程式工具整合 |
| 在 Visual Studio Code 偵錯工作流程中使用擴充功能。 | 與 Visual Studio Code 偵錯整合 |
DevTools 延伸模組中的工具概觀
下列工具包含在 Visual Studio Code 的開發工具延伸模組中。 下列文章並非特別著重於 Visual Studio Code 的 DevTools 擴充功能，而是針對 Microsoft Edge 瀏覽器 DevTools。
| 工具 | 用途 | 文章 |
|---|---|---|
| [元素] 工具 | 檢查、編輯及偵錯您的 HTML 和 CSS。 您可以在工具中進行編輯，同時在瀏覽器中即時顯示變更。 使用 DOM 樹狀結構偵錯 HTML，並檢查和處理網頁的 CSS。 | 使用元素工具檢查、編輯和偵錯 HTML 和 CSS |
| 控制台 工具 | DevTools 內智慧型、豐富的命令列。 與其他工具一起使用的絕佳配套工具。 提供強大的方式來編寫指令碼功能、檢查目前網頁，以及使用 JavaScript 來操作目前網頁。 | 主機概觀 |
| 網路 工具 | 使用 [網路 ] 工具來確保資源如預期下載或上傳。 檢查個別資源的屬性，例如 HTTP 標頭、內容或大小。 | 檢查網路活動 |
| 應用程式 工具 | 使用 應用程式 工具來管理 Web 應用程式頁面的儲存體，包括資訊清單、服務工作者、本機儲存體、Cookie、快取記憶體及背景服務。 | [應用程式] 工具，用於管理儲存空間 |
| 問題 工具 | [ 問題] 工具會自動分析目前網頁、依類型報告問題，並提供文件以協助說明和解決問題。 | 使用問題工具尋找並修正問題 |
| 網路狀況 工具 | 使用 網路狀況 工具停用瀏覽器快取、設定網路節流、設定使用者代理程式字串，以及設定內容編碼，例如 deflate、gzip 和 br。 | 網路狀況工具 |
| 網路要求封鎖 工具 | 使用 [網路要求封鎖] 工具來測試封鎖對指定 URL 模式的網路要求，並查看網頁的行為。 | 網路要求封鎖工具 |
| 檢查 工具 | 使用 [檢查 ] 工具查看轉譯網頁中項目的相關資訊。 當 [檢查 ] 工具處於作用中狀態時，您可以 將游標停留 在網頁中的項目上，DevTools 會在網頁上新增資訊重疊和格線醒目提示。 | 使用 [檢查] 工具分析頁面 |
| 裝置模擬 | 使用 [裝置模擬 ] 工具 ，也稱為 [裝置模擬模式] 或 [裝置模式]，來估算頁面在行動裝置上的外觀和回應程度。 | (裝置模擬) 模擬行動裝置 |
如需 Microsoft Edge 瀏覽器版本開發工具中所有工具的清單，請參閱 關於工具清單。
另請參閱
外部頁面：
- Supercharging VS Code Live Server - 如果您使用 Visual Studio Code 中的即時伺服器延伸模組來即時查看網頁產品中的變更，您可以使用適用於 Visual Studio Code 的 Microsoft Edge DevTools 擴充功能，將瀏覽器和 DevTools 內嵌在 Visual Studio Code 中，以進一步改善體驗。
- 使用者入門 - Visual Studio Code 文件。
- vscode-edge-devtools 存放庫 - 適用於 Visual Studio Code 之 Microsoft Edge 開發人員工具延伸模組的原始程式碼。
- Visual Studio Marketplace 中適用於 Visual Studio Code 的 Microsoft Edge DevTools 擴充功能。