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.rhkb.cn/news/13451.html

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

相关文章

深度整理总结MySQL——SQL的执行顺序和流程

深度整理总结MySQL——SQL的执行顺序和流程

SQL的执行顺序和流程 SQL的执行顺序执行一条select语句,发生了什么呢连接器查询缓存解析SQL执行SQL预处理器优化器执行器 总结 SQL的执行顺序 这是一条标准的查询语句: 但实际上并不是从上到下去解析的,真实的执行顺序是: 我们先执行from,join来确定表之间的连接关系&#x…
阅读更多...
使用 Ollama 在 Windows 环境部署 DeepSeek 大模型实战指南

使用 Ollama 在 Windows 环境部署 DeepSeek 大模型实战指南

文章目录 前言Ollama核心特性 实战步骤安装 Ollama验证安装结果部署 DeepSeek 模型拉取模型启动模型 交互体验命令行对话调用 REST API 总结个人简介 前言 近年来，大语言模型（LLM）的应用逐渐成为技术热点，而 DeepSeek 作为国产开…
阅读更多...
Redis有哪些常用应用场景?

Redis有哪些常用应用场景?

大家好，我是锋哥。今天分享关于【Redis有哪些常用应用场景?】面试题。希望对大家有帮助； Redis有哪些常用应用场景? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Redis 是一个高性能的键值对存储数据库，它有许多应用场景&…
阅读更多...
115，【7】 攻防世界 web fileinclude

115，【7】 攻防世界 web fileinclude

进入靶场 试着访问了几个文件&#xff0c;都没得到信息&#xff0c;f12看看源码 还真有 <?php // 检查是否开启了错误显示功能 // ini_get 函数用于获取 PHP 配置选项的值&#xff0c;这里检查 display_errors 选项是否开启 if( !ini_get(display_errors) ) {// 如果错误…
阅读更多...
SpringBoot开发（五）SpringBoot接收请求参数

SpringBoot开发（五）SpringBoot接收请求参数

1. SpringBoot接收请求参数 1.1. 获取参数的方式 &#xff08;1&#xff09;通过request对象获取参数   &#xff08;2&#xff09;RequestParam(针对请求头方式为x-www-form-ur lencoded)   &#xff08;3&#xff09;RequestBody(针对请求头方式为application/json)   …
阅读更多...
如何理解多态，以及由此引出的抽象类和纯虚函数

如何理解多态，以及由此引出的抽象类和纯虚函数

文章目录 1. 多态2. 抽象类和纯虚函数 1. 多态 静态多态&#xff1a; 动态多态&#xff1a; #include <iostream> #include <string> using namespace std;// 动物的基类 class Animal { public:Animal(string name) : _name(name) {}virtual void bark() {} …
阅读更多...
java基础2（黑马）

java基础2（黑马）

一、变量里的数据在计算机中的存储原理 1.二进制 .二进制&#xff1a;只有0、1&#xff0c; 按照逢二进一的方式表示数据。 十进制数字11转换为&#xff1a;1011 方法&#xff1a;除二取余法 计算机中表示数据的最小单元&#xff0c;一个字节&#xff08;Byte&#xff0c;简…
阅读更多...
【算法篇】贪心算法

【算法篇】贪心算法

目录 贪心算法 贪心算法实际应用 一&#xff0c;零钱找回问题 二&#xff0c;活动选择问题 三&#xff0c;分数背包问题 将数组和减半的最小操作次数 最大数 贪心算法 贪心算法&#xff0c;是一种在每一步选择中都采取当前状态下的最优策略&#xff0c;期望得到全局最优…
阅读更多...
数据结构与算法学习笔记----博弈论

数据结构与算法学习笔记----博弈论

# 数据结构与算法学习笔记----博弈论 author: 明月清了个风 first publish time: 2025.2.6 ps⭐️包含了博弈论中的两种问题Nim游戏和SG函数&#xff0c;一共四道例题&#xff0c;给出了具体公式的证明过程。 Acwing 891. Nim游戏 [原题链接](891. Nim游戏 - AcWing题库) 给…
阅读更多...
Yageo国巨的RC系列0402封装1%电阻库来了

Yageo国巨的RC系列0402封装1%电阻库来了

工作使用Cadence多年&#xff0c;很多时候麻烦的就是整理BOM&#xff0c;因为设计原理图的时候图省事&#xff0c;可能只修改value值和封装。 但是厂家&#xff0c;规格型号&#xff0c;物料描述等属性需要在最后的时候一行一行的修改&#xff0c;繁琐又容易出错&#xff0c;过…
阅读更多...
app专项测试（网络测试流程）

app专项测试（网络测试流程）

一、网络测试的一般流程 step1&#xff1a;首先要考虑网络正常的情况 ①　各个模块的功能正常可用 ②　页面元素/数据显示正常 step2&#xff1a;其次要考虑无网络的情况 ①　APP各个功能在无网络情况下是否可用 ②　APP各个页面之间切换是否正常 ③　发送网络请求时是…
阅读更多...
RFID隧道机：提升生产流水线效率与精准度

RFID隧道机：提升生产流水线效率与精准度

在当今制造业飞速发展的时代&#xff0c;生产流水线的效率与精准度成为企业竞争力的关键。传统的货物管理往往依赖于人工扫描和记录&#xff0c;效率低下且易出错&#xff0c;而RFID 隧道机的出现&#xff0c;为企业带来了智能化的管理体验&#xff0c;为生产流水线带来了从人工…
阅读更多...
NSS-DAY2

NSS-DAY2

Crypto [HNCTF 2022 Week1]A dictator 题目&#xff1a; from random import randint from secret import flagoffset randint(1,100) % 26 # print(offset)assert flag.startswith(NSSCTF{) assert all([ord(c) not in range(ord(A),ord(Z)) for c in flag[7:-1]])for cha…
阅读更多...
systemctl配置httpd服务

systemctl配置httpd服务

一、环境介绍&#xff1a; Operating SystemopenEuler 22.03 (LTS-SP2)Kernel Linux 5.10.0-153.56.0.134.oe2203sp2.x86_64httpd versionhttpd-2.4.59ip address192.168.240.12/24 二、下载需要的软件包 yum install -y gcc gcc-c make apr apr-devel apr-util-devel pcre …
阅读更多...
Redis bitmap应用

Redis bitmap应用

Redis bitmap应用 需求&#xff1a;存储用户今年已签到的天数&#xff0c;如在1月3日签到&#xff0c;则存 3 。。。以此类推 每秒300次请求压力测试 1、使用数据库存储 查询代码与时间 public List<Integer> selectSignRecord(long userId, Integer year) {if (year nu…
阅读更多...
蓝桥杯之c++入门（六）【string(practice)】

蓝桥杯之c++入门（六）【string(practice)】

目录 练习1&#xff1a;标题统计方法1&#xff1a;一次性读取整行字符&#xff0c;然后统计方法2&#xff1a;按照单词读取小提示&#xff1a; 练习2&#xff1a;石头剪子布练习3&#xff1a;密码翻译练习4&#xff1a;文字处理软件练习5&#xff1a;单词的长度练习6&#xff1…
阅读更多...
uniapp访问django目录中的图片和视频,2025[最新]中间件访问方式

uniapp访问django目录中的图片和视频,2025[最新]中间件访问方式

新建中间件, middleware.py 匹配,以/cover_image/ 开头的图片 匹配以/episode_video/ 开头的视频 imageSrc: http://192.168.110.148:8000/cover_image/12345/1738760890657_mmexport1738154397386.jpg, videoSrc: http://192.168.110.148:8000/episode_video/12345/compres…
阅读更多...
gc buffer busy acquire导致的重大数据库性能故障

gc buffer busy acquire导致的重大数据库性能故障

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 作者&#xff1a;IT邦德 中国DBA联盟(ACDU)成员&#xff0c;10余年DBA工作经验 Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主&#xff0c;全网粉丝10万 擅长主流Oracle、MySQL、PG、高斯…
阅读更多...
[NKU]C++安装环境 VScode

[NKU]C++安装环境 VScode

bilibili安装教程 vscode 关于C/C的环境配置全站最简单易懂&#xff01;&#xff01;大学生及初学初学C/C进&#xff01;&#xff01;&#xff01;_哔哩哔哩_bilibili 1安装vscode和插件 汉化插件 ​ 2安装插件 2.1 C/C 2.2 C/C Compile run ​ 2.3 better C Syntax ​ 查看已…
阅读更多...
DeepSeek-r1模型本地化部署最新教程

DeepSeek-r1模型本地化部署最新教程

新的改变 DeepSeek 的搜索引擎基于深度学习算法&#xff0c;能够理解和分析大量的数据源&#xff08;如文本、图像、视频等&#xff09;&#xff0c;并结合用户的行为数据和偏好&#xff0c;提供个性化的搜索结果。 最近爆火的DeepSeek不用多说了&#xff0c;快来本地部署感受…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023