一、安裝Debugger for Chrome擴展插件

二、配置運行環境

最左側菜單找到調試(一個蟲子樣圖標)，點擊下圖中紅色標注或者直接按F5：

然后出現下圖所示：

選擇Chrome，會生成Launch.json文件：{

// 使用 IntelliSense 了解相關屬性。

// 懸停以查看現有屬性的描述。

// 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387

"version": "0.2.0",

"configurations": [

{

"type": "chrome",

"request": "launch",

"name": "運行 Chrome 打開 localhost",

"url": "http://localhost:8080/src",

"webRoot": "${workspaceFolder}"

},//訪問localhost:8080/src

{

"name": "運行 Chrome 打開 index.html",

"type": "chrome",

"request": "launch",

"file": "${workspaceFolder}/html/index.html"

}//訪問靜態文件index.html

]

}

上面兩種配置分別是訪問url和文件。

注意：VSCode不會提供Web服務器的環境，需要我們用其他Web服務器(IIS、Nginx等)部署到localhost才能訪問對應的url。

如果不需要部署到localhost，可以使用第二種配置，直接訪問靜態頁面。

三、選擇運行環境

四、按F5運行程序，在VS Code設置斷點并調試

總結

以上是生活随笔為你收集整理的visualstudio调试html,Visual Studio Code中调试JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。

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