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

news2025/2/7 22:02:36

简介说明:

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.coloradmin.cn/o/2294478.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【NLP 20、Encoding编码 和 Embedding嵌入】

目录 一、核心定义与区别 二、常见Encoding编码 (1) 独热编码(One-Hot Encoding) (2) 位置编码(Positional Encoding) (3) 标签编码(Label Encoding) (4) 注意事项 三、常见Embedding词嵌入 (1) 基础词嵌入…

深度学习模型可视化小工具wandb

1 概述 Wandb(Weights & Biases,网址是https://wandb.ai)是一个用于机器学习项目实验跟踪、可视化和管理的工具,旨在用户更有效地监控模型训练过程、优化性能,并分享和复现实验结果‌‌。对于使用者而言&#xff…

数据库系统概论的第六版与第五版的区别,附pdf

我用夸克网盘分享了「数据库系统概论第五六版资源」,点击链接即可保存。 链接:https://pan.quark.cn/s/21a278378dee 第6版教材修订的主要内容 为了保持科学性、先进性和实用性,在第5版教材基础上对全书内容进行了修改、更新和充实。 在科…

【Kubernetes Pod间通信-第2篇】使用BGP实现Pod到Pod的通信

Kubernetes中Pod间的通信 本系列文章共3篇: 【Kubernetes Pod间通信-第1篇】在单个子网中使用underlay网络实现Pod到Pod的通信【Kubernetes Pod间通信-第2篇】使用BGP实现Pod到Pod的通信(本文介绍)【Kubernetes Pod间通信-第3篇】Kubernetes中Pod与ClusterIP服务之间的通信…

软件设计模式

目录 一.创建型模式 抽象工厂 Abstract Factory 构建器 Builder 工厂方法 Factory Method 原型 Prototype 单例模式 Singleton 二.结构型模式 适配器模式 Adapter 桥接模式 Bridge 组合模式 Composite 装饰者模式 Decorator 外观模式 Facade 享元模式 Flyw…

vscode 如何通过Continue引入AI 助手deepseek

第一步: 在deepseek 官网上注册账号,得到APIKeys(deepseek官网地址) 创建属于自己的APIKey,然后复制这个key,(注意保存自己的key)! 第二步: 打开vscode,在插件市场安装Continue插件, 点击设置,添加deepseek模型,默认…

通过docker安装部署deepseek以及python实现

前提条件 Docker 安装:确保你的系统已经安装并正确配置了 Docker。可以通过运行 docker --version 来验证 Docker 是否安装成功。 网络环境:保证设备有稳定的网络连接,以便拉取 Docker 镜像和模型文件。 步骤一:拉取 Ollama Docker 镜像 Ollama 可以帮助我们更方便地管理…

iOS 音频录制、播放与格式转换

iOS 音频录制、播放与格式转换:基于 AVFoundation 和 FFmpegKit 的实现 在 iOS 开发中,音频处理是一个非常常见的需求,比如录音、播放音频、音频格式转换等。本文将详细解读一段基于 AVFoundation 和 FFmpegKit 的代码,展示如何实现音频录制、播放以及 PCM 和 AAC 格式之间…

RK3576——USB3.2 OTG无法识别到USB设备

问题:使用硬盘接入到OTG接口无热插拔信息,接入DP显示屏无法正常识别到显示设备,但是能通过RKDdevTool工具烧录系统。 问题分析:由于热插拔功能实现是靠HUSB311芯片完成的,因此需要先确保HUSB311芯片驱动正常工作。 1. …

【MySQL】语言连接

语言连接 一、下载二、mysql_get_client_info1、函数2、介绍3、示例 三、其他函数1、mysql_init2、mysql_real_connect3、mysql_query4、mysql_store_result5、mysql_free_result6、mysql_num_fields7、mysql_num_rows8、mysql_fetch_fields9、mysql_fetch_row10、mysql_close …

20240206 adb 连不上手机解决办法

Step 1: lsusb 确认电脑 usb 端口能识别设备 lsusb不知道设备有没有连上,就插拔一下,对比观察多了/少了哪个设备。 Step 2: 重启 adb server sudo adb kill-serversudo adb start-serveradb devices基本上就可以了~ Reference https://b…

基于ansible部署elk集群

ansible部署 ELK部署 ELK常见架构 (1)ElasticsearchLogstashKibana:这种架构是最常见的一种,也是最简单的一种架构,这种架构通过Logstash收集日志,运用Elasticsearch分析日志,最后通过Kibana中…

Mac上搭建k8s环境——Minikube

1、在mac上安装Minikube可执行程序 brew cask install minikub 安装后使用minikube version命令查看版本 2、安装docker环境 brew install --cask --appdir/Applications docker #安装docker open -a Docker #启动docker 3、安装kubectl curl -LO https://storage.g…

MTGNN论文解读

模型架构 MTGNN 由多个模块组合而成,目标是捕捉多变量时间序列中的空间(变量间)和时间(时序)依赖。 图学习层:用于自适应地学习图的邻接矩阵,发现变量之间的关系。图卷积模块:根据邻…

C语言:函数栈帧的创建和销毁

目录 1.什么是函数栈帧2.理解函数栈帧能解决什么问题3.函数栈帧的创建和销毁的过程解析3.1 什么是栈3.2 认识相关寄存器和汇编指令3.3 解析函数栈帧的创建和销毁过程3.3.1 准备环境3.3.2 函数的调用堆栈3.3.3 转到反汇编3.3.4 函数栈帧的创建和销毁 1.什么是函数栈帧 在写C语言…

VSCode便捷开发

一、常用插件 Vue 3 Snippets、Vetur、Vue - Official 二、常用开发者工具 三、Vue中使用Element-UI 安装步骤: 1、在VSCode的终端执行如下指令: npm i element-ui -S 2、在main.js中全局引入: import Vue from vue; import ElementUI from …

二、tsp学习笔记——LINUX SDK编译

开发环境:window11 wsl ubuntu24.04 lypwslDESKTOP-39T8VTC:~$ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 24.04.1 LTS Release: 24.04 Codename: noble linux_sdk同步 tspi_linux_sdk_repo_202…

分析用户请求K8S里ingress-nginx提供的ingress流量路径

前言 本文是个人的小小见解,欢迎大佬指出我文章的问题,一起讨论进步~ 我个人的疑问点 进入的流量是如何自动判断进入iptables的四表?k8s nodeport模式的原理? 一 本机环境介绍 节点名节点IPK8S版本CNI插件Master192.168.44.1…

初阶数据结构:树---堆

目录 一、树的概念 二、树的构成 (一)、树的基本组成成分 (二)、树的实现方法 三、树的特殊结构------二叉树 (一)、二叉树的概念 (二)、二叉树的性质 (三&#…

feign 远程调用详解

在平常的开发工作中,我们经常需要跟其他系统交互,比如调用用户系统的用户信息接口、调用支付系统的支付接口等。那么,我们应该通过什么方式进行系统之间的交互呢?今天,简单来总结下 feign 的用法。 1:引入依…