澳门新葡亰平台官网:调试环境,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。通过那个代理,模拟器上的伸手会被转移到Computer上,大家能够随意地去替换须求文件让我们进一步有益地调试页面。

模拟器

时下常用的为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和网页。

发表评论

电子邮件地址不会被公开。 必填项已用*标注