[Último] La mejor solución para usar VSCode para depurar proyectos front-end [Vue, React]

Como todos sabemos, el antiguo complemento de vscode [depurador para Chrome] ha quedado obsoleto y se reemplazó por [JavaScript Debugger].

Esto es 神器muy fácil de usar, ya sea que 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"
    }
  ]
}

Coloque un punto de interrupción en vscode , luego inicie el proyecto a través de la línea de comando primero y luego comience a depurar en vscode , porque el navegador predeterminado se abrirá en este momento debido al método de inicio.

Actualice el navegador y podrá ver que el punto de interrupción de vscode ha entrado en vigor.

La desventaja de usar el lanzamiento para iniciar el navegador es que algunos complementos existentes no se pueden usar. En este momento, también puede elegir el método de conexión.

No presentaré mucho aquí, si necesita ayuda, bienvenido a un mensaje privado.