web 远程调试工具PageSpy 实战经验

PageSpy 是一款兼容 Web / 小程序 / React Native / 鸿蒙 App 等平台项目的开源调试平台。基于对原生 API 的封装,它将调用原生方法时的参数进行过滤、转化,整理成一定格式的消息供调试端消费;调试端收到消息数据后,提供类似本地控制台的功能界面将数据呈现出来。

docker方式部署

bash 复制代码
docker run -d --restart=always -v ./log:/app/log -v ./data:/app/data -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:latest

web前端集成

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo app</title>
    <script crossorigin="anonymous" src="http://localhost:6752/page-spy/index.min.js"></script>
</head>
<body>
 
    <button onclick='console.log("this is a demo")'>
       click
    </button>
    <script >
         window.$pageSpy = new PageSpy();
    </script>
 
</body>
</html>

系统截图

查看remote web 信息

其它

对于需要remote debug 的场景,remote 是一个不错的选择,对于h5 的开发,vConsole 是一个很不错的工具,但是缺少remote 能力,page-spy-web 是一个不错的选择

参考资料

https://github.com/HuolalaTech/page-spy-web
https://github.com/Tencent/vConsole

https://remotejs.com/

https://www.vorlonjs.io/

相关推荐
未命名冀5 分钟前
微服务day07
微服务·架构·jenkins
雪碧聊技术23 分钟前
01-Ajax入门与axios使用、URL知识
前端·javascript·ajax·url·axios库
adminIvan27 分钟前
Element plus使用menu时候如何在折叠时候隐藏掉组件自带的小箭头
前端·javascript·vue.js
车载诊断技术27 分钟前
电子电气架构--- 实施基于以太网的安全车载网络
网络·人工智能·安全·架构·汽车·电子电器架构
向上的车轮34 分钟前
ODOO学习笔记(8):模块化架构的优势
笔记·python·学习·架构
会发光的猪。1 小时前
【 ElementUI 组件Steps 步骤条使用新手详细教程】
前端·javascript·vue.js·elementui·前端框架
我家媳妇儿萌哒哒1 小时前
el-table合并单元格之后,再进行隔行换色的且覆盖表格行鼠标移入的背景色的实现
前端·javascript·elementui
baiduguoyun1 小时前
react的import 导入语句中的特殊符号
前端·react.js
前端青山1 小时前
webpack指南
开发语言·前端·javascript·webpack·前端框架
NiNg_1_2341 小时前
ECharts实现数据可视化入门详解
前端·信息可视化·echarts