【最新】使用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断点已经生效。

【最新】使用VSCode调试【Vue、React】前端项目的最佳解决方案_第1张图片

使用launch启动浏览器的坏处是不能使用已存在的一些插件,这时候也可以选择attach的方式附加。

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

你可能感兴趣的:(vue.js,vscode,javascript)