TOOL►debug

git

工具是为了快速解决问题，适当使用，不要纠结什么工具，否则适得其反，千万调试总有一款适合你

chrome://inspect

使用场景

安卓手机，的微信环境，app环境，以及浏览器环境

使用方法

  • 安卓手机打开 USB 可调试功能，连接 PC

  • 在 PC 的 chrome 浏览器中打开 chrome://inspect （需要科学上网）

PS微信

微信中直接打开 debugx5.qq.com，然后勾选 打开TBS内核 inspector 调试功能；

如不能打开

先打开 debugmm.qq.com/?forcex5=true 进行授权，在打开 debugx5.qq.com；

查看当前x5内核版本及更新 debugtbs.qq.com

苹果手机 safari

  • 打开手机Safari浏览器 设置（setting）－ safari-高级(advance)-打开web检查器

  • mac电脑 Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单

  • 然后打开mac → safari → 开发 点击对应的ios设备就可以调试了

vconsole

  • 直接引用
1
2
3
4
<script src="path/to/vconsole.min.js"></script>
<script>
  var vConsole = new VConsole();
</script>
  • AMD/CMD 导入
1
2
var VConsole = require('path/to/vconsole.min.js');
var vConsole = new VConsole();

eruda 与 vconsole 异曲同工

  • 直接引用
1
2
<script src="node_modules/eruda/eruda.js"></script>
<script>eruda.init();</script>

使用文档

官方

charles 抓包移动端安卓

MAC 版本 charles

  • 在菜单栏选择 Help -> SSL Proxying -> Install Charles Root Certificate

  • 将证书添加到钥匙串之后，可以看到证书是不受信任的, 这时候需要右键，设置证书 (SSL)始终受信任

  • 先从charles中下载证书, help -> SSL Proxying -> Save Charles Root Certificate

  • 将证书（.pem 结尾）发送到安卓手机安装，如果无法安装，则修改拓展名为 .crt 即可

  • 需要手机和运行 Charles 的电脑在同一个局域网内

  • 启动 Charles，点击 Proxy-Proxy Settings，查看并设置端口

  • 查看电脑ip地址和上一步设置的端口号，配置到手机的wifi，手动代理

window 版本 charles

  • 通过 Help->SSL Proxying->Install Charles Root Certificate 打开证书安装

  • 需要手机和运行 Charles 的电脑在同一个局域网内

  • 启动 Charles，点击 Proxy-Proxy Settings，查看并设置端口

  • 查看电脑ip地址和上一步设置的端口号，配置到手机的wifi，手动代理

  • （注意打开地址一定是开着charles才会提示下载）手动安装证书，点击 http://chls.pro/ssl 下载证书，并安装, 如果手机不能正常安装，可以电脑打开该地址，下载 charles-proxy-ssl-proxying-certificate.pem

  • 将文件复制到手机，更改拓展名为.crt，点击安装

window 下 ios配置

  • 通过 Help->SSL Proxying->Install Charles Root Certificate 打开证书安装

  • 需要手机和运行 Charles 的电脑在同一个局域网内

  • 启动 Charles，点击 Proxy-Proxy Settings，查看并设置端口

  • 查看电脑ip地址和上一步设置的端口号，配置到手机的wifi，手动代理

  • （注意打开地址一定是开着charles才会提示下载）手动安装证书，点击 http://chls.pro/ssl 下载证书。下载好以后，需要先去ios的设置里，安装该证书。

  • 证书安装成功后，去iso的 设置 -> 通用 -> 关于本机 -> 证书信任设置 -> 信任证书。

问题排查

配置 Charles 代理之后手机无法上网的问题

  • 关闭防火墙

  • 检查tool 选项下的 block list 和 allow list（黑白名单）

  • Proxy -> Access Control Settings 设置 0.0.0.0/0 允许所有的ip 地址访问。也可以指定本机ip

抓包 https 过滤域名

  • 配置 Proxy -> SSL Proxy Settings 在 includes 里设置要抓包的域名，Add -> 不输入 -> 点击ok -> 抓包所有

手机安装 SSL 证书操作提示

  • 通过 Help->SSL Proxying->Install Charles Root Certificate On a mobile device ，可以看到以下提示：

  • 打开网址 http://chls.pro/ssl 下载证书，将文件复制到手机，更改拓展名为.crt，点击安装

charles 使用

断点

  • 右键某个接口，选择breakpoint。

  • 刷新页面从新调用接口，断点接口会一直处于pending状态。

  • charles进入断点模式，右侧显示 overview 和 Edit Request。右侧底部显示Cancel 、 Abort、 Execute

  • 点击Execute断点进入下一步，再次点击显示Edit Response

  • 在 Edit Request 可以编辑请求信息， 在 Edit Response 可以编辑修改返回信息，方便调试接口参数

限速

在调试安卓或者ios手机时，有时候我们需要模拟弱网络环境，这个时候可以用charles的限速功能

  • Proxy -> Throttle setting -> 勾选 Enable Throttle -> 勾选only for selected hosts -> 添加要限定的指定域名下的请求。

  • 也可以自己预设一个网速，通过Add Preset 添加后，可以在Throttle Preset 里找到自己的预设并使用。

  • 设置完后点击小乌龟图标 Start Throttle 开始限速，或者 Proxy -> Start Throttle 开始限速

代理本地请求到dev或者test环境，甚至线上

  • charles 正常情况下时不会抓取 localhost 请求的，我们可以通过配置来实现

  • window 下 C:\Windows\System32\drivers\etc 修改 hosts (可以拷贝一份到外面，改后后在替换，这样就可以提供管理员权限替换) 127.0.0.1 localhost.charlesproxy.com 增加 本地到 localhost.charlesproxy.com 映射关系。

  • 配置 tool -> Map Remote Settings , https的端口是443，通配符 * 可以匹配任意内容。

  • 这样我们就可以通过请求 http://localhost.charlesproxy.com:7001/cop-marketing-activity/api/v1/activity/page/campaign/info 代理到 https://dev-marketing-wap.svwsx.cn/cop-marketing-activity/api/v1/activity/page/campaign/info
返回
顶部