在過去幾個月中，我們一直與Web開發人員密切合作，通過在下一版Microsoft Edge上使用新的Chromium支持的DevTools基礎來了解如何簡化工作流程。我們在這些對話中聽到了一個一致主題：您希望花更多時間在喜歡的編輯器中處理代碼。鑒于您已經可以從VS Code調試Edge，下一個合乎邏輯的步驟是將最常用的瀏覽器工具Elements集成到VS Code中。

您可以在我們的新預覽VS Code擴展-Elements for Microsoft Edge中嘗試這一點。此擴展是一個初始預覽，旨在更好地了解您在瀏覽器工具和編輯器中操作和調試HTML和CSS的問題。要開始使用，請下載Microsoft Edge Insider預覽版本，然后安裝Elements for Microsoft Edge擴展。

為什么添加元素？

我們從開發人員那里得知，在嘗試通過DevTools和IDE完成相同的工作時混合不同的工作流是令人沮喪的。具體而言，我們確定了三個具有重大改進機會的領域：

• 在DevTools中修改CSS時，快速將更改帶回源代碼。
• 在DevTools中對HTML / CSS進行多次修改時，最大限度地減少丟失更改的可能性。
• 快速更改源代碼并查看瀏覽器中反映的更改。

▲在VS Code中打開的Microsoft Edge擴展元素&一個網站的實時預覽

VS代碼擴展的元素是我們通過使您能夠直接從VS代碼中檢查和調試DOM并實時查看更改對頁面的影響來簡化這些工作流的第一步。這種體驗從Elements選項卡開始，因為它是Microsoft Edge DevTools系列中最常用的工具，也是VS Code，它是迄今為止Web開發人員最常用的文本編輯器。

VS Code擴展-Elements for Microsoft Edge元素 

VS Code擴展允許您在編輯器中使用瀏覽器的Elements工具。Elements工具將連接到Microsoft Edge實例，使您能夠在不離開VS Code的情況下查看運行時的HTML結構，更改布局和修復樣式問題。注意：此擴展僅支持Microsoft Edge（Chromium）

此元素具備以下功能：

• 用于在遠程調試模式下啟動Microsoft Edge瀏覽器并自動附加工具的調試配置。
• 側欄視圖，用于列出所有可調試目標，包括選項卡、擴展、服務工作者等。
• 功能齊全的Elements工具，包含HTML、CSS、輔助功能等視圖。
• 屏幕播放功能，允許您在不離開VSCode的情況下查看頁面。

Elements for Microsoft Edge入門

若要嘗試使用Elements for Microsoft Edge擴展，請首先安裝Microsoft Edge的Dev或Canary通道預覽版本，然后從VS Code Marketplace 安裝Elements for Microsoft Edge VS Code擴展。

安裝完兩個后，打開VS Code到您要處理的項目，您將看到添加到側欄的新視圖： （Microsoft Edge圖標的元素）

單擊此按鈕將轉到顯示Microsoft Edge的任何可調試實例的目標列表。如果您當前沒有打開可調試目標，可以單擊加號（+）按鈕以啟動新實例并附加到該實例。或者，您可以在launch.json文件中使用任務，就像使用其他類型的調試器擴展一樣。

附加到瀏覽器實例將打開新的“元素”工具面板，顯示您的站點或應用程序的HTML文檔結構和CSS樣式信息。如下圖所示：

如果您經常使用Microsoft Edge DevTools或其他基于Chromium的瀏覽器工具，則此窗口看起來應該很熟悉。您可以導航DOM的結構，查看所選元素的樣式信息，更改CSS值和元素屬性，以及您在瀏覽器中的Elements工具中使用的任何其他內容。

要在Elements擴展程序中查看您網站的實時視圖，只需按“切換截屏視頻”按鈕即可。如下圖所示：

當您對CSS和HTML進行更改時，此視圖將實時更新，因此您無需離開VS代碼即可查看更改如何影響您網站的布局。

Microsoft Edge擴展的元素是Microsoft的又一個新嘗試，這意味著它不會是最完美的。如果您在使用過程中遇到問題，歡迎留言反饋或獲得解決辦法，我們將珍視您的建議和意見并反饋給廠商，以期將更完美的產品呈現給大家！

想要獲得 Visual Studio 更多資源或其他相關下載的朋友，請點擊這里。

想要購買正版 Visual Studio  產品的朋友，請。

有關慧都科技更多的精彩內容，請關注下方的微信公眾號↓↓↓