對(duì) Web 開發(fā)人員來(lái)說(shuō)，當(dāng)在 DevTools 和 IDE 之間中完成相同的任務(wù)時(shí)，不同的工作流混在一起會(huì)覺得很不方便，所以 Paul Gildea 提出三方面改進(jìn)：
-
在 DevTools 中修改 CSS 時(shí)，快速將更改更新到源代碼
-
在 DevTools 中對(duì) HTML/CSS 進(jìn)行多次修改時(shí)，降低丟失更改的可能性
-
快速對(duì)源代碼進(jìn)行更改，并在瀏覽器中看到該更改
Elements for VS Code 擴(kuò)展就是簡(jiǎn)化工作流的第一步，從 VS Code 中直接檢查和調(diào)試 DOM，并實(shí)時(shí)查看更改對(duì)頁(yè)面的影響。
如果想要安裝 Elements for Microsoft Edge 擴(kuò)展，首先安裝 Microsoft Edge 的 Dev 或 Canary 版本，然后從 VS Code 市場(chǎng)安裝 Elements for Microsoft Edge VS Code 擴(kuò)展，兩個(gè)安裝完畢后，在 VS Code 中打開工作項(xiàng)目，之后會(huì)在側(cè)欄看到一個(gè)新的圖標(biāo)：
單擊這個(gè)圖標(biāo)將會(huì)進(jìn)入目標(biāo)列表，該列表將顯示 Microsoft Edge 的任何可調(diào)試實(shí)例。如果當(dāng)前沒有可調(diào)試的實(shí)例，則可以單擊 + 按鈕啟動(dòng)新實(shí)例并將其附加到其中?；蛘撸梢栽?Launch.json 文件中使用任務(wù)，就像使用其他類型的調(diào)試器擴(kuò)展一樣。
添加瀏覽器實(shí)例將打開新元素工具面板，顯示站點(diǎn)或應(yīng)用程序的 HTML 文檔結(jié)構(gòu)和 CSS 樣式信息，如下圖，如果經(jīng)常使用 Microsoft Edge DevTools 或其他 Chromium 驅(qū)動(dòng)的瀏覽器工具，應(yīng)該熟悉這個(gè)視圖。
要在元素?cái)U(kuò)展中查看網(wǎng)站的實(shí)時(shí)視圖，只需按下“Toggle Screencast”按鈕即可，這個(gè)視圖將在對(duì) CSS 和 HTML 進(jìn)行更改時(shí)實(shí)時(shí)更新，因此不必離開 VS Code 來(lái)查看更改情況。
Paul Gildea 還表示不打算將 Microsoft Edge DevTools 從瀏覽器中完全遷移到 IDE 中。
查看示例或反饋問題地址：
