適用于 Visual Studio Code 的 Microsoft Edge DevTools 擴充功能

  • 發行項

適用于 Visual Studio Code 的 Microsoft Edge DevTools 擴充功能可讓您直接從Visual Studio Code內使用 Microsoft Edge DevTools 和內嵌版本的 Microsoft Edge 瀏覽器，包括裝置模擬。 DevTools 擴充功能提供許多相同的工具，這些工具位於 Microsoft Edge 瀏覽器中的 DevTools 中，Visual Studio Code內。

Visual Studio Code中的 Microsoft Edge 開發人員工具和瀏覽器預覽

Visual Studio Code是適用于 Windows、Linux 和 macOS 的輕量型但功能強大的原始程式碼編輯器。 Visual Studio Code是完整的 IDE (整合式開發環境) ，具有 Web 開發的強大功能。 Visual Studio Code包含 JavaScript、TypeScript 和 Node.js 的內建支援，因此它是適用于 Web 開發人員的絕佳工具，尤其是此 DevTools 擴充功能。

適用于 Visual Studio Code 的 DevTools 擴充功能可讓您：

  • 開發網頁並使用 DevTools，而不需離開Visual Studio Code。 此擴充功能可讓您替代在瀏覽器視窗內使用 DevTools 進行網頁開發。

  • 模擬裝置，例如在開發期間以各種檢視區大小顯示網頁。

  • 從Visual Studio Code內測試網頁的存取範圍。

  • 即時編輯 CSS 和 SASS，並在編輯實際的原始程式檔時看到您的變更立即反映在瀏覽器實例中。 CSS 鏡像編輯可讓您控制是否要將變更儲存至檔案 .css 。 DevTools 會開啟並編輯您的 .css 檔案，但不自動儲存檔案，因此您可以決定是否要儲存您在[元素] 工具的 [樣式] 索引標籤中所做的變更。

比較的方法

適用于 Visual Studio Code 的 DevTools 擴充功能是使用 DevTools 變更本機檔案的數種不同方式之一。

方法 優點和缺點 文章
Browser > DevTools >Elements工具 您必須手動將 DevTools 的變更複製到原始程式檔。 使用 Elements 工具檢查、編輯及偵錯 HTML 和 CSS
瀏覽器 > DevTools >來源工具 >檔案系統索引標籤，以定義工作區 一律儲存變更，這可能會妨礙實驗 使用 [檔案系統] 索引標籤在來源工具概觀中定義本機工作區
瀏覽器 > DevTools >設定>實驗>Visual Studio Code 中的開放原始碼檔案 一律儲存變更，這可能會妨礙實驗 實驗 >：在Visual Studio Code中開啟原始程式檔。
適用于 Visual Studio Code 的 Microsoft Edge DevTools 擴充功能 自動開啟和編輯 CSS 原始程式檔，但不會自動儲存檔案，因此您可以選擇是否要儲存編輯。 目前的文章。

雙向編輯

變更會反映在開啟資料夾、 Edge DevTools 索引標籤和 Edge DevTools： Browser 索引標籤中的原始程式檔，如下所示。

Css

透過 CSS 鏡像編輯，您可以在[Edge DevTools] 索引標籤中變更 CSS，它會在 或 .css 原始程式檔中 .html 自動變更，以及反映在[Edge DevTools： Browser]索引標籤中。DevTools 可讓您決定是否要儲存變更，讓您可以進行實驗。

您可以在 或 原始程式檔中 .css 變更 CSS、儲存變更，然後在[Edge DevTools： 瀏覽器] 索引標籤中重載網頁，這也會更新[Edge DevTools] 索引卷標。 .html

HTML

您可以編輯 Edge DevTools 索引標籤中的 DOM 樹狀結構 (例如變更 <h2>Success!</h2> 為 <h2>CSS Success!</h2>) ，然後按 Enter，然後重新整理 Edge DevTools： Browser 索引標籤以查看變更。 (這不會自動編輯 .html 來源檔案。)

您可以在來源檔案中 .html 變更 HTML、儲存變更，然後在 [Edge DevTools： 瀏覽器 ] 索引標籤中重載網頁，這也會更新 [Edge DevTools] 索引卷 標。

開發人員工具支援的工作

適用于 Visual Studio Code 的 DevTools 擴充功能可讓您：

工作 文章
取得原始程式碼中問題的即時分析。 內嵌和即時問題分析
使用 DevTools 為您的專案啟動新的瀏覽器實例。 開啟 DevTools 和 DevTools 瀏覽器
模擬不同的裝置，並以不同的顯示模式查看您的專案。 裝置模擬
使用 Elements 工具來 檢視頁面的執行時間 DOM 結構和版面配置。 從 Elements 工具開啟原始程式檔
使用即時預覽和專案來源檔案的即時變更來分析和變更專案的 CSS 樣式。 從樣式工具內更新 .css 檔案 (CSS 鏡像編輯)
使用 網路 工具分析網站流量。 網路工具整合
記錄資訊、試用 JavaScript，並使用 主控台 工具存取 Window/DOM。 主控台整合
使用 應用程式工具檢查 儲存體和服務背景工作角色。 應用程式工具整合
在Visual Studio Code偵錯工作流程中使用 擴充功能。 與Visual Studio Code偵錯整合

DevTools 擴充功能中的工具概觀

下列工具組含在適用于 Visual Studio Code 的 DevTools 擴充功能中。 下列文章並未特別著重于適用于 Visual Studio Code 的 DevTools 擴充功能，而是適用于 Microsoft Edge 瀏覽器 DevTools。

工具 用途 文章
元素 工具 檢查、編輯和偵錯您的 HTML 和 CSS。 您可以在工具中編輯，同時在瀏覽器中即時顯示變更。 使用 DOM 樹狀結構對 HTML 進行偵錯，並檢查並處理您網頁的 CSS。 使用 Elements 工具檢查、編輯及偵錯 HTML 和 CSS
主控台 工具 DevTools 內的智慧型豐富命令列。 與其他人工具搭配使用的絕佳隨附工具。 提供強大的方法來編寫功能的腳本、檢查目前的網頁，以及使用 JavaScript 操作目前的網頁。 主控台概觀
網路 工具 使用 網路 工具，確定資源會如預期般下載或上傳。 檢查個別資源的屬性，例如 HTTP 標頭、內容或大小。 檢查網路活動
應用程式 工具 使用 應用程式工具 來管理 Web 應用程式頁面的儲存體，包括資訊清單、服務背景工作角色、本機儲存體、Cookie、快取儲存體和背景服務。 用來管理儲存體的應用程式工具
問題 工具 問題工具會自動分析目前的網頁、報告依類型分組的問題，並提供檔來協助說明和解決問題。 使用問題工具尋找並修正問題
網路條件 工具 使用 網路條件 工具來停用瀏覽器快取、設定網路節流、設定使用者代理程式字串，以及設定內容編碼，例如 deflate、gzip 和 br。 網路條件工具
網路要求封鎖 工具 使用 網路要求封鎖 工具來測試對指定 URL 模式的封鎖網路要求，並查看網頁的行為。 網路要求封鎖工具
檢查 工具 使用 [檢查] 工具可查看轉譯網頁內專案的相關資訊。 當 [檢查] 工具作用中時，您 會將滑鼠停留 在網頁中的專案上，而 DevTools 則會在網頁上新增資訊重迭和格線醒目提示。 使用檢查工具分析頁面
裝置模擬 使用 裝置模擬 工具，也稱為 裝置模擬模式 或 裝置模式，以近似您的頁面在行動裝置上的外觀和回應。 模擬裝置模擬 (裝置模擬)

如需 Microsoft Edge 瀏覽器版本 DevTools 中所有工具的清單，請參閱關於工具清單中的所有工具概觀。

另請參閱

外部頁面：