调剂遭受,App调节和测量检验方法参谋
分类:计算机知识

打造最舒适的 webview 调试环境

2015/11/11 · CSS · 4 评论

本文作者: 伯乐在线 - risker 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

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

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

JavaScript

var isLogin = AndroidWebview.hasLogin() ;

1
2
var isLogin = AndroidWebview.hasLogin() ;
 

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

图片 1

H5调试常见方法

相较于pc端,移动端调试要更加丰富一些,下面对调试的方法进行简单汇总。
主要分为以下几点:

chrome developer tools
android+chrome inspect
iOS+safari
GapDebug
weinre
weinre相关套件
代理

真机测试

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

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

1. 先用数据线将 Android
测试机连接到电脑上。需要打开测试机上面“开发者选项”中的 “USB
调试”功能。

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f631a36a36329472806-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631a36a36329472806-2">
2
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f631a36a36329472806-1" class="crayon-line">
1.  先用数据线将 Android 测试机连接到电脑上。需要打开测试机上面“开发者选项”中的 “USB 调试”功能。
</div>
<div id="crayon-5b8f631a36a36329472806-2" class="crayon-line crayon-striped-line">
 
</div>
</div></td>
</tr>
</tbody>
</table>

1.  在PC的Chrome上打开`Chrome://inspect`即可找到你的设备
2.  手机进入一个webview页面,即可在Chrome上看到调试台了![](http://jbcdn2.b0.upaiyun.com/2015/11/f93b8bbbac89ea22bac0bf188ba49a612.png)可以看到,第一个记录是手机里的浏览器的;第二个是记录是手机助手里的webview。
  • 真机 + weinre : 在你本地创建一个监听服务器,并提供一个JS脚本,需要在需要测试的页面中加载这段 JS,就可以被 Weinre 监听到,在 Inspect 面板中调试你这个页面。
JavaScript

1. 安装 weinre `npm install -g weinre`

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f631a36a3a189287013-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631a36a3a189287013-2">
2
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f631a36a3a189287013-1" class="crayon-line">
1.  安装 weinre `npm install -g weinre`
</div>
<div id="crayon-5b8f631a36a3a189287013-2" class="crayon-line crayon-striped-line">
 
</div>
</div></td>
</tr>
</tbody>
</table>

1.  开启 weinre `weinre --httpPort 8888 --boundHost -all-`
2.  浏览器打开 `localhost:8888` :
    ![](http://jbcdn2.b0.upaiyun.com/2015/11/28c8edde3d61a0411511d3b1866f06365.png)
3.  将 “2” 这段脚本加载到调试的页面最后,手机进入页面,然后进入 “1”
    ,就可以看到控制台了
    ![](http://jbcdn2.b0.upaiyun.com/2015/11/665f644e43731ff9db3d341da5c827e14.png)

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

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

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

chrome developer tools

除了chrome,Firefox中的调试工具也较为类似,Firefox有个小优势就是代理工具charles支持直接开启Firefox的代理服务(需要安装Firefox的charles插件)。
特点
调试简单,进行响应式布局、性能优化、网络环境模拟等比较方便,缺点是非真机无法调试webviewjsbridge及发现真机中存在的问题。
适用范围
页面响应式调试,适合开发初始阶段,还可进行性能优化分析,前端开发乃至后端开发人员必备技能。

Genymotion

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

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

图片 2

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

图片 3

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

android+chrome inspect

图片 4

特点
使用chrome inspect调试android设备(包括模拟器)中的网页,访问chrome://inspect
即可看到连接设备以及可调试页面。
初次使用chrome inspect需要翻墙

适用范围
调试4.4以上版本android设备上app内的webview及chrome中的网页。
调试webview需要打开app的debug模式,WebView.setWebContentsDebuggingEnabled(true);

Charles / Fiddler

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

模拟器

目前常用的为genymotion,基于virtualbox内核,所以首先需要安装virtualbox。genymotion对virtualbox启动的模拟器作了一系列优化工作,比如ROM下载、移动设备模拟命令菜单(比如旋屏、开启摄像头)等。 另外还有Parallels可供选择,也能下载android ROM进行安装。
iOS+safari

特点
使用pc端的safari调试iOS设备中的网页,可进行真机远程调试,也可调试模拟器。
适用范围
调试iOS设备(包括模拟器)上的webview及safari中的网页。

如果调试safari,直接打开模拟器,使用pc中的safari就可识别到调试网页,而调试webview,则需要安装debug包(由于是运行在pc上,需x86打包)。
简单步骤如下:
安装xcode命令行工具 xcode-select --install

创建模拟器 xcrun simctl create "demo"

启动模拟器 xcrun instruments -w 'demo'

安装app xcrun simctl install booted /path/to/Your.app

设置监听端口

Proxy SettingsHTTP ProxyProxiesHTTP Proxy 中设置

GapDebug

图片 5

特点

跨平台,应用是个web页面,同时集成了Safari和Chrome的调试工具,可运行在windows和mac平台上

依赖少,只需一个Chrome就能使用Safari和Chrome的调试工具
统一管理,在同个界面显示了iOS设备和Android设备及其调试页
一些实用小功能,如截屏、设备控制、app安装等

适用范围
iOS设备和4.4以上版本Android设备(及其模拟器)上的webview和网页。

本文由威尼斯手机娱乐官网发布于计算机知识,转载请注明出处:调剂遭受,App调节和测量检验方法参谋

上一篇:【威尼斯手机娱乐官网】资源大全,前端必备知 下一篇:移动前端第一弹
猜你喜欢
热门排行
精彩图文