调度情形,移动端Web开辟调节和测量试验之Wein

制作最舒服的 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相关套件
代理

前言

新近一年注重专门的事业转向前端,在此此前隆重不经常的iOS渐渐被各中等公司冷酷,所以跟随公司步伐开端从事前端开垦,本文首要总计一下前端开荒中各个景况下怎么让页面步向调理情状,各位有宝贵意见希望在评价中多么留言。

原稿地址:

真机测量检验

这种气象怎么支付呢?回想一下从前的二种格局 :

  • 真机 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及察觉真机中留存的标题。
适用范围
页面响应式调节和测量试验,符合开拓起始阶段,还可进展品质优化深入分析,前端开拓以至后端开拓人士必备本事。

Nginx

早晚,nginx是前端开荒必备工具,在堂弟大真机调节和测验页面时都会用到。
安装

$brew install nginx  

完了未来可以直接终端输入nginx拉开服务,浏览器输入http://localhost:8080 或本地ip就可以进入nginx页面,要修改nginx配置可步向以下路子修改/usr/local/etc/nginx/nginx.conf,首要要修改的正是端口号和root路线呼应的地方

图片 2

修改完事后保存,在顶峰中输入nginx -s reload重启nginx服务,设置好之后就可用手提式有线电话机步入链接 访谈对应的付出页面举行真机调节和测量试验了

在设计员与前端开垦职员的努力下,一个WebApp出炉了,不过测量试验人士说了一群的主题素材:某某机型下页面表现不等同,某某系统下页面怎么怎么样,某某系统浏览器下页面怎么怎么滴。瞅着满满的测量试验汇总文书档案,大家早就在三个又二个响当当或不有名的无绳电话机终端上再一次着这个专门的工作:留神的每个审核代码,alert嫌疑的变量,乃至不惜重构来品尝化解这种分歧样的标题。就算说Android 4.0 以上的移位器具支撑桌面版Chrome远程调节和测验,况且在Android 4.4以下也只限于预览Chrome手提式有线电话机版浏览器内部职能,大家力所不如在标题浏览器下实时联调。此时大家往往无可奈何地将那些主题材料归为浏览器宽容性bug。大家私自观念着,如果手提式有线电话机端浏览器有个近乎Firebug的调整工具就好了!现实不是!移动网络时期,浏览器发展的大势、浏览器调节和测量检验工具发展的今后必将是依赖移动端调节和测量试验的便利性、远程调试的常见协理。大家出入生死预知,扶助多终端跨设备跨浏览器的中间隔调试工具将会越扩充。

Genymotion

那是一款安卓模拟器,有了它大家能够在计算机上张开二个安卓机。具体应用自家就不细说了,很简短请自行检索。

那是自身在模拟器上安装的手提式有线电话机助手:

图片 3

而且动用 Chrome inspect 是直接能够调整模拟器中的webview的:

图片 4

那般,我们就足以毫不恐慌地写代码、看手提式有线电话机了,一切都在PC上调度。但是大家在模拟器上收看的是线上代码,大家加二个新效率还要发表代码工夫看到作用?

android chrome inspect

图片 5

特点
动用chrome inspect调节和测验android设备(满含模拟器)中的网页,访谈chrome://inspect
就能够知到连接装置以至可调整页面。
第一使用chrome inspect需求翻墙

适用范围
调整4.4之上版本android设备上app内的webview及chrome中的网页。
调整webview须要开荒app的debug方式,WebView.setWebContentsDebuggingEnabled(true);

Charles(Fiddler)使用

是因为没怎么采用过fidder,功能都以同样的。使用频率最高的有

  • 翻开网络哀告的参数、响应数据
  • 远程文map
  • 本和姑件map
  • 断点修改供给参数只怕重临数据
    想要看详细的charles使用教程看这里

Weinre(WebInspector Remote)是一款基于Web Inspector的远程调节和测量试验工具,依附于互联网,能够在PC上一贯调节和测量检验运营在移动设备上的中远间距页面,中文意思是长途Web检查器,有了Weinre,在PC上得以即时修改指标网页的HTML/CSS/JavaScript,调节和测量检验进度可实时展现移动器材上页面包车型客车预览效果,并同步展现设备页面包车型客车谬误和警戒新闻,能够查看互联网财富的音信,不过weinre不帮助断点调节和测量试验。该类型如今是 Apache Cordova 的一部分。

Charles / Fiddler

幸好有Charles这般的工具(Windows下请使用Fiddler),Charles会在本土开启二个代理服务,默许接口8888。通过这一个代理,模拟器上的乞请会被撤换来Computer上,大家能够Infiniti制地去替换诉求文件让我们进一步有益于地调节和测量检验页面。

模拟器

日前常用的为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

上线后手提式有线电话机端调节和测量检验

付出时候可以任由修改本地的代码来每一日查看,纵然把代码布到测量试验情状或然已经上到正式景况想要查看和调整对应的bug就不那么轻便了

weinre职业原理两张图读懂Weinre的干活机制:

设置监听端口

Proxy SettingsHTTP ProxyProxiesHTTP Proxy 中设置

GapDebug

图片 6

特点

跨平台,应用是个web页面,同不时间并入了Safari和Chrome的调节和测量检验工具,可运转在windows和mac平台上

依附少,只需一个Chrome就能够运用Safari和Chrome的调节工具
会集管理,在同个界面呈现了iOS设备和Android设备及其调节和测验页
一部分实用小功能,如截屏、设备调节、app安装等

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

安卓webview:chrome调试

详细官方文书档案
缺点:

  • 1、须要手提式有线电电话机安装chrome
  • 2、应用程序供给设置允许远程调试(4.4事先的机器不协助)

图片 7图片 8

监听Chrome

因为 Charles 只会监听全局和Firefox,为了能监听Chrome,使用Proxy SwitchyOmega插件,扩大四个情景格局:

图片 9

在这里个情景情势下,大家就能够抓到在Chrome里的多寡了:

图片 10

小心:Charles暗中同意是不援救https的,大家选用 设置Proxy SettingsSSL ,选中 Enable SSL Proxying 。然后在 Locations 里填写要抓包的域名和端口,点击 AddHost填写域名,如 www.baidu.com ,port443 。具体参照他事他说加以考察最终的作品。

weinre

图片 11

特点
适用范围广,在调节和测量检验页面中加载weinre提供的三个js脚本,就能够在weinre inspect面板中开展调治。
设置步骤如下(npm安装情势):
安装 npm install -g weinre

启动 weinre --boundHost -all-
,暗许端口是8080,可增进配置--httpPort 8888
改换端口为8888
布置脚本 访谈http://localhost:8080
,将target script参加到调节和测量试验页面中

详细计划及其他安装形式可参见合立陶宛语档
适用范围
诚如在付出进度中开展调整,不帮助USB调节和测量试验的真机设备可用该方法,官方证明可调护治疗的限制如下:
Android 2.2 Browser application
Android 2.2 w/PhoneGap 0.9.2
iOS 4.2.x Mobile Safari application
BlackBerry v6.x simulator
webOS 2.x (unspecified version)

weinre相关套件
MIHTool
MIHTool是weinre的app集成版本,只有iOS版本可供安装,例举多少个特点:
自行注入weinre所需脚本
支撑webview js bridge api的一步一趋(假若app端还未变成支付)
扶助在调整台间接require各类包方便调节和测量检验、ipad端补助
ipad端还援助在配备中体现类似chrome的开拓者工具

与第4点类似提供设备中的开辟者工具展现,还会有eruda,可以访谈http://liriliri.github.io/eruda/查看效果。

iOS:safari调节和测量试验方式

手机:设置 → Safari → 高级 → Web 检查器 → 打开
mac:Safari → 偏幸设置 → 高档 → 在菜单栏中展现“开辟”菜单。

mac上开垦Safari 之后,连上 iOS 设备,运转Safari,步入对应的页面,然后Computersafari的支出菜单中可观察iOS设备浏览的各页面,点击走入调节和测验方式。

症结:只好看safari和一些和睦支付的webview,其余应用程序调节和测量检验不了

上述三层组织暗意图的含义:Debug客商端:本地的WebInspector,远程调节和测量检验客商端。Debug服务端:本地的HTTPServer,为Debug指标页面与Debug客商端创设通讯。Debug目的页面:被疗养的页面,页面已松手weinre的长间距js。客商端、指标页面与Debug服务端之间利用XMLHttpRequest 实行HTTP通讯,你平日的应用景况是将Debug顾客端与服务端搭建在桌面开荒碰着,Debug目的页面放在移动器具。由于Weinre的debug顾客端是依据Web Inspector开拓,而Web Inspector只包容WebKit焦点的浏览器,所以不得不在Chrome/Safari浏览器展开Weinre顾客端举行调节和测量检验。

监听Genymotion

别忘了,使用Charles的初志是让我们能够用当地的文件替换线上文件,不用每便修改都要宣布。

  1. 在Genymotion中,SettinsNetwork (port选9999是因为自个儿事先在查尔斯中设置的是9999) :图片 12
  2. 在拉开的模拟器中,设置WLAN长按2秒修改网络代理设置改为手动,主机名叫10.0.3.2,端口为9999,和地点同样。
  3. 接下来在模拟器中开荒webview页面就足以观察全部央求了图片 13
  4. 右键保存源文件到地头,然后增多一行alert代码 。图片 14图片 15
  5. 在呼吁上右键,选用 Map Local图片 16
  6. 分选刚刚修改过的文书
  7. 再也载入页面 :图片 17

这么,我们应用模拟器 Chrome Charles就足以周到起来、调节和测量试验webview页面了,模拟器当做手提式有线电电话机,Chrome insepct 调样式、接口、查看数据,利用Charles照耀当半夏件平昔查看效果。

至于iOS上的webview调试,模拟器 Safari Charles有道是也是同样的。我未有试过,试过的人请告知。

spy-debugger

spy-debugger是weinre的增添版,试行

npm install spy-debugger -g

就可以到位安装,运转后安顿设施代理就能够开展调度。 首要特点如下:
透过代办拦截html自动注入所需调治将养脚本
集成了代理成效,默许使用AnyProxy,也可配备其余代理
扶助https,可阻止webview及浏览器发起的央浼

其它

chrome浏览器、UC浏览器调节和测量检验工具等,由于种类太多,不可能种种浏览器都用可是的主意调节和测量试验,所以并未有去行使

笔者在Chrome 38/39本子测量试验时展开Debug客户端出现页面白板,原因不详,理解原因的招待留言给自己。换为Safari浏览器展开则符合规律。

2015-12-17 更新

近些年还运用了 browsersync ,这么些东武安平级调动试、开采大致不用太爽。在地点开启一个服务器,页面放进去,然后展开模拟器,步向那些页面,保存文件的时候模拟器自动刷新,何况能直接调用客户端的接口,再也就是报错了。

借使您说 Gulp 也能半自动刷新,那上边包车型大巴是 Gulp 未有的:你在本机开启 wifi ,然后手提式有线电电话机总是,进入页面。那样,你每保存壹遍文件,手提式有线电话机webview 和 模拟器 webview 同期活动刷新,何况那多少个页面是一块的,就是说,你在模拟器上点击那一个按键,手提式有线电话机上极度页面也会点击那么些按键。那样你每一回测验的时候,Computer旁摆一排测量试验机,而你也须求模拟器上点一下,那几个测量试验机都会自动点一下! browserSync 自带 weinre ,那样哪个测验机出了难题,你能够一贯张开 weinre 调试!

代理

以上提到移动端设备(饱含模拟器)的调度方式均可万分代理一齐使用,在活动端设备中陈设http/https代理,将线上财富代理到本地,使改动即时生效并察看功效。
常用的代理工科具关键有fiddle和charles,代理工科具上提供的法力相当多,但调试进程中的张开药情势平常有以下两种:
直白设置设备的代理服务器为本机,截获必要查询数据,逐个审查万分信息,属于难点一定阶段
而外安装代理服务器,别的配置部分财富的代理路线为地面资源,实时查看代码运营景况,属于难点一蹴而就阶段, 经常支付进度也可用该方法代理线上能源拓宽调节和测量试验

通用:weinre大法好

weinre作为二个通用的长途调节和测验工具,首要用来远程调节和测量检验手提式有线电话机端的页面,分界面和职能和chrome调试时好像,它并未有别的限制标准,只要求引进三个监听的js文件就足以实时查看和调节和测验页面了。
安装
npm install -g weinre
启动
weinre --httpPort 8081 --boundHost 192.168.9.124
此刻一度展开监听功效,在pc浏览器上访谈 ,就可步向weiner主页面

图片 18

在这里个页面有介绍怎么监听自个儿的页面,还应该有相应的demo,进入http://192.168.9.124:8081/client/#anonymous 就足以张开调试页面,如若有监听到页面调用了Targets里面有相应的页面地址,展现青莲的为当前选中页面,就可以实时查看html结构,修改css样式,查看console了。

图片 19

Tips:许多个人不使用weinre是以为须要进入内定的js文件比较辛苦,不过使用查尔斯能够总结化解那几个难题,把线上的js文件恐怕html直接map到地面包车型地铁文书,然后在地面文件进行加多weinre要求的js文件,那几个不管是什么手提式有线电话机,不管是怎么样页面,大家都能在PC上进展调解了。相同的时间把远程的文书map到地面开展修改和验证bug也是日常利用的

Weinre系统援救性iOS 3.1.3或更低版本不支持webOS 1.45或更早版本不协理

参考

  • 浅谈Hybrid才干的安插性与贯彻
  • 挪动前端调节和测量检验页面–weinre
  • Mac下HTTP/HTTPS抓包工具查理
  • 前端开辟调节和测量试验线上代码的五款工具
  • 在 iOS 模拟器中调理 Web 页面

    3 赞 2 收藏 4 评论

总结

地点对每一类调节和测验方法开展了差不离介绍,每一种方法都有各自的表征和适用场景。
响应式调节和测试中,使用Chrome DevTools就可以飞快查看多配备显示效果和实时调解,别的还会有Ghostlab也是响应式调节和测验的好工具,有着和broswer-sync同样的多设备多窗口同步功用;
更加的的真机(模拟器)调节和测量试验,高版本Android设备卓殊chrome,iOS设备拾贰分Safari,使用GapDebug则越是方便,统一了iOS和Android设备的调护治疗入口;
而另外不能够运用chrome和Safari进行调试的情况,比如一些低级机型的包容问题,使用weinre或其相关套件进行调剂;
再合作代理的财富本地映射,能够更进一竿便利地调节和测量试验线上情状出现的难题;
实际上付出中,仍然必要在适宜的空子采纳适当的调理格局。

Debug顾客端补助的阳台weinre的Mac程序 - Mac OSX 10.6 64-bitGoogleChrome 8及以上版本浏览器Apple Safari 5及以上版本浏览器

至于小编:risker

图片 20

贰零壹陆年高校结业,未来在首都某网络商家从事前端开拓的劳作,近四个月拥戴做活动web开拓。微博观众太少,求粉。 个人主页 · 笔者的文章 · 7 ·   

图片 21

Debug目的页面扶助的平台Android 2.2 系统浏览器Android 2.2 中的phonegapiOS 4 的safari浏览器中兴 v6.x 模拟器webOSchrome8 safari5

至于Weinre的Java版本下载地址不可能访问的主题素材,借用skyhh同学来讲,是出于weinre被PhoneGap收购,PhoneGap又被Adobe收购,Adobe收购PhoneGap后,把PhoneGap捐给了Apache,Apache把PhoneGap放在Cordova的品种中。Weinre也从初期的Java移植到了眼下的JavaScript。在GitHub上研究weinre的结果中前多个正是官方的Weinre项目。

图片 22

先说第贰个品种,是Apache后来推出的JavaScript版本weinre,供给在nodejs碰着下安装使用,使用npm包管理工科具也得以直接下载安装。安装与服务运行命令如下:

[plain] view plain copy

图片 23在CODE上查看代码片图片 24派生到自身的代码片

npm -g install weinre //安装weinre

weinre --boundHost [hostname | ip address |-all-] --httpPort [port] //启动weinre

机械上有nodejs开辟条件的同桌到此即安顿完结,未有nodejs处境的存在延续往下看。

率先个项目pmuellr/weinre是Java版的,方今项目早已改换来

别的的品种有的是Grunt下的化解方案,感兴趣的可GitHub自行查看。

设置Java版本的weinre须求有Java开拓境况。首先安装JDK,并安装情况变量。新建系统变量JAVA_HOME,设为安装目录D:Program FilesJavajdk1.6.0_43

图片 25

新建/编辑系统变量classpath,设置为.;%JAVA_HOME%lib;(注意前方的点与分号)

图片 26

新建/编辑系统变量Path,设为;%JAVA_HOME%bin;%JAVA_HOME%jrebin

图片 27

然后张开命令提醒符,输入java –version 假使出现版本号,则意味安装配备不错。

图片 28

下一场步向weinre的解压路线,在命令提醒符窗口运营以下命令:

[plain] view plain copy

图片 29在CODE上查看代码片图片 30派生到本身的代码片

java -jar weinre.jar --httpPort 8910--boundHost -all-

图片 31接下来在Safari浏览器地址栏输入 : 显示Weinre的Help--httpPort [portNumber] : 设置Weinre使用的端口号, 暗许是8080--boundHost [hostname| ip address | -all-] : 默许是'localhost', 这一个参数是为了限制可以访谈Weinre Server的配备, 设置为-all-只怕钦定ip, 那么其余设施都得以访谈Weinre Server。--verbose [true | false] : 若是想见到更多的有关Weinre运市价况的输出, 那么能够安装那一个选项为true, 默感到false;--debug [true | false] : 这几个选项与--verbose类似, 会输出更加的多的消息。默以为false。--readTimeout [seconds] : Server发送新闻到Target/Client的晚点时间, 默以为5s。--deathTimeout [seconds] : 默感到3倍的readTimeout, 固然页面超过这一个时辰都未曾其余响应, 那么就能断开连接。更多参数能够访问 OS X系统越发便利,无须命令行,直接运转app就能够运营weinre,后续的步调弄整理windows一样。Debug服务端所在的内网IP地址可以在命令提醒符中输入ipconfig命令查看图片 32

下一场大家使用服务端所在IP地址加端口访谈:

图片 33TargetScript将上航海用体育场面中Target Script部分的js地址参预到你要调整的目标页面内。举例:<script src=";

然后在移动道具展开增添过这一个本子的网页,举例作者的页面放在地面碰着并应用端口8888监听,所以在活动端浏览器必要输入:

。并在桌面情状Safari浏览器张开Debug 顾客端顾客接口。如下图:

图片 34

设若桌面计算机用USB数据线连接了运动器材,但Debug客商端依旧展现为weinre:targetnot connected,如下图所示:

图片 35

那会儿你能够品味以下措施:

  1. 自己探讨是或不是由此USB数据线连接成功。

  2. 自笔者讨论Debug顾客端桌面蒙受是或不是和移动设备处于同一个局域网网段,特别是WiFi形式上网的情状,应当要未焚徙薪Wifi自动连接到另外网络中。

  3. 尝试将Target Script 脚本放在html文件的尾巴。

  4. 检查Debug调节和测验客商端客户接口的Client id是不是与对象页面内target script 中的client id一致。

Target Bookmarklet

应用此办法能够将标签中的代码注入到对象页面代码中。以下是JavaScript代码段:

javascript:(function{e.setAttribute("src",";

该代码段能够透过在手提式有线电话机端浏览器访问对应的url方式获得。比如这里是:

PhoneGapWebApp调试PhoneGap WebApp也正是运作在运动道具Webview之内(Android:webview,iOS:uiwebview)的位移选拔,因而weinre调节和测验只须要在要调整的对象页面中投入weinre脚本代码就可以。别的能够安装使用GapDebug应用,GapDebug是一款跨平台的运动器材调节和测量检验工具,援助拖拽式一键安装,补助重启App后Debug状态复苏,协理断点调节和测验,帮助Windows和Mac OS系统,官方地址

多客户调节和测量检验Debug顾客端顾客接口#号后是一个调护诊治客商端的id,用于在多客户调节和测验时,识别各自分化的调解项目。在同一局域网的网段内,大家能够分享weinre调节和测量检验遭受。有一台Computer作为Debug服务器,别的成员只必要一个和谐的client id就足以在和煦的管理器上上马真机调试了。使用方法同上,这里不再赘言。

Debug顾客端中调养方法

假设调节和测量检验设备连接成功,交易会示如下状态:

图片 36

Elements面板

图片 37

能够修改html和CSS代码,无须刷新页面,就能够在目的设备页面上实时预览效果。

Resources面板

图片 38

包含Databases、Local Storage和Session Storage音讯,若目的页面用到了缓存,则能够在这里看见数据。

Network面板

图片 39

由于weinre是依据XMLHttpRequest进行监听的,所以互连网面板只呈现通过XML HTTPRequest的乞请加载的数据,也正是Ajax情势加载的能源。

Timeline面板

图片 40

Console面板

图片 41

第三方Weinre服务

能力公司能够依照上述手续搭建叁个本地的weinre调节和测量试验景况,供团队内部使用。除了自行建造weinre服务器,也足以应用第三方提供的weinre服务。

时下国外的有PhoneGap提供的weinre远程服务,客户能够访问下述网站参看客商远程调节和测验接口

图片 42办法和下边自行建造weinre服务没什么不一致,这里就十分的少说了。

此外调节和测量检验工具

除了介绍过的Chrome 远程调节和测验工具DevTools、weinre远程调节和测量检验,这段时间的还应该有Adobe公司生产的跨平台调节和测验工具Adobe Edge Inspect CC,以致境内乐乎前端程序员@听奏同学开辟的iOS系统专项使用调节和测量试验工具MIHTool,也是功力很强盛的。这里不一一介绍了。

参照作品:weinre – Running

本文由星彩网app下载发布于前端技术,转载请注明出处:调度情形,移动端Web开辟调节和测量试验之Wein

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。