前端开发的秘密武器:相见恨晚

发表时间: 2024-01-25 09:49

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

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

  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# 如果你使用 npmnpm install -g @huolala-tech/page-spy-api
  1. 启动服务

直接在命令行执行page-spy-api,部署完成后浏览器访问<host>:6752,页面顶部会出现接入SDK菜单,点击菜单查看如何在业务项目中配置并集成。

命令行执行后出现这个界面表示服务启动成功了,然后访问我自己的ip+端口,再点击顶部接入SDK

去创建一个测试项目,建一个最简单的index.html,按照文档接入SDK,然后在浏览器访问这个页面

左下角出现Pagepy的logo说明引入成功了。

此时点击顶部菜单房间列表

点击调试,就可以看到这个项目的一些实时调试信息,但是还没加什么代码。


现在改一下我们的代码,加一些输出信息。

Console控制台的信息

直接输出用户端代码变量的实时的值

加个定时器试试,也是实时输出的

再来看看Storage信息

Element信息

调个接口试试


好了,今天的介绍就到这里,这么牛叉的工具,是不是有种相见恨晚的感觉,感兴趣的小伙伴快去试试吧!

Reference

[1] PageSpy:

https://huolalatech.github.io/page-spy-web

[2] 官方文档:

https://github.com/HuolalaTech/page-spy-web/blob/main/README_ZH.md