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

开发 · 2022-09-01
tauri hybrid app debugging vs code --remote-debugging-port remote debugging WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS
  1. Rock 2023-06-14

    博主你好! 请问第3步:开启Remote Debugging,是指配置在系统环境变量下吗? 我按照你的步骤执行到3、前端launch task后,vsc就警告:“无法连接到 localhost:9222 处的目标: Could not connect to debug target at http://localhost:9222: Could not find any debuggable target”, 这个错误是Remote Debugging没配置成功导致的吗?

    1. Rock 2023-06-14
      @Rock

      感谢博主的耐心回复,下载示例代码本地运行了一下,还是不行,应该是Mac下 Tauri app 不支持vsc 前端调试,launch.json 里 configurations 的type只有“chrome、msedge、pwa-chrome、pwa-msedge” 四种方式,没有Safari, 而Mac下 Tauri app 的Webview 是Safari内核,大概率是这个问题导致的。

      现在tauri app 运行之后,前端项目console.log 也无法打印,导致前端无法调试,真让人捉急啊!

      1. LiesAuer (作者)  2023-07-18
        @Rock

        你可能需要借助这个工具,https://github.com/google/ios-webkit-debug-proxy

    2. LiesAuer (作者)  2023-06-14
      @Rock

      文章最后已附带一个完整的示例项目,可以参考。

    3. Rock 2023-06-14
      @Rock

      感谢回复,但我发现忽略了一个最重要的问题,我是在Mac下开发,tauri app 集成的是Safari的DevTools,是不就不能用博主的这种方法了?

      博主有在Mac环境下下测试过吗?

    4. LiesAuer (作者)  2023-06-14
      @Rock

      你可以配置在系统环境变量下,但这会对所有使用了webview2的项目有侵入性。

      所以我推荐以下方式:
      https://pastebin.com/S2XSRkVw

      即在vsc中直接以附带环境变量的task来启动Tauri App,这样子就会打开调试端口了,端口号与第五点对应就行。

  2. hans 2022-12-13

    麻烦问下兄弟,这种debug是需要先开启devServer,然后在运行tauri程序,再在vscode里run launch task是吗,多谢!

    1. LiesAuer (作者)  2022-12-14
      @hans

      正常是这样的,而且tauri在debug run的时候会一直检查你的devServer状态的,如果你还没有开起来,他会一直等待的。如果你想连同rust端一起调试可以加一个launch task,具体配置可参考官网,顺序也是不变的。1. devServer 2. rust端launch task 3. 前端launch task,vsc是可以多任务同时调试的。

Theme Jasmine by Kent Liao