Microsoft Edge DevTools 擴充套件適用於 Visual Studio Code，讓你能直接在 Visual Studio Code 內使用 Microsoft Edge DevTools 及嵌入式版本的 Microsoft Edge 瀏覽器，包含裝置模擬功能。 DevTools 擴充套件提供許多與 Microsoft Edge 瀏覽器中 DevTools 相同的工具，這些工具來自 Visual Studio Code 內部。
Visual Studio Code 是一款輕量但強大的 Windows、Linux 和 macOS 原始碼編輯器。 Visual Studio Code 是一個完整的 IDE (整合開發環境) ，具備強大的網頁開發功能。 Visual Studio Code內建支援 JavaScript、TypeScript 和 Node.js，對網頁開發者來說是很棒的工具，尤其是搭配這個 DevTools 擴充功能。
Visual Studio Code 的 DevTools 擴充功能讓你能夠：
開發網頁並使用 DevTools，不用離開 Visual Studio Code。 這個擴充功能提供你在瀏覽器視窗中使用 DevTools 網頁開發的替代方案。
模擬裝置，例如在開發過程中以不同視口大小顯示你的網頁。
在 Visual Studio Code 內測試你的網頁無障礙功能。
即時編輯 CSS 和 SASS，編輯原始碼時，瀏覽器實例會立即反映你的變更。 CSS 鏡像編輯讓你能控制是否要將變更儲存到檔案
.css中。 DevTools 會開啟並編輯你的.css檔案，但不會自動儲存檔案，讓你能決定並控制是否在元素工具的樣式標籤中儲存所做的變更。
比較方法
Visual Studio Code 的 DevTools 擴充功能是多種使用 DevTools 更改本地檔案的方法之一。
| 方法 | 優缺點 | 文章 |
|---|---|---|
| 瀏覽器>開發工具>元素工具 | 你必須手動從 DevTools 複製變更到你的原始檔案。 | 使用 Elements 工具檢查、編輯及除錯 HTML 與 CSS |
| 瀏覽器 > 開發工具 >來源工具>Workspace 標籤以定義 工作區 | 它總是能保存變更，這可能會讓你不願意嘗試 | 選擇本地工作區，使用 DevTools 編輯檔案並在「來源工具總覽」中儲存變更到磁碟 |
| 瀏覽器開發>工具>設定>實驗>Visual Studio Code 開源檔案 | 它總是能保存變更，這可能會讓你不願意嘗試 | 實驗 >在 Visual Studio Code 中開啟原始碼檔案。 |
| Microsoft Edge DevTools 擴充套件 for Visual Studio Code | 它會自動開啟並編輯 CSS 原始檔案，但不會自動儲存檔案，所以你可以選擇是否儲存編輯。 | 本文。 |
雙向剪輯
變更會在開啟資料夾、 Edge DevTools 標籤頁及 Edge DevTools： 瀏覽器 標籤中的原始檔案中反映，具體如下。
CSS
透過 CSS 鏡像編輯，你可以在 Edge DevTools 分頁更改 CSS，且 or .css 原始檔案會自動更改.html，也會反映在 Edge DevTools： Browser 標籤中。DevTools 讓你決定是否儲存變更，讓你可以多嘗試。
你可以在 .css or .html 原始碼檔更改 CSS，儲存變更後，再在 Edge DevTools： Browser 標籤重新載入網頁，這也會更新 Edge DevTools 標籤。
HTML
你可以在 Edge DevTools 標籤頁編輯 DOM 樹 (例如改 <h2>Success!</h2> 成 <h2>CSS Success!</h2>) ，然後按 Enter，再重新整理 Edge DevTools：瀏覽器 標籤以查看變更。 (這不會自動編輯 .html 原始檔案。)
你可以在原始檔案中更改 HTML .html ，儲存變更後，再在 Edge DevTools： Browser 標籤重新載入網頁，這樣也會更新 Edge DevTools 標籤。
開發者工具支援的任務
Visual Studio Code 的 DevTools 擴充功能允許您：
| 工作 | 文章 |
|---|---|
| 即時分析你原始碼中的問題。 | 線上與即時議題分析 |
| 用 DevTools 為你的專案建立一個新的瀏覽器實例。 | 開啟 DevTools 與 DevTools 瀏覽器 |
| 模擬不同裝置，並以不同的顯示模式查看你的專案。 | 裝置模擬 |
| 使用 元素 工具查看執行時的 DOM 結構與頁面版面配置。 | 從 Elements 工具開啟原始碼檔案 |
| 透過即時預覽和即時變更，分析並更改專案的 CSS 樣式。 | 在樣式工具中更新.css檔案 (CSS 鏡像編輯) |
| 利用 網路 工具分析網站流量。 | 網路工具整合 |
| 記錄資訊、試用 JavaScript，並使用 Console 工具存取 Window/DOM。 | 主機整合 |
| 使用 應用程式 工具檢查儲存與服務人員。 | 應用工具整合 |
| 在 Visual Studio Code 除錯工作流程中使用擴充功能。 | 與 Visual Studio Code 除錯的整合 |
DevTools 擴充套件中工具概述
以下工具包含在 Visual Studio Code 的 DevTools 擴充功能中。 以下文章並非專門針對 Visual Studio Code 的 DevTools 擴充套件，而是針對 Microsoft Edge 瀏覽器 DevTools 的。
| 工具 | 用途 | 文章 |
|---|---|---|
| Elements 工具 | 檢查、編輯並除錯你的 HTML 和 CSS。 你可以在工具中編輯，同時在瀏覽器中即時顯示變更。 用 DOM 樹除錯你的 HTML，檢查並修改網頁的 CSS。 | 使用 Elements 工具檢查、編輯及除錯 HTML 與 CSS |
| 控制台 工具 | DevTools 內建一個智慧且豐富的指令列。 是搭配其他工具的絕佳搭配工具。 提供強大的腳本功能編寫、檢查當前網頁，並使用 JavaScript 操作當前網頁。 | 主控台概述 |
| 網路 工具 | 使用 網路 工具確保資源的下載或上傳都如預期般完成。 檢查單一資源的屬性，例如 HTTP 標頭、內容或大小。 | 檢查網路活動 |
| 應用 工具 | 使用 應用程式 工具管理網頁的儲存空間，包括清單、服務工作者、本地儲存、Cookie、快取儲存及背景服務。 | 應用程式工具，用於管理儲存 |
| 議題 工具 | 問題工具會自動分析當前網頁，依類型分組報告問題，並提供文件以協助解釋與解決問題。 | 使用 Issues 工具找出並修正問題 |
| 網路條件 工具 | 使用 網路條件 工具來停用瀏覽器快取、設定網路限速、設定使用者代理字串，以及設定內容編碼如 deflate、gzip 和 br。 | 網路條件工具 |
| 網路請求阻擋 工具 | 使用 網路請求阻擋 工具來測試對特定 URL 模式的阻擋網路請求，並觀察網頁的行為。 | 網路請求阻擋工具 |
| 檢查 工具 | 使用 檢查 工具查看渲染網頁中物品的相關資訊。 當 檢查 工具啟動時，你將 滑鼠移 到網頁上的項目上，DevTools 會在網頁上新增資訊覆蓋層和格線標示。 | 使用 Inspect 工具分析頁面 |
| 裝置模擬 | 使用 裝置模擬 工具，也稱為 裝置模擬模式 或 裝置模式，來模擬您的頁面在行動裝置上的外觀與回應。 | 模擬行動裝置 (裝置模擬) |
關於 Microsoft Edge 瀏覽器版 DevTools 中所有工具的清單，請參見 「關於工具清單」。
另請參閱
外部頁面：
- Supercharging VS Code Live Server - 如果你使用 Visual Studio Code 中的 Live Server 擴充功能來即時查看網頁產品的變更，透過使用 Microsoft Edge DevTools for Visual Studio Code 擴充功能，將瀏覽器和 DevTools 嵌入 Visual Studio Code 中，體驗會更佳。
- 使用者入門 - Visual Studio Code 文件。
- vscode-edge-devtools repo - Microsoft Edge 開發者工具擴充套件（Visual Studio Code）的原始碼。
- Microsoft Edge DevTools 擴充套件，適用於 Visual Studio Marketplace 中的 Visual Studio Code。