周所周知,曾经的vscode插件【debugger for chrome】已经弃用,取而代之的是【JavaScript Debugger】。
这款神器
使用非常简单,无论你使用webpack、vite,无论是react、vue项目,只需在.vscode/launch.json添加如下配置:
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "launch",
"name": "Launch Edge against localhost",
"url": "http://localhost:8848", //你自己的项目运行地址
"webRoot": "${workspaceFolder}/src"
}
]
}
在vscode中打上断点,之后先通过命令行启动项目,然后在vscode启动调试即可,因为launch的方式,此时会打开默认浏览器。
刷新浏览器,可以看到vscode断点已经生效。
使用launch启动浏览器的坏处是不能使用已存在的一些插件,这时候也可以选择attach的方式附加。
在这里就不多介绍了,有需要帮助的欢迎私信