微軟發布VS Code新擴展面向Web開發人員調試DOM
微軟項目經理Paul Gildea 發博說，他們針對Web開發人員，發布了一個新的VS Code擴展—— Elements for Microsoft Edge，這個擴展還是一個預覽版，目的是讓開發者更好地在瀏覽器工具和編輯器中操作和調試HTML和CSS的問題。
對Web 開發人員來說，當在DevTools 和IDE 之間中完成相同的任務時，不同的工作流混在一起會覺得很不方便，所以 Paul Gildea 提出三方面改進：
- 在DevTools 中修改CSS 時，快速將更改更新到源代碼
- 在DevTools 中對HTML/CSS 進行多次修改時，降低丟失更改的可能性
- 快速對源代碼進行更改，並在瀏覽器中看到該更改
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 中。
查看示例或反饋問題地址：