技术分享
🗒️如何使用Whistle工具进行调试?
00 min
2023-11-29
2023-12-1
type
status
date
slug
summary
tags
category
icon
password
常见前端开发场景会涉及到调试设备,以下文章进行对场景归纳总结。
 

📝 一键安装

可参考此处
 

🖖 如何调试移动端场景

准备好环境之后

步骤一

  • 保证在同一个局域网,即连接相同wifi即可。
  • 进行wifi的代理,代理信息从下面获取,关联 Server & Port 即可。
    • notion image
👉
注意: 即是相同网络,手机设备和PC设备有可能还是无法互相访问,可以咨询公司的IT技术部门,譬如我们就需要「移动端」切换不同的wifi:
1、先连接xxx_office,完成认证且成功连接。 2、切换至xxx_cs,账号密码同xxx_office

步骤二

正确安装证书,点击 「HTTPS」进行扫码或者打开浏览器并访问上面的地址「IP:Port」。
notion image
👉
主要区别是 Android 和 IOS,有些设备无法自动安装证书,可先下载再指定安装。
Android: 安装CA证书入口,搜索「证书」即可
notion image
IOS: 安装证书入口,「Profiles & Device Management」
notion image
📌
如果访问不成功的时候,记得去打开一下证书验证才行。

如何关联代理调试进行调试APP?

👉
有时候场景需要内网调试或者连接外网进行调试。

下面调试 Tiktok App中 Webview 的界面

默认配置时:
notion image
新增Rules组:
未代理前显示内容如下:
notion image

其他小问题

成功代理并重定向页面如下:
notion image
📌
 

如何集成 vConsole、eruda、mdebug 等调试H5页面工具的插件?

安装插件

notion image

配置插件

notion image
📌
如果遇到网络无法访问或者是异常的场景,可直接「重启」whistle 软件。
notion image