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

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

為什么添加元素？

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

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

▲在VS Code中打開的Microsoft Edge擴展元素&一個網(wǎng)站的實時預(yù)覽

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

VS Code擴展-Elements for Microsoft Edge元素 

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

此元素具備以下功能：

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

Elements for Microsoft Edge入門

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

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

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

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

如果您經(jīng)常使用Microsoft Edge DevTools或其他基于Chromium的瀏覽器工具，則此窗口看起來應(yīng)該很熟悉。您可以導(dǎo)航DOM的結(jié)構(gòu)，查看所選元素的樣式信息，更改CSS值和元素屬性，以及您在瀏覽器中的Elements工具中使用的任何其他內(nèi)容。

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

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

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

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

想要購買正版 Visual Studio  產(chǎn)品的朋友，請。

有關(guān)慧都科技更多的精彩內(nèi)容，請關(guān)注下方的微信公眾號↓↓↓