注册
web

相见恨晚的前端开发利器-PageSpy


今天介绍一个非常有用的前端开发工具。


做前端开发的你,一定有过以下经历:



  1. 我这里是好的啊,你截个图给我看看
  2. 不会吧,你打开f12,控制台截个图给我看看
  3. 录个屏给我看看你是怎么操作的
  4. ...

还有,我们在开发h5的时候,一般为了调试方便,可能会在开发环境和测试环境实例化一个vConsole,遇到问题看一下大概就能定位到错误。


可是如果测试小姐姐在远程呢?如果是线上环境呢?如果有这么一个工具,能让我坐在工位上就能调(窥)试(探)用户的操作,那岂不是美滋滋。


你可能会说,这不就是埋点吗,先别急,今天介绍的这个工具和埋点有着本质区别。


不啰嗦了,有请主角**「PageSpy」**登场。


PageSpy是什么?




PageSpy[1] 是由货拉拉大前端开源的一款用于调试 H5 、或者远程 Web 项目的工具。是一个强大的开源前端远程调试平台,它可以显著提高我们在面对前端问题时的效率。




有什么作用?



  • 一眼查看客户端信息 能识别客户端运行环境,支持Linux/Mac/Window/IOS/Android
  • 实时查看输出 可以实时输出客户端的Element,Console,Network,Storage
  • 网络请求监控 可以捕获和显示页面的网络请求
  • 远程控制台 支持远程调试客户机上的js代码

如何使用?


查看官方文档[2]



  1. 安装npm包

yarn global add @huolala-tech/page-spy-api

# 如果你使用 npm

npm install -@huolala-tech/page-spy-api


  1. 启动服务

直接在命令行执行page-spy-api,部署完成后浏览器访问: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…


作者:丝绒拿铁有点甜
来源:juejin.cn/post/7327691403844665380

0 个评论

要回复文章请先登录注册