当前位置: 首页>编程日记>正文

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、在启动的项目页面左下角就会有个图标,说明成功了


pagespy远端调试神器,第1张

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


pagespy远端调试神器,第2张

6、可以点击当前的项目进行调试啦
pagespy远端调试神器,第3张
  • 注意:
    1、目前如果你的项目是打包后的,可以直接运行page-spy-api就可以啦
    2、关闭page-spy-api终端后,远端的项目需要关闭当前页面重新打开就不会展示(清缓存可以试下)然后就不会显示在页面上了,否则就会一直展示在页面中

相关文章: