【最新】使用VSCode调试【Vue、React】前端项目的最佳解决方案

周所周知，曾经的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的方式附加。

在这里就不多介绍了，有需要帮助的欢迎私信