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

简介说明:

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.mzph.cn/web/68103.shtml

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

相关文章

【目标检测】模型验证:K-Fold 交叉验证

K-Fold 交叉验证 1、引言1.1 K 折交叉验证概述 2、配置2.1 数据集2.2 安装包 3、 实战3.1 生成物体检测数据集的特征向量3.2 K 折数据集拆分3.3 保存记录3.4 使用 K 折数据分割训练YOLO 4、总结 1、引言 我们将利用YOLO 检测格式和关键的Python 库(如 sklearn、pan…

Android studio ternimal 中gradle 指令失效(gradle环境变量未配置)

默认gradle路径:C:\Users\ylwj.gradle\wrapper\dists\gradle-8.10.2-bin\a04bxjujx95o3nb99gddekhwo\gradle-8.10.2\bin 环境变量-系统环境变量-双击path-配置上即可-注意重启studio才会生效

Axure大屏可视化动态交互设计:解锁数据魅力,引领决策新风尚

可视化组件/模板预览:https://8dge09.axshare.com 一、大屏可视化技术概览 在数据驱动决策的时代,大屏可视化技术凭借直观、动态的展示方式,已成为众多行业提升管理效率和优化决策过程的关键工具。它能够将复杂的数据转化为易于理解的图形和…

Resnet 改进:尝试在不同位置加入Transform模块

目录 1. TransformerBlock 2. resnet 3. 替换部分卷积层 4. 在特定位置插入Transformer模块 5. 使用Transformer全局特征提取器 6. 其他 Tips:融入模块后的网络经过测试,可以直接使用,设置好输入和输出的图片维度即可 1. TransformerBlock TransformerBlock是Transfo…

MySQL调优02 - SQL语句的优化

SQL语句的优化 文章目录 SQL语句的优化一:SQL优化的小技巧1:编写SQL时的注意点1.1:查询时尽量不要使用*1.2:连表查询时尽量不要关联太多表1.3:多表查询时一定要以小驱大1.4:like不要使用左模糊或者全模糊1.…

langchain教程-12.Agent/工具定义/Agent调用工具/Agentic RAG

前言 该系列教程的代码: https://github.com/shar-pen/Langchain-MiniTutorial 我主要参考 langchain 官方教程, 有选择性的记录了一下学习内容 这是教程清单 1.初试langchain2.prompt3.OutputParser/输出解析4.model/vllm模型部署和langchain调用5.DocumentLoader/多种文档…

大模型中提到的超参数是什么

在大模型中提到的超参数是指在模型训练之前需要手动设置的参数,这些参数决定了模型的训练过程和最终性能。超参数与模型内部通过训练获得的参数(如权重和偏置)不同,它们通常不会通过训练自动学习,而是需要开发者根据任…

位运算及常用技巧

涉及位运算的运算符如下表所示: 位运算的运算律: 负数的位运算 首先,我们要知道,在计算机中,运算是使用的二进制补码,而正数的补码是它本身,负数的补码则是符号位不变,其余按位取反…

hot100(8)

71.10. 正则表达式匹配 - 力扣(LeetCode) 动态规划 题解:10. 正则表达式匹配题解 - 力扣(LeetCode) 72.5. 最长回文子串 - 力扣(LeetCode) 动态规划 1.dp数组及下标含义 dp[i][j] : 下标i到…

二进制/源码编译安装httpd 2.4,提供系统服务管理脚本并测试

方法一:使用 systemd 服务文件 安装所需依赖 yum install gcc make apr-devel apr-util-devel pcre-devel 1.下载源码包 wget http://archive.apache.org/dist/httpd/httpd-2.4.62.tar.gz 2.解压源码 tar -xf httpd-2.4.62.tar.gz cd httpd-2.4.62 3.编译安装 指定…

Java 中 LinkedList 的底层源码

在 Java 的集合框架中,LinkedList是一个独特且常用的成员。它基于双向链表实现,与数组结构的集合类如ArrayList有着显著差异。深入探究LinkedList的底层源码,有助于我们更好地理解其工作原理和性能特点,以便在实际开发中做出更合适…

金蝶云星空k3cloud webapi报“java.lang.Class cannot be cast to java.lang.String”的错误

最近在对接金蝶云星空k3cloud webapi时,报一个莫名其妙的转换异常,具体如下: 同步部门异常! ERP接口登录异常:java.lang.Class cannot be cast to java.lang.String at com.jkwms.k3cloudSyn.service.basics.DeptK3CloudService.…

【Android】jni开发之导入opencv和libyuv来进行图像处理

做视频图像处理时需要对其进行水印的添加,放在应用层调用工具性能方面不太满意,于是当下采用opencvlibyuv方法进行处理。 对于Android的jni开发不是很懂,我的需求是导入opencv方便在cpp中调用,但目前找到的教程都是把opencv作为模…

【MySQL】centos 7 忘记数据库密码

vim /etc/my.cnf文件; 在[mysqld]后添加skip-grant-tables(登录时跳过权限检查) 重启MySQL服务:sudo systemctl restart mysqld 登录mysql,输入mysql –uroot –p;直接回车(Enter) 输…

国产编辑器EverEdit - 自定义标记使用详解

1 自定义标记使用详解 1.1 应用场景 当阅读日志等文件,用于调试或者检查问题时,往往日志中会有很多关键性的单词,比如:ERROR, FATAL等,但由于文本模式对这些关键词并没有突出显示,造成检查问题时&#xff…

Golang 并发机制-6:掌握优雅的错误处理艺术

并发编程可能是提高软件系统效率和响应能力的一种强有力的技术。它允许多个工作负载同时运行,充分利用现代多核cpu。然而,巨大的能力带来巨大的责任,良好的错误管理是并发编程的主要任务之一。 并发代码的复杂性 并发编程增加了顺序程序所不…

JVM 四虚拟机栈

虚拟机栈出现的背景 由于跨平台性的设计,Java的指令都是根据栈来设计的。不同平台CPU架构不同,所以不能设计为基于寄存器的。优点是跨平台,指令集小,编译器容易实现,缺点是性能下降,实现同样的功能需要更多…

鼠标拖尾特效

文章目录 鼠标拖尾特效一、引言二、实现原理1、监听鼠标移动事件2、生成拖尾元素3、控制元素生命周期 三、代码实现四、使用示例五、总结 鼠标拖尾特效 一、引言 鼠标拖尾特效是一种非常酷炫的前端交互效果,能够为网页增添独特的视觉体验。它通常通过JavaScript和C…

6-图像金字塔与轮廓检测

文章目录 6.图像金字塔与轮廓检测(1)图像金字塔定义(2)金字塔制作方法(3)轮廓检测方法(4)轮廓特征与近似(5)模板匹配方法6.图像金字塔与轮廓检测 (1)图像金字塔定义 高斯金字塔拉普拉斯金字塔 高斯金字塔:向下采样方法(缩小) 高斯金字塔:向上采样方法(放大)…

RNN/LSTM/GRU 学习笔记

文章目录 RNN/LSTM/GRU一、RNN1、为何引入RNN?2、RNN的基本结构3、各种形式的RNN及其应用4、RNN的缺陷5、如何应对RNN的缺陷?6、BPTT和BP的区别 二、LSTM1、LSTM 简介2、LSTM如何缓解梯度消失与梯度爆炸? 三、GRU四、参考文献 RNN/LSTM/GRU …