首页 > 其他分享 >pageSpy - 远程调试利器

pageSpy - 远程调试利器

时间:2024-04-03 20:55:05浏览次数:23  
标签:有些 官方 利器 开源 api pageSpy 调试 页面

视频版: https://www.bilibili.com/video/BV1Zi4y167TZ

前言

在工作中, 经常需要面对的问题就是处理客户提出的bug. 但是这个事儿最耗费精力甚至决定能不能修的核心点, 就是复现bug. 因为不同业务的平台和表现形式不同, 可能大家调试的方式也有些差异.

对于笔者来说, 最高效的方式是开启本地开发环境, 得到用户的登录凭证, 根据用户反馈的复现路径进行复现, 再具体情况具体分析, 通常我是直接debug, 大概率都能找到问题. 甚至看一眼控制台报错就大概知道哪里有问题了. 但是有些用户并不愿意配合, 不愿意交出登录凭证. 任凭我们如何解释我们只想修复bug不会动其他东西, 但是总有用户不愿意相信我们.

这也无可厚非, 假如我的微信登不上了, 微信官方说要登录我微信看看, 我第一反应是你看个集贸啊. 那么, 就没办法了么? 行了, 不卖葫芦了, 直接开门见山吧.

pageSpy, 远程调试神器

这款由货拉拉开源的工具, 可以帮助你远程调试. 但是笔者试了几天, 虽然是好东西, 但是有些概念理解起来还是有些成本的. 为了方便大家理解, 我先直接演示怎么用, 再去解释背后的技术架构.

api, 启动!

首先我们需要在全局先安装一个插件

npm install -g @huolala-tech/page-spy-api

全局安装依赖这种事儿对咱们前端来说都是小卡拉米了. 之后直接原神! 噢不是, api 启动!

page-spy-api

image-20231216150658477

这有好几个地址, 但其实都是一回事儿, 随便挑一个顺眼的进去看看

image-20231216150757953

接入 SDK

右上角有个接入SDK的文案, 咱们打开

image-20231216150926630

注意! 看着好像不多, 但仔细分析下会发现, 确实没几行. 咱们随便找个本地项目, 就和平时工作一样, 开抄!

image-20231216151541016

运行项目以后, 会发现在客户端左下角出现了个圆圆的东西

image-20231216151614275

点开会显示一些调试信息, 这里的copy可以让客户复制调试链接发给你. 或者你在调试端手动点开调试页面也行.

image-20231216151623056

调试页面

这是咱们的测试项目, 再回到刚刚的 api 页面, 右上角有个房间列表的文案.

image-20240106132242152

里面多了台肉鸡. emm, 不是, 多了个设备.

image-20231216151710050

咱们点击调试可以看到输出、网络信息等. 这个页面官方称之为调试端.

image-20231216151739385

大致的使用就是这样了.

技术架构

这一点其实官方有专门写过文章, 我就不在此赘述了, 详见 PageSpy 实现原理 . 简单概述下, 这套解决方案由服务端、调试端和SDK共同组成. 刚刚全局安装服务的方式, 是使用线上的版本. 而如果想要把三端全部部署在本地(为了更安全或者二次开发), 则需要花点功夫. 此处更多的是实操, 请看视频.

思考

简单这么一用, 确实很简单. 但是真要在生产环境使用, 我不禁想到几个问题. 有些是他们已经提供了解决方案的, 有些则是暂未支持.

复盘

我们先总结下大概的使用逻辑.

  1. 先由运维端开启一个 page-spy-api 的服务
  2. 再在客户端的程序中注入 sdk, 以推送信息

定制化不够

显然, 我觉得定制化是不够的. 虽然官方在初始化 PageSpy 这一步提供了几个选项, 比如是否要初始化调试按钮. 详见 FAQ#实例化都可以传哪些参数它们的作用分别是什么

但是我觉得还是差了点东西. 不是所有用户都愿意让你看到这些信息的, 有些可能是只愿意让你看 network, 有些则是只愿意让你看 storage. 都是有可能的. 目前这些监听在实例化后就会开始全部监听, 不可设置部分监听. 我觉得这个很重要, 因为客户可能是国企甚至是军队的, 对数据、安全是非常在意的.

相信每个人都有自己的需求, 对你来说最重要的功能是什么呢?

调试端的访问权限

这个调试端, 只是一个url, 是否所有人知道了url都可以访问? 这并没有账号登录体系. 在这官方的 FAQ#调试端如何加一些安全认证的保护,开发者通过认证才可以访问? 中可以看到解决方案.

建议把 FAQ 全文反复看2次. 大部分常见的问题在里面都有提到.

感谢开源

开源不易, 是我一直以来的认知. 非常感谢货拉拉的这次开源作品, 也希望大家有需要的可以试下, 对于不好用的地方可以提 issue 反馈, 官方跟进的还是蛮及时的.


我是前夕, 专注于前端和成长, 希望我的内容可以帮助到你. 公众号: 前夕小课堂

image-20240403101717261

本文禁止转载!

标签:有些,官方,利器,开源,api,pageSpy,调试,页面
From: https://www.cnblogs.com/evesama/p/18113495

相关文章

  • telegram注册自己的bot,并在PC端调试代码
    TON的调试,请在TON环境运行,不要在PCH5里跑,不然一些问题是发现不了的。自己注册个bot,建个miniapp,URL指向自己本机 安装工具  TWA就是TelegramWebApptg小程序https://core.telegram.org/bots/webapps#testing-mini-appsPC端调试,需要下载Beta版本的T......
  • 使用 Debugger 断点 如果打开了断点调试 就会跳转空白页面
    <!DOCTYPEhtml><html><header><title>test</title></header><body><h1>test</h1></body><script>setInterval(function(){varsta......
  • 【C/C++】VsCode调试配置tasks.json和launch.json
    前段时间配大作业环境改了很多配置,发现tasks.json和launch.json经常令自己很迷惑。网上找的配置有时会有各种各样的问题,在此记录一下上学期配好的配置文件,日后有时间再详细研究研究tasks.json:{"version":"2.0.0","tasks":[{"type":"shell",......
  • 数学建模-------MATLAB分支循环&&断点调试
    1.if语句(1)分段函数的引入(这里的数据表示的是分数的不同区间对应的等级)(1)这个就是一个十分简单的if语句,无论是if还是elseif后面都是不能添加任何分号的,这个例子就是一个分段的函数,在不同的区间赋予不同的等级,这里划分了1,2,3,4一共4个等级,只有前面的三个全部都不满足的时候,才......
  • XCode打开调试面板
    1.运行游戏2.切换到 3.点击后等待一会 4. ......
  • 如何解决Modbus转Profinet网关调试时通信不稳定或数据丢失问题
    在接到现场关于Modbus转Profinet网关(XD-MDPN100)配置时出现信不稳定或数据丢失的问题的反馈后。对于现场反馈的Modbus转Profinet网关配置问题,特出专项答疑。解决Modbus转Profinet网关(XD-MDPN100)通信不稳定或数据丢失的问题可以从以下几个方面着手:1、检查物理连接与接口:确保所有......
  • Llama-recipes Quick start 的调试
    先给出Llama-recipes项目的链接LLaMa环境配置condacreate-nLLamapython=3.10#建立虚拟环境condaactivateLLama#激活虚拟环境按照LLamarecipy安装包cd你的llamarecipy的存放位置pipinstall--extra-index-urlhttps://download.pytorch.org/whl/test/c......
  • nodejs在谷歌浏览器中调试
    一.浏览器开启实验室模式在谷歌浏览器中输入网址<chrome://flags/>,进入页面后打开该功能。二.配置js文件我用的是pycharm,首先对需要调试的js文件进行配置,然后填入--inspect-brk三.调试jsDebugger要调试的js文件,然后在谷歌浏览器中新打开一个标签页,打开开发者工具,等待nod......
  • k8s + springcloud 微服务开发调试工具kt Connect的使用
    概览KtConnect(全称KubernetesToolkitConnect)是一款基于Kubernetes环境用于提高本地测试联调效率的小工具。通过这个工具,可以不在本地启动所有服务,只需启动当前开发的服务即可,其它服务使用的是部署在k8s集群的实例,如下图:Reference官方文档:https://github.com/alibaba/......
  • Kernel调试追踪技术之 Kprobe on ARM64
    kprobe是什么?kprobe是一种动态调试机制,用于debugging,动态跟踪,性能分析,动态修改内核行为等,2004年由IBM发布,是名为Dprobes工具集的底层实现机制[1][2],2005年合入Linuxkernel。probe的含义是像一个探针,可以不修改分析对象源码的情况下,获取Kernel的运行时信息。kprobe的实现原理是......