微軟項目經理 Paul Gildea 發博說，他們針對 Web 開發人員，發布了一個新的 VS Code 擴展—— Elements for Microsoft Edge，這個擴展還是一個預覽版，目的是讓開發者更好地在瀏覽器工具和編輯器中操作和調試 HTML 和 CSS 的問題。
對 Web 開發人員來說，當在 DevTools 和 IDE 之間中完成相同的任務時，不同的工作流混在一起會覺得很不方便，所以 Paul Gildea 提出三方面改進：
Elements for VS Code 擴展就是簡化工作流的第一步，從 VS Code 中直接檢查和調試 DOM，並實時查看更改對頁面的影響。
如果想要安裝 Elements for Microsoft Edge 擴展，首先安裝 Microsoft Edge 的 Dev 或 Canary 版本，然後從 VS Code 市場安裝 Elements for Microsoft Edge VS Code 擴展，兩個安裝完畢后，在 VS Code 中打開工作項目，之後會在側欄看到一個新的圖標：
單擊這個圖標將會進入目標列表，該列表將顯示 Microsoft Edge 的任何可調試實例。如果當前沒有可調試的實例，則可以單擊 + 按鈕啟動新實例並將其附加到其中。或者，可以在 Launch.json 文件中使用任務，就像使用其他類型的調試器擴展一樣。
添加瀏覽器實例將打開新元素工具面板，顯示站點或應用程序的 HTML 文檔結構和 CSS 樣式信息，如下圖，如果經常使用 Microsoft Edge DevTools 或其他 Chromium 驅動的瀏覽器工具，應該熟悉這個視圖。
要在元素擴展中查看網站的實時視圖，只需按下「Toggle Screencast」按鈕即可，這個視圖將在對 CSS 和 HTML 進行更改時實時更新，因此不必離開 VS Code 來查看更改情況。
Paul Gildea 還表示不打算將 Microsoft Edge DevTools 從瀏覽器中完全遷移到 IDE 中。
查看示例或反饋問題地址：
[admin
]
來源：OsChina
連結：https://www.oschina.net/news/108219/vs-code-extension-debug-dom
VS Code 新擴展，面向 Web 開發人員調試 DOM已經有234次圍觀
