whistle超好用的手机调试代理工具

来一碗黑鸡汤
7,210 阅读2分钟

先吐槽下 charles，哈哈哈 ^_^

  • 安卓测试 H5 页面需要连接数据线，打开 chrome://inspect 。。。吧啦吧啦。。
  • 准备就绪后，想要看 console.log 需要在项目入口文件中安装 vconsole 插件
  • 苹果手机调试无法查看 css 样式

以上三条，我们的 whistle 都能轻松支持~~~ 使用起来如德芙般丝滑~~~

下载 whistle

  1. 首先安装node，如果已经安装，可省略此步骤：
ruby -e "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/master/install>)"
brew install node
  1. 安装 whistle
npm install -g whistle
  1. 如果安装失败就使用淘宝镜像
npm install whistle -g --registry=[https://registry.npm.taobao.org](https://registry.npm.taobao.org/)

运行 whistle

安装完成后，输入下面的命令启动：

w2 start

whistle01.png

打开电脑浏览器

在浏览器中打开 localhost:8899 页面，点击顶部 HTTPS，在弹出的二维码下方勾 Capture TUNNEL CONNECTs ，然后关闭弹窗。

whistle02.png

打开手机

设置 => 无线局域网 => chehaoduo(或者你接入的其他无线网络) => 配置代理 => 手动

输入图一中的服务器（如：10.112.99.138）和端口号（如：8899），点击右上角存储。

003.png

手机下载证书

打开手机浏览器，输入网址：rootca.pro，下载信任文件

ios 下：设置 => 通用 => 证书信任设置，打开刚刚安装的证书的开关

安卓下(以华为为例)：

查看请求

返回电脑浏览器，查看刚刚打开的页面 localhost:8899/#network ，可以查看手机的相关网络请求:

005.png

如上图，http 和 https 的请求，我们都可以抓包到了~ 接下来看一下如何看某个 url 的 console.log 和 css 样式。

点击“Rules”，输入想要监测的接口的域名，和 域名标识(weinre://随意命名)

006.png

如下图，鼠标经过 Weinre ，可以看到我们命名的接口域名

007.png

点击“dev”，会看到如下界面，不要急~ 接下来我们就可以在手机打开并访问我们的 H5 页面了，无论它是测试环境还是 pre 环境。

008.png

手机访问 H5 页面后，电脑观测的上图界面会变成如下，我们想要的样子~~

009.png

愉快的调试吧，无论是 console 还是 css 样式，都满足~

avatar
文章
阅读
粉丝