前言

要在VS Code中啟動Chrome或Microsoft Edge中調試任何Web程序，您只需按F5或選擇菜單"運行"->"啟動調試"來啟動會話。

你可以選擇在Chrome、Edge或Node.js中進行調試。

Edge DevTools

如果選擇了Edge進行調試，你會發現調試工具條上多出了一個名為“Open Browser Devtools”的按鈕。

點擊按鈕，如果是首次執行，VS Code會提示安裝Microsoft Edge DevTools for Visual Studio Code擴展：

然后，你就可以打開Edge DevTools，可以看到，與瀏覽器的開發者工具類似，"Elements"選項卡用于檢查DOM，"Network"選項卡用于查看在瀏覽器中運行的Web程序的網絡請求:?

高級設置

打開擴展設置，可以看到有一個Headless選項，選中它（需重啟VS Code）:

再次啟動調試，你會發現Edge DevTools中多了一個瀏覽器頁面。

現在，你就可以在不離開VS Code的情況下更改代碼或者CSS，直接看到修改效果：

結論

在VS Code中直接調試Web程序，感覺是不是很酷！

如果你覺得這篇文章對你有所啟發，請關注我的個人公眾號”My IO“，記住我！

總結

以上是生活随笔為你收集整理的在VS Code中直接调试Web程序，是怎样一种体验？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。