一、安裝Debugger for Chrome擴(kuò)展插件

二、配置運(yùn)行環(huán)境

最左側(cè)菜單找到調(diào)試(一個(gè)蟲(chóng)子樣圖標(biāo))，點(diǎn)擊下圖中紅色標(biāo)注或者直接按F5：

然后出現(xiàn)下圖所示：

選擇Chrome，會(huì)生成Launch.json文件：{

// 使用 IntelliSense 了解相關(guān)屬性。

// 懸停以查看現(xiàn)有屬性的描述。

// 欲了解更多信息，請(qǐng)?jiān)L問(wèn): https://go.microsoft.com/fwlink/?linkid=830387

"version": "0.2.0",

"configurations": [

{

"type": "chrome",

"request": "launch",

"name": "運(yùn)行 Chrome 打開(kāi) localhost",

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

"webRoot": "${workspaceFolder}"

},//訪(fǎng)問(wèn)localhost:8080/src

{

"name": "運(yùn)行 Chrome 打開(kāi) index.html",

"type": "chrome",

"request": "launch",

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

}//訪(fǎng)問(wèn)靜態(tài)文件index.html

]

}

上面兩種配置分別是訪(fǎng)問(wèn)url和文件。

注意：VSCode不會(huì)提供Web服務(wù)器的環(huán)境，需要我們用其他Web服務(wù)器(IIS、Nginx等)部署到localhost才能訪(fǎng)問(wèn)對(duì)應(yīng)的url。

如果不需要部署到localhost，可以使用第二種配置，直接訪(fǎng)問(wèn)靜態(tài)頁(yè)面。

三、選擇運(yùn)行環(huán)境

四、按F5運(yùn)行程序，在VS Code設(shè)置斷點(diǎn)并調(diào)試

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。