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

前言

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

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

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

pageSpy, 远程调试神器

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

api, 启动!

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

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

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

page-spy-api

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

接入 SDK

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

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

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

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

调试页面

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

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

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

大致的使用就是这样了.

技术架构

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

思考

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

复盘

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

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

定制化不够

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

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

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

调试端的访问权限

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

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

感谢开源

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


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

本文禁止转载!

pageSpy - 远程调试利器的更多相关文章

  1. 排障利器之远程调试与监控 --jmx & remote debug

    监控和调试功能是应用必备的属性之一,其手段也是多种多样. 一般地,我们可以通过:线上日志, zabbix, grafana, cat 等待系统做一问题留底,有问题及时报警,从而达到监控效果. 而对于应 ...

  2. 【远程文件浏览器】Unity+Lua开发调试利器

    Remote File Explorer是一个跨平台的远程文件浏览器,用户通过Unity Editor就能操作运行在手机上的游戏或是应用的的目录文件.比如当项目打包运行到设备上时,可通过Remote ...

  3. 移动端调试利器 JSConsole 介绍

    先看这篇文章 Web应用调试:现在是Weinre和JSConsole,最终会是WebKit的远程调试协议. 我们先不看未来,从此文可见,当下的移动端调试还是 Weinre 和 JSConsole 的天 ...

  4. 手机H5 web调试利器——WEINRE (WEb INspector REmote)

    手机H5 web调试利器--WEINRE (WEb INspector REmote) 调试移动端页面,优先选择使用chrome浏览器调试,如果是hybrid形式的页面,可以使用chrome提供的ch ...

  5. 前端调试利器——BrowserSync

    此处记录一下踩过的坑 之前看的这个地址:http://www.browsersync.cn/ 也就是 BrowserSync的官网上面关于代理服务器的例子不管怎么试都不行 请看下例子 browser- ...

  6. Java项目开启远程调试(tomcat、springboot)

    当我们运行一个项目的时候,一般都是在本地进行debug.但是如果是一个分布式的微服务,这时候我们选择远程debug是我们开发的利器. 环境apache-tomcat-8.5.16 Linux 如何启用 ...

  7. 微信公众号开发之VS远程调试

    目录 (一)微信公众号开发之VS远程调试 (二)微信公众号开发之基础梳理 (三)微信公众号开发之自动消息回复和自定义菜单 前言 微信公众平台消息接口的工作原理大概可以这样理解:从用户端到公众号端一个流 ...

  8. tomcat开发远程调试端口以及利用eclipse进行远程调试

    一.tomcat开发远程调试端口 方法1 WIN系统 在catalina.bat里:  SET CATALINA_OPTS=-server -Xdebug -Xnoagent -Djava.compi ...

  9. Visual Studio 2012远程调试中遇到的问题

    有的时候开发环境没问题的代码在生产环境中会某些开发环境无法重现的问题,或者需要对生产环境代码进行远程调试该怎么办? Vs已经提供给开发者远程调试的工具 下面简单讲讲该怎么用,前期准备:1.本地登录账户 ...

  10. 使用Eclipse进行远程调试

    转自:http://blog.csdn.net/sunyujia/article/details/2614614 今天决定做件有意义的事,写篇图文并茂的blog,为什么要图文并茂?因为很多事可能用语言 ...

随机推荐

  1. 如何使用疯狂URL获取抖音推流码地址(抖音推流码地址获取教程)

    本节所用到的工具:疯狂URL.OBS推流工具 什么是推流地址? 平时我们如果是下载直播,叫拉流.但如果是你自己要直播,属于上传直播流数据,叫推流,即:把直播流数据推送到视频服务器,然后别人才能看到直播 ...

  2. nest.sh 脚本 发布服务

    每次发布后端nest 直接执行一个脚本即可 给脚本赋值权限 chomd 777 nest.sh nest.sh 脚本 #!/bin/bash cd /root/gateway-study git pu ...

  3. 深入浅出Java多线程(十二):线程池

    引言 大家好,我是你们的老伙计秀才!今天带来的是[深入浅出Java多线程]系列的第十二篇内容:线程池.大家觉得有用请点赞,喜欢请关注!秀才在此谢过大家了!!! 在现代软件开发中,多线程编程已经成为应对 ...

  4. linux-关于conio.h文件的文件缺失问题

    链接: https://pan.baidu.com/s/1Qzo4CkJB1_5E-3rDLtfG4Q 提取码: fh65 编辑以下这个依赖库就可以了 $ cd libconio-1.0.0 $ ./ ...

  5. Android 优雅的Activity回调代码封装

    原文地址: Android 优雅的Activity回调代码封装 - Stars-One的杂货小窝 之前提到Jetpack架构组件学习(3)--Activity Results API使用 - Star ...

  6. cpprestsdk有bug.

    好不容易将cpprestsdk移植到MinGW,并编译通过,出于安全还是先将samples还有tests测试一下是否正常. 用samples/blackjack一测试就出现奇葩现象,server一端会 ...

  7. Java加密技术(一)——BASE64与单向加密算法MD5&SHA&MAC

    Javabase64macmd5sha     加密解密,曾经是我一个毕业设计的重要组件.在工作了多年以后回想当时那个加密.解密算法,实在是太单纯了.     言归正传,这里我们主要描述Java已经实 ...

  8. 3DCAT实时云渲染助力上海市乡村振兴可视化平台,展现数字乡村的魅力

    乡村振兴是党的十九大提出的重大战略,是实现中华民族伟大复兴的重要基础.上海作为超大城市,如何推进乡村振兴,让乡村成为城市发展的重要支撑和生态屏障,是一项重大课题. 为了全面展示上海市乡村振兴的成果和规 ...

  9. [深度学习] 计算机视觉低代码工具Supervision库使用指北

    Supervision库是一款出色的Python计算机视觉低代码工具,其设计初衷在于为用户提供一个便捷且高效的接口,用以处理数据集以及直观地展示检测结果.Supervision库的官方开源仓库地址为: ...

  10. Python 批量合并csv文件

    一.批量合并csv文件<方法1> import pandas as pd import glob import os # 获取所有CSV文件的路径 file_paths = glob.gl ...