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

news2024/9/22 13:35:35

文章目录

  • 前言
  • 一、搭建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.coloradmin.cn/o/1311675.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

吴恩达《机器学习》12-2-12-3:大边界的直观理解、大边界分类背后的数学

一、大边界的直观理解 1. 大间距分类器的背景 支持向量机的大间距分类器着眼于构建一个能够在正负样本之间划定最大间距的决策边界。为了理解这一点&#xff0c;首先观察支持向量机的代价函数&#xff0c;其中涉及到正负样本的代价函数cos&#x1d461;1(&#x1d467;)和cos…

力扣二叉树--总结篇(2)

前言 总体回顾&#xff1a;11.18-12.14&#xff0c;中间有一个星期左右因为考试没有写题。37道题。 内容 这是第二阶段刷的题 从路径到构造二叉树&#xff0c;合并二叉树&#xff0c;再到二叉搜索树&#xff0c;公共祖先问题 看到二叉树&#xff0c;看到递归 都会想&#…

智慧工地源码(微服务+Java+Springcloud+Vue+MySQL)

智慧工地系统是依托物联网、互联网、AI、可视化建立的大数据管理平台&#xff0c;是一种全新的管理模式&#xff0c;能够实现劳务管理、安全施工、绿色施工的智能化和互联网化。围绕施工现场管理的人、机、料、法、环五大维度&#xff0c;以及施工过程管理的进度、质量、安全三…

计算机毕业设计 基于SpringBoot的社区医院信息管理平台/系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

modelbox线程爆满宕机bug

序 该bug的解决需要特别感谢张同学。有了大佬的帮助&#xff0c;这个bug才得以解决。 问题现象 modelbox可以进行模型推理&#xff0c;但压测一段时间后&#xff0c;modelbox会宕机&#xff0c;并发生段错误。 “libgomp: Thread creation failed: Resource temporarily una…

kafka学习笔记--Topic 数据的存储机制

本文内容来自尚硅谷B站公开教学视频&#xff0c;仅做个人总结、学习、复习使用&#xff0c;任何对此文章的引用&#xff0c;应当说明源出处为尚硅谷&#xff0c;不得用于商业用途。 如有侵权、联系速删 视频教程链接&#xff1a;【尚硅谷】Kafka3.x教程&#xff08;从入门到调优…

Vue 按键修饰符

常用按键修饰符&#xff1a;enter【回车】、delete【删除】、esc【退出】、space【空格】、tab【缩进】、up【上】、down【下】、left【左】、right【右】 。 系统按键修饰符&#xff1a;ctrl、alt、shift、meta【四个小方块】 。 鼠标修饰符&#xff1a;left【左键】、right…

阿里云RDS MySQL 数据如何快速同步到 ClickHouse

云数据库 RDS MySQL 和 云数据库 ClickHouse 是阿里云推出的两个备受欢迎的数据库解决方案&#xff0c;它们为用户提供了可靠的数据存储方案、分析数仓方案&#xff0c;本文介绍如何快速将 RDS MySQL 的数据同步到云数据库 ClickHouse。 如何快速将RDSMySQL的数据同步到云数据库…

系统架构设计师教程(五)软件工程基础知识

软件工程基础知识 5.1 软件工程5.1.1 软件工程定义5.1.2 软件过程模型5.1.3 敏捷模型敏捷开发的特点敏捷方法的核心思想主要敏捷方法简介 5.1.4 统一过程模型 (RUP)RUP的生命周期RUP中的核心概念RUP的特点 5.1.5 软件能力成熟度模型 5.2 需求工程5.2.1 需求获取需求获取的基本步…

常见的设计模式以及实现方法总结

目录 代码中使用的设计模式总结 前言常见的23种设计模式Singleton模式&#xff08;单例模式&#xff09;理论Spring中创建的Bean Prototype模式&#xff08;原型模式&#xff09;理论Spring中创建的Bean Builder模式&#xff08;构造器模式&#xff09;理论Builder实现了构造器…

Tekton 基于 gitlab 触发流水线

Tekton 基于 gitlab 触发流水线 Tekton EventListener 在8080端口监听事件&#xff0c;Gitlab 提交代码产生push 事件&#xff0c;gitlab webhook触发tekton流水线执行。 前置要求&#xff1a; kubernetes集群中已部署 tekton pipeline、tekton triggers以及tekton dashboa…

分布式解决方案与实战

分布式多线程性能调优 使用多线程优化接口 //下单业务public Object order( long userId){long start System.currentTimeMillis();//方法的开始时间戳&#xff08;ms&#xff09;JSONObject orderInfo remoteService.createOrder(userId);Callable<JSONObject> calla…

如何看待「前端已死论」?

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…

Xcode编写基于C++的动态连接库(dylib)且用node-ffi-napi测试

创建一个dylib工程示例 在 Xcode 中创建一个动态链接库&#xff08;.dylib 文件&#xff09;的步骤如下&#xff1a; 打开 Xcode&#xff1a; 打开 Xcode 应用程序。 创建新的工程&#xff1a; 选择 "Create a new Xcode project"&#xff0c;或者使用菜单 File &g…

STM32 PVD掉电检测功能的使用方法

STM32 PVD掉电检测功能的使用方法 前言 在实际应用场景中&#xff0c;可能会出现设备电源电压异常下降或掉电的情况&#xff0c;因此&#xff0c;有时候需要检测设备是否掉电&#xff0c;或者在设备掉电的瞬间做一些紧急关机处理&#xff0c;比如保存重要的用户数据&#xff…

Java基础语法之多态

什么是多态 通俗来说就是多种形态&#xff0c;具体点就i是去完成某个行为&#xff0c;当不同的对象去完成时会产生不同的状态 都是吃东西&#xff0c;狗是吃狗粮&#xff0c;猫是吃猫粮 向上转型 本质就是创建一个子类对象&#xff0c;将其当作父类对象来使用 语法格式&am…

[Kubernetes]2. k8s集群中部署基于nodejs golang的项目以及Pod、Deployment详解

一. 创建k8s部署的镜像 1.部署nodejs项目 (1).上传nodejs项目到节点node1 (2).压缩nodejs项目 (3).构建nodejsDockerfile 1).创建nodejsDockerfile 具体可参考:[Docker]十.Docker Swarm讲解,在/root下创建nodejsDockerfile,具体代码如下: FROM node #把压缩文件COPY到镜像的…

pycharm多线程报错的问题(未解决)

暂未解决&#xff01;若有佬知道如何解决&#xff0c;还请不吝赐教~~~先谢过啦 问题描述&#xff1a; 看了一下可能是这里的问题&#xff1a; 根据建议&#xff0c;在walks之前加了 freeze_support() 但是没有效果。 关键是&#xff0c;在jupyter上运行是没有问题的&#x…

逆向获取某音乐软件的加密(js逆向)

本文仅用于技术交流&#xff0c;不得以危害或者是侵犯他人利益为目的使用文中介绍的代码模块&#xff0c;若有侵权请联系作者更改。 老套路&#xff0c;打开开发者工具&#xff0c;直接开始找到需要的数据位置&#xff0c;然后观察参数&#xff0c;请求头&#xff0c;cookie是…

1- Electron 创建项目、初始化项目

Electron官网 Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron Electron 初始化 初始化项目 - 构造package.json npm init -y 安装Electron模块包 npm i electron -D // 注意&#xff01;如果报错查看node包是否太高 配置启动脚本 {&quo…