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

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



前言

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一样自带真机调试功能,使用这种远程调试还是很值得的,而且想要去除也是相当容易。

目录
打赏
0
0
0
0
5
分享
相关文章
鸿蒙NEXT时代你所不知道的全平台跨端框架:CMP、Kuikly、Lynx、uni-app x等
本篇基于当前各大活跃的跨端框架的现状,对比当前它们的情况和未来的可能,帮助你在选择框架时更好理解它们的特点和差异。
49 0
|
28天前
|
《仿盒马》app开发技术分享-- 回收订单页功能完善(45)
上一节我们实现了订单的待取件、已取消状态展示,并且成功实现了修改订单状态后的列表刷新,实现了云端数据的修改,这一节我们来实现订单页剩下的两个板块的业务逻辑,分别是运输中、已完成状态下的列表展示以及订单状态的修改
69 1
App Trace功能实战:一键拉起、快速安装与免提写邀请码的应用实践
App Trace系统通过一键拉起、快速安装和免提写邀请码三大功能,显著提升用户转化率、安装成功率和邀请注册率。结合深度技术实现与优化,助力公司用户增长,成为移动端核心基础设施。
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
206 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
28天前
|
UED
《仿盒马》app开发技术分享-- 扫一扫功能(35)
随着app的逐渐完善,我们现在需要在细节处做更多的打磨,在首页我们添加了很多静态的按钮和组件,现在我们开始对这些组件进行功能的添加,这次首先实现的是首页头部的扫一扫功能,扫一扫我们实现扫码后跳转商品详情页
70 0
《仿盒马》app开发技术分享-- 购物车功能完善(14)
上一节我们实现了购物车商品列表的状态切换,已添加商品数量的增减,已添加商品滑动删除,已添加商品在选中情况下的价格计算。这一节我们在这些功能的基础上实现云端记录,因为我们现在只有数据的查询是从云端获取的,其他的操作虽然都实现了相对应的功能,但是当我们操作完,关闭app,再打开不会有对应的记录,有的同学可能会说,那我们把数据用首选项或者数据库的形式存储就可以了吧? 那如果我更换了另一个设备那这些添加的数据是不是就又不能使用了?所以我们的每个操作,最好都是提交到云端,这样我们在其他设备,在退出应用,切换账号这些情况下都能很好的保存我们操作后的购物车状态。
70 0
《仿盒马》app开发技术分享-- 购物车基础功能实现(13)
上一节我们实现了加入购物车和购物车列表的简单展示。对一个电商类的应用来说,这很显然是不够的,我们的购物车内容应该更加的丰富,他需要用户能自主的去选择想要结算的商品,删除一些不需要的商品,或者取消掉一些本次不结算的商品,同时根据选择的不同,我们需要把相对应的价格和选择的数量等信息传递给用户,帮助用户节省更多的时间。
66 0
布谷一对一直播源码开发:阿里云视频语音通话社交交友App的必备功能
在当今移动社交领域,一对一视频和语音通话功能已成为用户期待的基础配置。从熟人社交到陌生人交友,从专业咨询到情感陪伴,实时音视频互动能力直接决定了社交App的用户留存和市场竞争力。山东布谷科技将深入探讨一对一直播源码开发高质量一对一视频和语音通话功能的关键要素和技术实现方案。
布谷一对一直播源码开发:阿里云视频语音通话社交交友App的必备功能
App内“邀请好友“功能:如何准确追踪邀请关系并自动发放奖励
探讨如何准确追踪APP“邀请好友”功能中的邀请关系并自动发放奖励
155 2
直播App程序源码开发前期功能调研:运营角度思考如何有利于推广运营获利
在直播App程序源码开发的前期,功能调研至关重要。除了技术实现的可行性,更需要从运营角度出发,思考哪些功能能够助力推广运营,最终实现获利。山东布谷科技从运营角度,对直播App功能进行调研分析

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等