打造最舒适的webview调试环境

[riskers]

你在做移动web开发的时候是不是只是在Chrome下开启移动模式，然后就啪啪啪闷头敲代码了？如果你平时只是做做宣传页，Chrome的移动模式可能就能满足你。但是现在越来越多的应用采用Hybrid的开发方式，这样的话就可能在web页面上调用webview注入的函数，那么，这个页面在Chrome上只会报错，因为我们不在webview里，根本没有注入的那些函数。

以我现在做的项目为例，要在页面里判断在客户端有没有登录，可以这样写:

var isLogin = AndroidWebview.hasLogin() ;

结果可想而知，AndroidWebview是客户端在webview里注入的方法，这里当然会报错了。

真机测试

这种情况怎么开发呢？回顾一下以前的两种办法 :

• 真机 + Chrome inspect ：Chrome 版本必须高于 32，其次你的测试机 Android 系统高于 4.4

  1. 先用数据线将 Android 测试机连接到电脑上。需要打开测试机上面“开发者选项”中的 “USB 调试”功能。
  2. 在PC的Chrome上打开Chrome://inspect即可找到你的设备
  3. 手机进入一个webview页面，即可在Chrome上看到调试台了

  

  可以看到，第一个记录是手机里的浏览器的；第二个是记录是手机助手里的webview。

• 真机 + weinre : 在你本地创建一个监听服务器，并提供一个JS脚本，需要在需要测试的页面中加载这段 JS，就可以被 Weinre 监听到，在 Inspect 面板中调试你这个页面。

  1. 安装 weinre npm install -g weinre
  2. 开启 weinre weinre --httpPort 8888 --boundHost -all-
  3. 浏览器打开 localhost:8888 :
     
  4. 将 "2" 这段脚本加载到调试的页面最后，手机进入页面，然后进入 "1" ，就可以看到控制台了
     

这两种办法都需要真机测试，你可以想像一下你在开发、调试时的流程：

1. 写代码
2. 拿起手机，进入页面
3. 有BUG，重复1、2
4. 开发新功能，重复1、2、3

然后你的手不停地在键盘和手机之间切换，多么痛苦。后来，我遇到了Genymotion。

Genymotion

这是一款安卓模拟器，有了它我们可以在电脑上开启一个安卓机。具体使用我就不细说了，很简单请自行搜索。

这是我在模拟器上安装的手机助手：

而且使用 Chrome inspect 是直接可以调试模拟器中的webview的：

这样，我们就可以不用手忙脚乱地写代码、看手机了，一切都在PC上调试。但是我们在模拟器上看到的是线上代码，我们加一个新功能还要发布代码才能看到效果？

Charles / Fiddler

幸好有Charles这样的工具(Windows下请使用Fiddler)，Charles会在本地开启一个代理服务，默认接口8888。通过这个代理，模拟器上的请求会被转移到电脑上，我们可以任意地去替换请求文件让我们更加方便地调试页面。

设置监听端口

Proxy Settings - HTTP Proxy - Proxies - HTTP Proxy 中设置

监听Chrome

因为 Charles 只会监听全局和Firefox，为了能监听Chrome，使用Proxy SwitchyOmega插件，增加一个情景模式：

在这个情景模式下，我们就可以抓到在Chrome里的数据了：

注意：Charles默认是不支持https的，我们选择 设置 - Proxy Settings - SSL ，选中 Enable SSL Proxying 。然后在 Locations 里填写要抓包的域名和端口，点击 Add，Host填写域名，如 www.baidu.com ，port填 443 。具体参考最后的文章。

监听Genymotion

别忘了，使用Charles的初衷是让我们可以用本地的文件替换线上文件，不用每次修改都要发布。

1. 在Genymotion中，Settins - Network (port选9999是因为我之前在Charles中设置的是9999) :

   

2. 在开启的模拟器中，设置 - WLAN - 长按2秒 - 修改网络 ，代理设置改为手动，主机名为10.0.3.2，端口为9999，和上面一致。

3. 然后在模拟器中打开webview页面就可以看到所有请求了

   

4. 右键保存源文件到本地，然后添加一行alert代码 。

   

   

5. 在请求上右键，选择 Map Local

   

6. 选择刚才修改过的文件

7. 重新载入页面 :

   

这样，我们利用模拟器+Chrome+Charles就可以完美开始、调试webview页面了，模拟器当做手机，Chrome insepct 调样式、接口、查看数据，利用Charles映射本地文件直接查看效果。

至于iOS上的webview调试，模拟器+Safari+Charles应该也是一样的。我没有试过，试过的人请告知。

参考

• 浅谈Hybrid技术的设计与实现
• 移动前端调试页面–weinre
• Mac下HTTP/HTTPS抓包工具Charles
• 前端开发调试线上代码的两款工具
• 在 iOS 模拟器中调试 Web 页面

---

向我捐助 | 关于我 | 工作机会

---

[tiann]

mark, take a look after lunch.

[tiann]

retina上怎么个截屏法，保证在非高清屏上不会扩大两倍？还有，gif录制软件用的啥？

[riskers]

@tiann
截屏软件试过很多，最后用的是 圈点，能截图，截完图以后能标注。
录制软件是 licecap

[tiann]

@riskers licecap录制在retina上不清晰啊；在非retina上是要把宽度缩小一半？

[ksky521]

还有办法就是写个chrome扩展，把webview方法代理过来~ 手机百度就是这样做的哦

[riskers]

@ksky521 大神 😊
我看了你的博客，可是助手客户端有各种各样的方法。比如:

• 跳转到native的详情页
• 下载APP

这恐怕都不好模拟吧，手机百度是怎么做的？

[daveztong]

charles+genymotion 挺好使！

[riskers]

@daveztong 是啊，现在想想当时刚做移动开发的时候拿真机开发。真的是手忙脚乱的。。

[0326]

genymotion好东西！

[tiann]

监听Genymotion这一节第二条：ip地址是不是应该是10.0.2.2

// 我发现你比我认识的公司的前端都刁啊，今天碰到一个问题，js只要一上线；就被压缩了；只要报错都是第一行，无法定位；然后这个js跨域访问了别的资源，直接放到别的服务器，改掉host又存在问题；它们搞了半天没搞定，然后我想起你这个用charles map local搞定了。

特来膜拜。

[riskers]

是 10.0.3.2 ，这个ip是我当时看官网还是哪里看到，不知道是不是默认的还是什么。

@tiann 那是因为你认识的前端少吧 😄

最后是什么问题？

[tiann]

了解了 ，Genymotion用的10.0.3.2；如果是Android自带的模拟器，那就是10.0.2.2；
这个地址指的是模拟器的localhost；不能直接用127.0.0.1因为，这个指向你的电脑了；

我认识月影啊。😏

最后啊，有个地方是null。主要是定位到哪里是null比较困难。

[agileago]

安装genymotion真是挑战人类的极限！😢！

注册个账号下载下来需要登录获取设备列表 ， 谁知道登录不上去，最后google说在官网重新登出再登陆一次，或者修改密码就能行了，ok，照做可以上了

终于看到设备列表了，选择了一个准备尝鲜，谁知这个时候跳出来信息说下载不了，http返回code 0，再google, 在众多无效答案中吐血，最后在一个不起眼的角落里看到有人说把network里面的
set HTTP Proxy 1.234.45.50 set Port 3128

目前还没下载完，等着下载完看看有啥坑没有，这里占个地先记录一下

[think2011]

之前有折腾过charles的匹配规则，其中有一条是这样的需求

只 Map js文件、css文件、html到本地，其他统统走线上的。

这条path不知道怎么写，最后只好写了3条规则。

[repairearth]

Mark，好文章啊！

[Troland]

实在是很费解，我按照LZ的方法一步一步地走下来，就是不对, 我的Genymothion版本是2.8.0,AVD是Google Nexus 7 2013-6.0.0-API23,有几点我不明白:

• 这个charles怎么把Genymotion里面app的请求导入到本机上的，本机上是需要运行webserver吗？
• 这里的10.0.3.2这个ip是什么意思?

我按照LZ的一步一步地设置下来，然后app里面的webview请求就始终是错误的。。。！始终是请求不到页面。。

[Troland]

搞定了，原来这里的AVD里面的那个wifi高级选项里面填写的那个服务器ip地址要写成主机的ip地址.比如我是Mac就通命令ifconfig来获得本机的地址，然后填写进去即可，然后chares会跳出要求访问的提示，去
Proxy -> Access Control Settings添加0.0.0.0/0即可

[ZhyCong]

楼主是怎样做到用chrome inspect genymotion里的页面的呢,我的没法inspect

[felbry]

调试安卓4.4以下的可以吗？毕竟不全是chrome内核，还是调不了吧

[felbry]

调试安卓4.4以下的可以吗？毕竟不全是chrome内核，还是调不了吧

[riskers]

@felbry 现在安卓 4.4 以下还需要考虑么

[tanranran]

@riskers 不需要了。除非是特殊项目