菜单

制造最舒心的 webview 调试环境

2018年11月18日 - CSS/CSS3

制作最畅快的 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

https://www.cnblogs.com/slmk/p/7591126.html

真机测试

这种情况怎么开也?回顾一下原先的少数栽艺术 :

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。
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

Genymotion

立是如出一辙暂缓安卓模拟器,有矣她我们可于电脑上被一个安卓机。具体使用自己就是未细说了,很粗略请自行检索。

即时是自身当模拟器上设置的手机助手:

图片 2

并且使用 Chrome inspect 是直接可以调剂模拟器中之webview的:

图片 3

如此,我们即便可以不用慌地刻画代码、看手机了,一切都在PC上调节。但是我们当模拟器上见到底是线上代码,我们加以一个新职能还要公布代码才能见到成效?

Charles / Fiddler

幸好有Charles如此的工具(Windows下请使用Fiddler),Charles会见在地方开启一个代理服务,默认接口8888。通过是代理,模拟器上之呼吁会吃移到计算机上,我们好轻易地去替换请求文件于我们越方便地调试页面。

装监听端口

Proxy SettingsHTTP ProxyProxiesHTTP Proxy 中设置

监听Chrome

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

图片 4

在这个情景模式下,我们就足以抓及于Chrome里的多寡了:

图片 5

专注:Charles默认是休支持https的,我们摘 设置Proxy Settings
SSL ,选中 Enable SSL Proxying 。然后在 Locations
里填写要抓包的域名及端口,点击 AddHost填写域名,如 www.baidu.com
port443 。具体参考最后的文章。

监听Genymotion

变忘了,使用Charles的初衷是于咱们得以就此地方的文件替换线上文件,不用每次修改都要公布。

  1. 在Genymotion中,SettinsNetwork
    (port选9999举凡盖我事先以Charles中安的是9999)
    :图片 6
  2. 于打开之模拟器中,设置WLAN长按2秒修改网络
    代理设置改为手动,主机名吧10.0.3.2,端口为9999,和方一样。
  3. 接下来于模拟器中打开webview页面就可以看到拥有请求了图片 7
  4. 右键保存源文件及地方,然后上加一行alert代码
    图片 8图片 9
  5. 以求上右键,选择
    Map Local图片 10
  6. 选才修改了之文书
  7. 又载入页面
    :图片 11

这样,我们利用模拟器+Chrome+Charles即便得健全起来、调试webview页面了,模拟器当做手机,Chrome insepct
调样式、接口、查看数据,利用Charles炫耀本地文件一直翻效果。

至于iOS上的webview调试,模拟器+Safari+Charles应该吗是同等的。我莫试过,试过的食指呼吁晓。

2015-12-17 更新

近期尚以了 browsersync
,这个东西调试、开发简直不用太爽。在本地开启一个服务器,页面放上,然后被模拟器,进入这页面,保存文件的时刻模拟器自动刷新,而且能一直调用客户端的接口,再为即报错了。

若你说 Gulp 也克自行刷新,那下面的凡 Gulp 没有的:你于本机开启 wifi
,然后手机连接,进入页面。这样,你各个保存一软文件,手机webview
模拟器 webview
同时活动刷新,而且就片单页面是共同的,就是说,你于模拟器上点击是按钮,手机上充分页面也会点击是按钮。这样你每次测试的时节,电脑旁张一清除测试机,而若吧要模拟器上接触一下,这些测试机都见面自动点一下!
browserSync 自带 weinre ,这样哪个测试机出了问题,你可以直接打开
weinre 调试!

参考

有关作者:risker

图片 12

2014年大学毕业,现在在京都某部互联网企业从前端开发的干活,近一半年主要做运动web开发。微博粉丝太少,求粉。

个人主页 ·
我的章 ·
7 ·
  

图片 13

相关文章

标签:,

发表评论

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

网站地图xml地图