打造最舒适的webview调试环境
riskers opened this issue · 22 comments
你在做移动web开发的时候是不是只是在Chrome下开启移动模式，然后就啪啪啪闷头敲代码了？如果你平时只是做做宣传页，Chrome的移动模式可能就能满足你。但是现在越来越多的应用采用Hybrid的开发方式，这样的话就可能在web页面上调用webview注入的函数，那么，这个页面在Chrome上只会报错，因为我们不在webview里，根本没有注入的那些函数。
以我现在做的项目为例，要在页面里判断在客户端有没有登录，可以这样写:
var isLogin = AndroidWebview.hasLogin() ;
结果可想而知，AndroidWebview是客户端在webview里注入的方法，这里当然会报错了。
真机测试
这种情况怎么开发呢？回顾一下以前的两种办法 :
-
真机 + Chrome inspect ：Chrome 版本必须高于 32，其次你的测试机 Android 系统高于 4.4
- 先用数据线将 Android 测试机连接到电脑上。需要打开测试机上面“开发者选项”中的 “USB 调试”功能。
- 在PC的Chrome上打开
Chrome://inspect即可找到你的设备 - 手机进入一个webview页面，即可在Chrome上看到调试台了
可以看到，第一个记录是手机里的浏览器的；第二个是记录是手机助手里的webview。
-
真机 + weinre : 在你本地创建一个监听服务器，并提供一个JS脚本，需要在需要测试的页面中加载这段 JS，就可以被 Weinre 监听到，在 Inspect 面板中调试你这个页面。
- 安装 weinre
npm install -g weinre - 开启 weinre
weinre --httpPort 8888 --boundHost -all- - 浏览器打开
localhost:8888:
- 将 "2" 这段脚本加载到调试的页面最后，手机进入页面，然后进入 "1" ，就可以看到控制台了
- 安装 weinre
这两种办法都需要真机测试，你可以想像一下你在开发、调试时的流程：
- 写代码
- 拿起手机，进入页面
- 有BUG，重复1、2
- 开发新功能，重复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的初衷是让我们可以用本地的文件替换线上文件，不用每次修改都要发布。
-
在Genymotion中，
Settins-Network(port选9999是因为我之前在Charles中设置的是9999) : -
在开启的模拟器中，
设置-WLAN-长按2秒-修改网络，代理设置改为手动，主机名为10.0.3.2，端口为9999，和上面一致。 -
然后在模拟器中打开webview页面就可以看到所有请求了
-
右键保存源文件到本地，然后添加一行alert代码 。
-
在请求上右键，选择
Map Local -
选择刚才修改过的文件
-
重新载入页面 :
这样，我们利用模拟器+Chrome+Charles就可以完美开始、调试webview页面了，模拟器当做手机，Chrome insepct 调样式、接口、查看数据，利用Charles映射本地文件直接查看效果。
至于iOS上的webview调试，模拟器+Safari+Charles应该也是一样的。我没有试过，试过的人请告知。
参考
mark, take a look after lunch.
retina上怎么个截屏法，保证在非高清屏上不会扩大两倍？还有，gif录制软件用的啥？
还有办法就是写个chrome扩展，把webview方法代理过来~ 手机百度就是这样做的哦
charles+genymotion 挺好使！
@daveztong 是啊，现在想想当时刚做移动开发的时候拿真机开发。真的是手忙脚乱的。。
genymotion好东西！
监听Genymotion这一节第二条：ip地址是不是应该是10.0.2.2
// 我发现你比我认识的公司的前端都刁啊，今天碰到一个问题，js只要一上线；就被压缩了；只要报错都是第一行，无法定位；然后这个js跨域访问了别的资源，直接放到别的服务器，改掉host又存在问题；它们搞了半天没搞定，然后我想起你这个用charles map local搞定了。
特来膜拜。
了解了 ，Genymotion用的10.0.3.2；如果是Android自带的模拟器，那就是10.0.2.2；
这个地址指的是模拟器的localhost；不能直接用127.0.0.1因为，这个指向你的电脑了；
我认识月影啊。😏
最后啊，有个地方是null。主要是定位到哪里是null比较困难。
安装genymotion真是挑战人类的极限！😢！
注册个账号下载下来需要登录获取设备列表 ， 谁知道登录不上去，最后google说在官网重新登出再登陆一次，或者修改密码就能行了，ok，照做可以上了
终于看到设备列表了，选择了一个准备尝鲜，谁知这个时候跳出来信息说下载不了，http返回code 0，再google, 在众多无效答案中吐血，最后在一个不起眼的角落里看到有人说把network里面的
set HTTP Proxy 1.234.45.50 set Port 3128
目前还没下载完，等着下载完看看有啥坑没有，这里占个地先记录一下
之前有折腾过charles的匹配规则，其中有一条是这样的需求
只 Map js文件、css文件、html到本地，其他统统走线上的。
这条path不知道怎么写，最后只好写了3条规则。
Mark，好文章啊！
实在是很费解，我按照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请求就始终是错误的。。。！始终是请求不到页面。。
搞定了，原来这里的AVD里面的那个wifi高级选项里面填写的那个服务器ip地址要写成主机的ip地址.比如我是Mac就通命令ifconfig来获得本机的地址，然后填写进去即可，然后chares会跳出要求访问的提示，去
Proxy -> Access Control Settings添加0.0.0.0/0即可
楼主是怎样做到用chrome inspect genymotion里的页面的呢,我的没法inspect
调试安卓4.4以下的可以吗？毕竟不全是chrome内核，还是调不了吧
调试安卓4.4以下的可以吗？毕竟不全是chrome内核，还是调不了吧