以下文章来源于前端帮 ,作者xintianyou
今天介绍一个非常有用的前端开发工具。
做前端开发的你,一定有过以下经历:
- 我这里是好的啊,你截个图给我看看
- 不会吧,你打开f12,控制台截个图给我看看
- 录个屏给我看看你是怎么操作的
- ...
还有,我们在开发h5的时候,一般为了调试方便,可能会在开发环境和测试环境实例化一个vConsole,遇到问题看一下大概就能定位到错误。
可是如果测试小姐姐在远程呢?如果是线上环境呢?如果有这么一个工具,能让我坐在工位上就能调(窥)试(探)用户的操作,那岂不是美滋滋。
你可能会说,这不就是埋点吗,先别急,今天介绍的这个工具和埋点有着本质区别。
不啰嗦了,有请主角**「PageSpy」**登场。
PageSpy是什么?
❝
PageSpy[1] 是由货拉拉大前端开源的一款用于调试 H5 、或者远程 Web 项目的工具。是一个强大的开源前端远程调试平台,它可以显著提高我们在面对前端问题时的效率。
❞
有什么作用?
- 一眼查看客户端信息 能识别客户端运行环境,支持Linux/Mac/Window/IOS/Android
- 实时查看输出 可以实时输出客户端的
Element
,Console
,Network
,Storage
- 网络请求监控 可以捕获和显示页面的网络请求
- 远程控制台 支持远程调试客户机上的js代码
如何使用?
查看官方文档[2]
- 安装npm包
sql
复制代码
yarn global add @huolala-tech/page-spy-api # 如果你使用 npm npm install -g @huolala-tech/page-spy-api
- 启动服务
直接在命令行执行page-spy-api
,部署完成后浏览器访问<host>:6752
,页面顶部会出现接入SDK
菜单,点击菜单查看如何在业务项目中配置并集成。
命令行执行后出现这个界面表示服务启动成功了,然后访问我自己的ip+端口,再点击顶部接入SDK
去创建一个测试项目,建一个最简单的index.html
,按照文档接入SDK,然后在浏览器访问这个页面
左下角出现Pagepy
的logo说明引入成功了。
此时点击顶部菜单房间列表
点击调试,就可以看到这个项目的一些实时调试信息,但是还没加什么代码。
现在改一下我们的代码,加一些输出信息。
Console控制台的信息
直接输出用户端代码变量的实时的值
加个定时器试试,也是实时输出的
再来看看Storage信息
Element信息
调个接口试试
好了,今天的介绍就到这里,这么牛叉的工具,是不是有种相见恨晚的感觉,感兴趣的小伙伴快去试试吧!
Reference
[1] PageSpy:huolalatech.github.io/page-spy-we…
[2] 官方文档:github.com/HuolalaTech…
文章转自:https://juejin.cn/post/7327691403844665380