相见恨晚的前端开发利器-PageSpy
今天介绍一个非常有用的前端开发工具。
做前端开发的你，一定有过以下经历：
- 我这里是好的啊，你截个图给我看看
- 不会吧，你打开f12，控制台截个图给我看看
- 录个屏给我看看你是怎么操作的
- ...
还有，我们在开发h5的时候，一般为了调试方便，可能会在开发环境和测试环境实例化一个vConsole，遇到问题看一下大概就能定位到错误。
可是如果测试小姐姐在远程呢？如果是线上环境呢？如果有这么一个工具，能让我坐在工位上就能调(窥)试(探)用户的操作，那岂不是美滋滋。
你可能会说，这不就是埋点吗，先别急，今天介绍的这个工具和埋点有着本质区别。
不啰嗦了，有请主角**「PageSpy」**登场。
PageSpy是什么？
❝
PageSpy[1] 是由货拉拉大前端开源的一款用于调试 H5 、或者远程 Web 项目的工具。是一个强大的开源前端远程调试平台，它可以显著提高我们在面对前端问题时的效率。
❞
有什么作用？
- 一眼查看客户端信息 能识别客户端运行环境，支持Linux/Mac/Window/IOS/Android
- 实时查看输出 可以实时输出客户端的
Element,Console,Network,Storage - 网络请求监控 可以捕获和显示页面的网络请求
- 远程控制台 支持远程调试客户机上的js代码
如何使用？
查看官方文档[2]
- 安装npm包
yarn global add @huolala-tech/page-spy-api
# 如果你使用 npm
npm install -g @huolala-tech/page-spy-api
- 启动服务
直接在命令行执行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
