6

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

 1 year ago
source link: https://www.liesauer.net/blog/post/make-tauri-frontend-side-better-debugging-experience-as-a-regular-web-app.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
  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




  1. {
  2.   "build": {
  3.     "devPath": "DEV_SERVER_URL"
  4.   }
  5. }


3. 开启Remote Debugging



添加以下环境变量，并将12345改为你想要的任意可用端口：
WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS = --remote-debugging-port=12345


4. 启动Tauri App



5. 配置Launch Task



VS Code添加以下Launch Task





  1. {
  2.     "type": "msedge",
  3.     "request": "attach",
  4.     "name": "Attach to tauri webview",
  5.     "port": 12345,
  6.     "webRoot": "${workspaceFolder}",
  7.     "sourceMaps": true
  8. }



6. F5启动调试



187635800-e7e19a83-ba96-4628-82ae-5899a81f77cf.gif



        

        

            

                report
            

        

    







        
Recommend

        



                

    
About Joyk

    
 





Aggregate valuable and interesting links.

Joyk means Joy of geeK