spy-debugger + Charles 调试移动端/内嵌小程序H5

server/2025/2/9 12:38:44/

简介说明:

PC端可以用F12进行console等进行调试,但移动端App中使用webview就无法进行实时调试,针对这种情况

1. 安装

全局安装 spy-debugger

sudo npm install spy-debugger -g
// window不用加sudo

2. spy-debugger 证书

其实spy-debugger的代理是基于node-mitmproxy模块实现的,这里安装的证书其实是node-mitmproxy的证书,标题写spy-debugger证书是为了和Charels证书区分开来避免混淆。

电脑安装证书

在命令行中执行spy-debugger启动spy-debugger服务,启动成功后,检查你的用户目录目录~,会发现多了一个node-mitmproxy文件夹,这个文件夹内放的就是代理需要的证书。
我Mac电脑完整的路径是:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

接下来需要在手机安装此证书(安卓为例)

首先需要将node-mitmproxy.ca.crt上传到手机上,可以通过live-server 在node-mitmproxy.ca.crt文件所在的目录下启动这个服务。如果你还没有live-server命令,可以通过以下命令进行安装:

sudo npm i -g live-server

在/xxxx/xxx/node-mitmproxy目录下执行live-server命令
在这里插入图片描述
在这里插入图片描述
在手机浏览器上访问这个服务,输入我电脑的IP地址和端口进行访问,⚠️手机和电脑必须是连接同一个WiFi网络才可以访问。
点击node-mitmproxy.ca.crt文件进行下载安装
在这里插入图片描述
下载下来,在浏览器下载中心中长按查看下载的目录
在这里插入图片描述
找到手机设置-》搜索受信任的凭据(每个手机叫法不一样,最终就是安装ca证书)
在这里插入图片描述
从手机存储安装
在这里插入图片描述
选择CA证书
在这里插入图片描述
按照刚刚找到的路径找,点击信任安装
在这里插入图片描述

此时,spy-debugger的前期准备工作就已经全部完成了

3. Charles 证书

这里简单介绍一下Charles的证书安装,如果你已经是Charles的老手了,可以直接跳过。Charles如果不安装证书的话是无法抓https的请求的。

电脑安装证书

第1步:
点击Charles的Help> SSL Proxying> Install Charles Root Cetificate 然后就会弹出证书安装页面,将Charles的证书设置为始终信任即可:
在这里插入图片描述
在这里插入图片描述
第2步:
点击Charles的Proxy > Access Control Settings进行配置让手机连接代理时,不需要点允许连接确认操作。
在这里插入图片描述

手机安装charles证书

第1步:
点击Charles的Help> SSL Proxying> Install Charles Root Cetificate on a Mobile Device or Remote Browser
然后会弹出一个对话框,告诉你手机要设置的代理IP地址和端口,
⚠️注意:手机和电脑必须连接同一个WiFi才可以。
在这里插入图片描述第2步:
根据提示在手机上配置Wi-Fi网络代理,在手机上点击设置> wifi->手动代理,进行输入IP和端口号
第3步:
在浏览器输入chls.pro/ssl,下载并安装证书
下载证书的步骤就和上面spy-debugger下载证书的方式一样
此时,Charles所有的准备工作都完成了,接下来我们就可以启动spy-debugger进行移动端H5调试了。

4. 测试使用,启动spy-debugger

第1步:
启动命令

# 启动spy-debugger服务 
spy-debugger 

也可以使用-e参数设置Charles作为外部代理服务

# 启动spy-debugger服务,并设置外部代理为Charles的服务,8888是charles的端口
spy-debugger -e http://127.0.0.1:8888 

在这里插入图片描述

上述命令表示启动spy-debugger调试服务,并将所有的资源请求都转发到Charles的代理服务上。其实我们打开Charles程序的时候,它实际上是在本地启动了一个http的服务,监听在8888端口上。
在这里插入图片描述
第3步:
在浏览器打开http://127.0.0.1:59224/client/

在这里插入图片描述
第4步:
在京东App里随便找一个H5页面打开,或者在手机浏览器上打开 https://m.jd.com/

在这里插入图片描述
在这里插入图片描述
第5步:
此时在浏览器上的Remote选项卡上就可以看到,连接的终端了
在这里插入图片描述
第6步:
我们可以在Elements选项上进行页面元素的选择和调试,可以发现我们鼠标放到元素上,手机端上会实时看到选中效果
在这里插入图片描述
第7步:
我们还可以在Console选项卡下查看代码输出的console信息,我们也可以这里输入页面要执行的代码
在这里插入图片描述
在这里插入图片描述
第8步:
此时我们发现所有的请求都被转发到了Charles上
在这里插入图片描述

OK,到这里spy-debugger + Charles进行移动端调试的接入流程就介绍完了,更多关于spy-debugger的功能和使用方法,可以参考https://github.com/wuchangming/spy-debugger


http://www.ppmy.cn/server/166221.html

相关文章

【Redis】主从模式,哨兵,集群

主从复制 单点问题: 在分布式系统中,如果某个服务器程序,只有一个节点(也就是一个物理服务器)来部署这个服务器程序的话,那么可能会出现以下问题: 1.可用性问题:如果这个机器挂了…

Leecode刷题C语言之全排列②

执行结果:通过 执行用时和内存消耗如下: int* path; int pathTop; int** ans; int ansTop; int cnt[8];//标记path中是否已有此索引值,这也是同46题不同点 void backTracking(int* nums,int numsSize,int startIndex,int** returnColumnSizes){if(pathT…

使用scoop 下载速度慢怎么办

在国内使用 Scoop 下载速度慢是一个常见问题,主要是因为 Scoop 默认的软件源(bucket)和下载服务器通常位于国外。以下是一些提高下载速度的方法: 1. 更换 Scoop 镜像源(Bucket 镜像): 原理&…

k8s部署go-fastdfs

前置环境:已部署k8s集群,ip地址为 192.168.10.1~192.168.10.5,总共5台机器。 1. 创建provisioner制备器(如果已存在,则不需要) 制备器的具体部署方式可参考我的上一篇文章: k8s部署rabbitmq-CSDN博客文章浏览阅读254次,点赞3次,收藏5次。k8s部署rabbitmqhttps://blo…

sounddevice 进行gradio控制录音

Sounddevice import timeimport sounddevice as sd import numpy as np from scipy.io.wavfile import writeSAMPLE_RATE 16000 # 采样率(Hz) DURATION 5 # 录音时长(秒)def save():# 录音参数print("开始录音..."…

Java 面试真题

本题适合一到三年 Java 开发 ,以下问题都是按照原面试官提问记录 文章目录 我要进大厂系列面试题二面 我要进大厂系列面试题 全部真题,欢迎投稿你的面试经验。 本篇涉及基础较多,但要耐性看完。 JVM内存模型垃圾回收器用的哪个gc各个算法…

用pytorch实现一个简单的图片预测类别

前言: 在阅读本文之前,你需要了解Python,Pytorch,神经网络的一些基础知识,比如什么是数据集,什么是张量,什么是神经网络,如何简单使用tensorboard,DataLoader。 本次模型训练使用的是…

DeepSeek和ChatGPT的对比

最近DeepSeek大放异彩,两者之间有什么差异呢?根据了解到的信息,简单做了一个对比。 DeepSeek 和 ChatGPT 是两种不同的自然语言处理(NLP)模型架构,尽管它们都基于 Transformer 架构,但在设计目标…