[Latest] The best solution to use VSCode to debug [Vue, React] front-end projects

As we all know, the former vscode plug-in [debugger for chrome] has been deprecated and replaced by [JavaScript Debugger].

This is 神器very easy to use, whether you usewebpack、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"
    }
  ]
}

Put a breakpoint in vscode , then start the project through the command line first, and then start debugging in vscode , because the default browser will be opened at this time because of the launch method.

Refresh the browser, and you can see that the vscode breakpoint has taken effect.

The disadvantage of using launch to start the browser is that some existing plug-ins cannot be used. At this time, you can also choose the attach method.

I won’t introduce much here, if you need help, welcome to private message