[Neueste] Die beste Lösung, um VSCode zum Debuggen von [Vue, React]-Frontend-Projekten zu verwenden

Wie wir alle wissen, ist das frühere vscode-Plug-in [Debugger für Chrome] veraltet und wurde durch [JavaScript Debugger] ersetzt.

Dies ist 神器sehr einfach zu bedienen, unabhängig davon, ob Sie es verwendenwebpack、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"
    }
  ]
}

Setzen Sie einen Haltepunkt in vscode , starten Sie dann das Projekt über die Befehlszeile und beginnen Sie dann mit dem Debuggen in vscode , da zu diesem Zeitpunkt aufgrund der Startmethode der Standardbrowser geöffnet wird.

Aktualisieren Sie den Browser und Sie können sehen, dass der vscode-Haltepunkt wirksam geworden ist.

Der Nachteil der Verwendung von Launch zum Starten des Browsers besteht darin, dass einige vorhandene Plug-Ins nicht verwendet werden können. Zu diesem Zeitpunkt können Sie auch die Anhängemethode auswählen.

Ich werde hier nicht viel vorstellen. Wenn Sie Hilfe benötigen, senden Sie mir bitte eine private Nachricht