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

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

為什么添加元素？

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

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

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

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

VS Code擴(kuò)展-Elements for Microsoft Edge元素 

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

此元素具備以下功能：

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

Elements for Microsoft Edge入門

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

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

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

附加到瀏覽器實(shí)例將打開新的“元素”工具面板，顯示您的站點(diǎn)或應(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擴(kuò)展程序中查看您網(wǎng)站的實(shí)時(shí)視圖，只需按“切換截屏視頻”按鈕即可。如下圖所示：

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

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

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

想要購(gòu)買正版 Visual Studio  產(chǎn)品的朋友，請(qǐng)。

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