pagespy远端调试神器

一般我们调试，测试等都是在我们身边可以清晰的找到代码的bug，但是要是远程两个人调试一个项目呢？
接下来pagespy就可以解决我们的这个难点了，不过想要在生产的项目中使用，需要你自己再去做些处理（这个不是pagespy中带的api啥的，是需要我们自己处理的），就像vconsole等调试，会一直展示在页面上的，这个就需要自己进行处理了
实操开始
1、下载

npm install -g @huolala-tech/page-spy-api
2、在当前的项目中引入sdk及部分代码(具体代码可直接在官网查看)代码中的host:6752可以替换为你当前启动项目的端口号

<script crossorigin="anonymous" src="http://localhost:6752/page-spy/index.min.js"></script>
<script>
  window.$pageSpy = new PageSpy()
</script>

3、启动当前项目，在新建一个终端启动pagespy： page-spy-api
4、在启动的项目页面左下角就会有个图标，说明成功了

image.png

5、在启动pagespy中有个地址打开选择房间列表，默认会展示我们当前的项目，要是没有的话，输入上方图片中的设备id搜索即可

image.png

6、可以点击当前的项目进行调试啦

image.png

注意：
1、目前如果你的项目是打包后的，可以直接运行page-spy-api就可以啦
2、关闭page-spy-api终端后，远端的项目需要关闭当前页面重新打开就不会展示（清缓存可以试下）然后就不会显示在页面上了,否则就会一直展示在页面中