相见恨晚的前端开发利器

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

做前端开发的你，一定有过以下经历：

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 -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

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。