让Tauri前端部分调试如调试常规Web项目般丝滑

假设前提

1. 本文假设你有前端开发经验、VS Code使用经验。
2. 本文假设你有开发过、创建过Tauri项目的经验。
3. 本文并不会教你从零入门Tauri开发、使用以及避坑指南等。
4. 本文针对的是在Windows下的开发。

Rust端调试

关于Rust端的调试，官方文档也有比较详细的教程，这里不过多讲述，详细请看 Debugging in VS Code。

Web端调试

官方文档介绍的使用webview自带的dev tool调试前端代码，这在2022年来看，简直是山顶洞人般的做法。为什么这么说呢，有以下几点：

1. 没法在一个窗口里完成写代码、打断点调试操作，得在dev tool里打断点排查问题，再到VS Code里改代码，窗口切来切去，一个字，捞。
2. 没法得到很完善的代码追踪、代码引用等信息。

那么我们怎么能让调试Tauri前端部分就像调试一个常规Web项目一般方便丝滑呢？

1. 使用dev server

这个没什么好说的，tauri和常规web区别就是多了一套tauri api而已，常规Web怎么开dev server，tauri web部分就怎么开。

2. 修改devPath

修改以下配置为你dev server的地址：
src-tauri/tauri.conf.json

{
  "build": {
    "devPath": "DEV_SERVER_URL"
  }
}

3. 开启Remote Debugging

VS Code添加以下Task

{
    "label": "tauri dev",
    "type": "shell",
    "command": "yarn",
    "args": [
        "tauri",
        "dev"
    ],
    "options": {
        "env": {
            "WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS": "--remote-debugging-port=12345"
        }
    },
    "problemMatcher": []
}

4. 配置Launch Task

VS Code添加以下Launch Task

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

5. 启动Tauri App

Ctrl+Shift+T然后选择tauri dev，启动Tauri App。

6. F5启动调试

7. 完整示例项目

tauri-app.zip，使用方式请看README.md。