【一起学Rust | 框架篇 | Tauri2.0框架】Tauri App开启远程调试功能

news/2024/7/20 20:53:21 标签: rust, 开发语言, 后端, Tauri, 调试, 安卓, ios

文章目录

  • 前言
  • 一、搭建PageSpy环境
  • 二、接入SDK
  • 三、进行远程调试
    • 调试控制台
    • 网络抓包
    • 审查元素
  • 四、延伸


前言

Tauri在Rust圈内成名已久,凭借Rust的可靠性,使用系统原生的Webview构建更小的App
以及开发人员可以灵活的使用各种前端框架而一战成名。

然而,这款年轻的框架却有着大量的问题待解决,在这种情况下,他竟然还出了2.0,想要支持安卓苹果端,在我看来步子还是跨的挺大的,有一个相当棘手的问题就是文档资料严重跟不上,大量内容需要用户主动去探索,并且出了问题也只能是自己解决。

不论如何,既然选择了Tauri,那就要解决这些麻烦。


本节内容为使用Tauri App使用远程调试功能,借助PageSpy提供的强大功能,Tauri可以很方便的调试自己的App,除断点调试无法实现外,抓包,元素审查,查看localstorage以及查看系统特性等功能都是可以使用的,基本可以满足调试要求,并且接入相当简单,推荐大家在使用Tauri调试移动端时使用。(比如安卓,tauri是可以读logcat的,但是总是会输出一些无关信息,影响开发效率,还是这种Chrome开发这工具的更方便,但logcat你也得学会看,这只是方不方便的区别)


一、搭建PageSpy环境

第一步先搭建PageSpy环境,首先找官方仓库,你只要在Github搜 page-spy-web 就可以了,当然也可以直接使用我的命令,前提是得有docker或者podman。

# docker 部署
docker run -d --restart=always -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:release
# podman 部署
podman run -d --restart=always -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:release

你也可以使用Node来部署

yarn global add @huolala-tech/page-spy-api
# 如果你使用 npm
npm install -g @huolala-tech/page-spy-api

安装完只要命令行运行page-spy-api启动服务,然后访问ip:6752就可以了。
打开页面显示

二、接入SDK

点击接入SDK就会出现
在这里插入图片描述然后在Tauri的src目录下(前端目录),找到index.html,添加这些内容

<script crossorigin="anonymous" src="http://localhost:6752/page-spy/index.min.js"></script>
<script>
   window.$pageSpy = new PageSpy();
</script>

在这里插入图片描述

localhost换成你的远程地址才可用

三、进行远程调试

此时运行你的项目,会出现一个logo
在这里插入图片描述表明已经连接到远程调试了,然后在PageSpy的Web页面进入房间页面,就会有你的设备
在这里插入图片描述选中你的设备调试即可。
在这里插入图片描述
能做Tauri开发说明你已经是个老玩家了,这个界面会相当熟悉,新手也不用慌,可以F12玩玩你的开发者工具。

调试控制台

控制台查看调试输出的内容,以及进行一些js命令的运行。
在这里插入图片描述

网络抓包

抓取请求响应,调试必备。
在这里插入图片描述

审查元素

在这里插入图片描述

四、延伸

PageSpy功能很强大,基本上,利用Webview来实现跨端App的,都可以拿来调试,如果开发工具没有像Uniapp一样自带真机调试功能,使用这种远程调试还是很值得的,而且想要去除也是相当容易。


http://www.niftyadmin.cn/n/5265504.html

相关文章

“分割“安卓用户,对标iOS;鸿蒙将携手程序员的春天

近期关于“华为于明年推出不兼容安卓的鸿蒙版本”的消息传出&#xff0c;引起了业界的热议关注。自从2019年8月&#xff0c;美国制裁下&#xff0c;华为不再能够获得谷歌安卓操作系统相关付费服务&#xff0c;如此情况下&#xff0c;华为“备胎”鸿蒙操作系统一夜转正。华为鸿蒙…

LeetCode-42. 接雨水【栈 数组 双指针 动态规划 单调栈】

LeetCode-42. 接雨水【栈 数组 双指针 动态规划 单调栈】 题目描述&#xff1a;解题思路一&#xff1a;单调栈&#xff0c;维护一个单调递减栈。每当遇到当前元素大于栈顶元素就出栈&#xff0c;在出栈时更新答案。当遇到出栈的情况&#xff0c;若单调栈栈左边有一个元素则必有…

电商控制台系统订单订单详情的整合

增删改查四个接口统一的规范 有5个接口 Add增 Delete 删除 Update 更新 查 按id查某个商品 findOne 查询所有 findAll 实现类实现5个接口 反射技术&#xff0c;反射到java bean当中的每一个属性。 Class.forName() 获取属性方法:getDeclaredFields() 构建增 删 查…

【算法】【动规】乘积为正数的最长子数组长度

跳转汇总链接 &#x1f449;&#x1f517;算法题汇总链接 1.1 乘积为正数的最长子数组长度 &#x1f517;题目链接 给你一个整数数组 nums &#xff0c;请你求出乘积为正数的最长子数组的长度。 一个数组的子数组是由原数组中零个或者更多个连续数字组成的数组。 请你返回乘积…

代码审计的未来趋势

代码审计的未来发展趋势&#xff0c;如人工智能、区块链、云计算等代码审计是一项非常重要的工作&#xff0c;可以帮助团队发现潜在的安全漏洞和缺陷。随着技术的不断发展&#xff0c;代码审计也在不断地发展和改进。本文将介绍代码审计的未来发展趋势&#xff0c;包括人工智能…

人机交互质量初探

人机交互中信息数量的多少可以用不确定性大小来衡量&#xff0c;即信息的丰富程度和包含的内容数量。当信息数量较大时&#xff0c;意味着提供的信息更加详尽和全面。然而&#xff0c;人机交互中信息质量的好坏不能单纯地通过数量来衡量&#xff0c;还需要考虑以下几个方面来评…

什么是PHP中的多态?

在面向对象编程&#xff08;OOP&#xff09;中&#xff0c;多态&#xff08;Polymorphism&#xff09;是一个重要的概念&#xff0c;它允许对象能够以多种形式进行操作。多态性使得具有相同接口的不同对象可以被同样的方式处理&#xff0c;从而提高了代码的灵活性和可扩展性。 …

Mrdoc知识文档

MrDoc知识文档平台是一款基于Python开发的在线文档系统&#xff0c;适合作为个人和中小型团队的私有云文档、云笔记和知识管理工具&#xff0c;致力于成为优秀的私有化在线文档部署方案。我现在主要把markdown笔记放在上面&#xff0c;因为平时老是需要查询一些知识点&#xff…