真机调试教程

[jiangjiu]

真机调试教程

背景

1. 百度端能力需要在baidu.com域下生效
2. 端能力调用调试时必须在真机上进行，但是没有console控制台和network查看网络请求
3. 端webview很多情况下和chrome表现不一致
4. 端上会做很多骚操作，chrome下调试没法感知
5. 因为没有可靠的调试环境，多人协作时，fe频繁推送代码到qa环境进行验证，甚至alert输出，导致qa环境不可测试、开发效率低、多人代码覆盖冲突。
6. 真机的DOM/CSS无法查看

使用whistle解决上述问题

1. 配合weinre在mac上查看/修改真机的DOM树
2. 网络请求代理至mac本地
3. 真机的console输出代理至mac本地

github地址和文档：https://github.com/avwo/whistle

准备工作

安装

1. 安装启动whistle
2. 安装whistle根证书 支持https

开启服务

// whistle会运行在8899端口，可以按需修改
w2 start -p 8899

真机连接代理

手机wifi开启手动代理，服务器为mac的ip，端口就是上面的8899

打开mac控制台

然后mac上chrome打开http://127.0.0.1:8899/#network

然后

1. 真机打开jady02的url
2. 可以了
   

常用需求配置

1. HOST代理/查看网络请求

把jady02的host代理到本地localhost上，只需要按图中配置：

然后查看network：

2. 查看真机DOM/CSS

先写好配置项并保存：

然后点击上面的weinre选项卡进入一个页面，
真机访问这个host下的url

此时绿色的链接表示当前激活的链接，选择上面的elements选项卡就可以看到DOM/CSS了。

3. 查看真机运行的console控制台

首先下一个vconsole的min.js包至本地，然后按图中配置：

此时可以在network标签中看到请求和console.log：

4. 真机注入可执行scripts

如果需要运行时注入一些代码，可以通过vconsole真机来操作，也可以通过whistle做注入：