How to debug (Front-end/Tauri Core) Tauri App with vscode

[kieuminhcanh]

Debug Tauri App Core

• Document here: https://tauri.app/v1/guides/debugging/vs-code

Debug Front-end (Nuxt, Vue, Reactive,...)

1. Run app in dev mode. And then close app when it's open.

yarn tauri dev

2. Edit your .vscode\launch.json

{  
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Front-end App Debug",
      "type": "msedge",
      "port": 9222,
      "request": "launch",
      "runtimeExecutable": "${workspaceFolder}/src-tauri/target/debug/app.exe", // Path to your app in debug mode.
      "useWebView": true,
      "webRoot": "${workspaceFolder}",
      "preLaunchTask": "ui:dev"
    },   
  ],
}

3. Edit your .vscode\tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "ui:dev",
      "type": "shell",
      "isBackground": true,
      "command": "yarn",
      "args": [
        "dev"
      ],
    },
  ]
}

In vscode > Run and Debug Panel > Select Front-end App Debug > F5 for start debug.

[amrbashir]

This is really nice I wasn't aware the VSCode msedge debugger supported webviews.
I took the liberty to make some modifications and refinements:

• eliminated the need to run yarn tauri dev before debugging
• add notes that this configuration only works on Windows
• removed explicit port so it can be automatically picked up
• also added the core debugging from https://tauri.app/v1/guides/debugging/vs-code for a complete debugging example files

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "lldb",
            "request": "launch",
            "name": "Tauri Core Development",
            "cargo": {
                "args": [
                    "build",
                    "--manifest-path=./src-tauri/Cargo.toml",
                    "--no-default-features"
                ]
            },
            // task for the `beforeDevCommand` if used, must be configured in `.vscode/tasks.json`
            "preLaunchTask": "ui:dev"
        },
        {
            "type": "lldb",
            "request": "launch",
            "name": "Tauri Core Production",
            "cargo": {
                "args": [
                    "build",
                    "--release",
                    "--manifest-path=./src-tauri/Cargo.toml"
                ]
            },
            // task for the `beforeBuildCommand` if used, must be configured in `.vscode/tasks.json`
            "preLaunchTask": "ui:build"
        },
        {
            // this configuration works only on Windows
            "name": "Tauri Frontend (Windows)",
            "type": "msedge",
            "request": "launch",
            "runtimeExecutable": "${workspaceFolder}/src-tauri/target/debug/app.exe", // Path to your app in debug mode
            "useWebView": true,
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "ui:dev&core:buildDebug"
        },
    ],
}

.vscode/tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "ui:dev",
            "type": "shell",
            "isBackground": true,
            // change this to your `beforeBuildCommand`
            "command": "pnpm",
            "args": [
                "dev"
            ],
        },
        {
            "label": "ui:build",
            "type": "shell",
            // change this to your `beforeDevCommand`
            "command": "pnpm",
            "args": [
                "build"
            ]
        },
        {
            "label": "core:buildDebug",
            "type": "shell",
            "command": "cargo",
            "args": [
                "build",
                "--manifest-path=./src-tauri/Cargo.toml",
                "--no-default-features"
            ],
            "problemMatcher": [
                "$rustc"
            ],
        },
        {
            "label": "ui:dev&core:buildDebug",
            "dependsOn": [
                "core:buildDebug",
                "ui:dev"
            ]
        }
    ]
}

[kieuminhcanh]

@amrbashir, Thanks, Very details.
But Rust App is usually not change much then we don't need to rebuild every time we want to debug front-end.

[amrbashir]

It will still be fine to build it before starting to debug the front-end, because if you didn't make changes to the rust App, cargo build will take less than a second to finish because Cargo will detect it was already compiled and nothing has changed since the last cargo build.

[amrbashir]

The 1 or 2 second tradeoff is worth it because now, all you need to do is just hit F5 and start debugging

[eikowagenknecht]

Using this version, the frontend debugging does not work any more. The app is not started as long as the ui:dev task is running. When I cancel that task, the app is then loaded (but of cause can't connect to the server any more because I just killed it). Maybe because of microsoft/vscode#6209 ?

[eikowagenknecht]

This is excellent and should be in the official documentation.

[AuTa]

Now both the front-end and tauri can be debugged independently, but I cannot start debugging both at the same time.

[w276549916]

@kieuminhcanh @amrbashir hey guys, is there a way can debug both at the same time?

[imranrajjad]

Hit F12 on your Tauri UI window to bring out the Debugger

[Explosion-Scratch]

Any solution for MacOS?

[Explosion-Scratch]

Just an update that around the time I posted this I fiddled with a lot of stuff - I tried various paths in the config and searched around and everything and didn't find a solution.

[moc67331]

Same here. I don't think there's a solution for this, most likely because vscode doesn't support debugging for WebKit. To resolve this, Tauri would need to bundle Chromium (see tauri-apps/wry#1064), or vscode would need to support the WebKit Inspector Protocol. However, I'm not an expert in this field, so if anyone has more knowledge, I'd appreciate some help.