[docs] how can i debug the frontend project in vs code with breakpoint instead of using the devtools

i have set devPath to https://localhost:8080/ which is served by the webpack-dev-server, the question is how can i connect to the tauri webview in vs code so i can debug directly in vs code with breakpoint supported instead of using the devtools to debug?

[amrbashir]

if you want to debug your regular web app without Tauri, you can still do that. Unfortunately with tauri, this is not possible since I couldn’t find a way to attach a remote debugger from VSCode to Linux’s Webkit2gtk or macOS’s WkWebview. Only Webview2 allows this.

For webview2, the debugging steps are easy:

• add this to .vscode/launch.json

  {
  	"type": "msedge",
  	"request": "attach",
  	"name": "Attach to tauri webview",
  	"port": 15567,
  	"webRoot": "${workspaceFolder}",
  	"sourceMaps": true
  }
  

• open a powershell instance and run: $env:WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS="--remote-debugging-port=1422"; npm run tauri dev and wait for tauri webview to launch
• press F5 in VSCode

[liesauer]

no, https://github.com/tauri-apps/tauri-invoke-http is not expected solution. no additional plugins or depencies, just one or two configuration, press F5, boom, you are good to go. this is exactly what i need to do when i debug a regular web project in vs code now. this should be the expected debugging experience when we are developing a web project no matter it is a regular web app or hybrid web app.