移动端Web开发调试之Weinre调试教程,前端手机调试技巧

创建最舒心的 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逐步被各中等集团冷落,所以跟随公司步伐先河从事前端开发,本文首要计算一下前端开发中各类景况下怎么让页面进入调试意况,各位有宝贵意见希望在夸夸其谈中多么留言。

原稿地址:http://blog.csdn.net/freshlover/article/details/42640253

真机测试

那种状态怎么支付呢?回看一下在先的三种办法 :

  • 真机 + 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(Webkit)的长距离调试工具,借助于互连网,可以在PC上间接调试运行在活动设备上的长途页面,汉语意思是远程Web检查器,有了Weinre,在PC上能够即时修改目标网页的HTML/CSS/JavaScript,调试过程可实时突显移动设备上页面的预览效果,并伙同突显设备页面的荒唐和警告音信,可以查看互联网资源的音信,但是weinre不接济断点调试。该品种近期是
Apache Cordova 的一部分。

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

上线后手机端调试

付出时候可以不管修改本地的代码来每一天查看,借使把代码布到测试环境或者已经上到正式环境想要查看和调剂对应的bug就不那么简单了

weinre工作规律
两张图读懂Weinre的行事体制:

安装监听端口

Proxy SettingsHTTP ProxyProxiesHTTP Proxy 中设置

GapDebug

亚洲必赢官网 6

移动端Web开发调试之Weinre调试教程,前端手机调试技巧。特点

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

借助于少,只需一个Chrome就能采取Safari和Chrome的调剂工具
集合保管,在同个界面突显了iOS设备和Android设备及其调试页
有的实用小功能,如截屏、设备控制、app安装等

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

安卓webview:chrome调试

详细官方文档
缺点:

  • 1、须求手机安装chrome
  • 2、应用程序须要安装允许远程调试(4.4此前的机械不帮忙)

上述三层构造示意图的意思:
Debug客户端(client):本地的WebInspector,远程调试客户端。
Debug服务端(agent):本地的HTTPServer,为Debug目的页面与Debug客户端建立通讯。
Debug目标页面(target):被调剂的页面,页面已放手weinre的长途js。
客户端、目的页面与Debug服务端之间选取XMLHttpRequest
(XHR)进行HTTP通讯,你平凡的行使情况是将Debug客户端与服务端搭建在桌面开发环境,Debug目的页面放在移动设备。
是因为Weinre的debug客户端是按照Web Inspector开发,而Web
Inspector只兼容WebKit主旨的浏览器,所以不得不在Chrome/Safari浏览器打开Weinre客户端进行调试。

监听Chrome

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

亚洲必赢官网 7

在这一个情景格局下,大家就足以抓到在Chrome里的多少了:

亚洲必赢官网 8

只顾:Charles默许是不援救https的,我们接纳 设置Proxy Settings
SSL ,选中 Enable SSL Proxying 。然后在 Locations
里填写要抓包的域名和端口,点击 AddHost填写域名,如 www.baidu.com
port443 。具体参考最终的篇章。

weinre

亚洲必赢官网 9

特点
适用范围广,在调节页面中加载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,进入对应的页面,然后电脑safari的付出菜单中可观看iOS设备浏览的各页面,点击进入调试方式。

缺点:只可以看safari和一些团结开支的webview,其余应用程序调试不了

本身在Chrome
38/39本子测试时打开Debug客户端出现页面白板,原因不详,精通原因的欢迎留言给自家。换为Safari浏览器打开则正常。

监听Genymotion

别忘了,使用Charles的初衷是让大家可以用本地的文本替换线上文件,不用每便修改都要发表。

  1. 在Genymotion中,SettinsNetwork
    (port选9999是因为自身事先在查理中装置的是9999)
    :亚洲必赢官网 10
  2. 在打开的模拟器中,设置WLAN长按2秒修改网络
    代理设置改为手动,主机名为10.0.3.2,端口为9999,和方面一样。
  3. 然后在模拟器中打开webview页面就能够看出所有请求了亚洲必赢官网 11
  4. 右键保存源文件到本地,然后添加一行alert代码
    亚洲必赢官网 12亚洲必赢官网 13
  5. 在呼吁上右键,选用
    Map Local亚洲必赢官网 14
  6. 挑选刚刚修改过的文书
  7. 重新载入页面
    :亚洲必赢官网 15

如此那般,大家运用模拟器+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浏览器调试工具等,由于项目太多,不容许每个浏览器都用然则的方式调试,所以并未去行使


2015-12-17 更新

近来还选拔了 browsersync
,那么些东武安落子试、开发大致不用太爽。在地头开启一个服务器,页面放进去,然后打开模拟器,进入那么些页面,保存文件的时候模拟器自动刷新,而且能直接调用客户端的接口,再也不怕报错了。

只要你说 Gulp 也能自行刷新,那上面的是 Gulp 没有的:你在本机开启 wifi
,然后手机总是,进入页面。那样,你每保存一次文件,手机webview
模拟器 webview
同时自动刷新,而且那七个页面是手拉手的,就是说,你在模拟器上点击那些按钮,手机上卓殊页面也会点击那个按钮。那样您每便测试的时候,电脑旁摆一排测试机,而你也亟需模拟器上点一下,这几个测试机都会自动点一下!
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主页面

亚洲必赢官网 16

在这么些页面有介绍怎么监听自己的页面,还有对应的demo,进入http://192.168.9.124:8081/client/\#anonymous
就足以打开调试页面,若是有监听到页面调用了Targets里面有相应的页面地址,显示藏蓝色的为当下相中页面,就可以实时查看html结构,修改css样式,查看console了。

亚洲必赢官网 17

Tips:好四人不拔取weinre是觉得要求投入指定的js文件相比劳累,但是使用Charles可以简简单单解决这么些难题,把线上的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-bit
Google Chrome 8及以上版本浏览器
Apple Safari 5及以上版本浏览器

至于笔者:risker

亚洲必赢官网 18

二零一四年高校结束学业,现在在香江某网络公司从事前端开发的办事,近七个月紧要做运动web开发。微博粉丝太少,求粉。

个人主页 ·
我的稿子 ·
7 ·
  

亚洲必赢官网 19

Debug目标页面援救的阳台
Android 2.2+系统浏览器
Android 2.2+ 中的phonegap
iOS 4+ 的safari浏览器
BlackBerry v6.x 模拟器
webOS
chrome8+
safari5+

关于Weinre的Java本子下载地址不可能访问的标题,借用skyhh同学来说,是出于weinre被PhoneGap收购,PhoneGap又被Adobe收购,Adobe收购PhoneGap后,把PhoneGap捐给了Apache,Apache把PhoneGap放在Cordova的花色中。Weinre也从最初的Java移植到了当前的JavaScript。在GitHub上寻找weinre的结果中前八个就是合法的Weinre项目。

先说第一个品种,是Apache后来推出的JavaScript版本weinre,必要在nodejs环境下安装使用,使用npm包管理工具也得以直接下载安装。
设置与服务启动命令如下:

[plain] view
plain
copy

亚洲必赢官网 20

在CODE上查看代码片

亚洲必赢官网 21

派生到本人的代码片

npm -g install weinre //安装weinre

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

机器上有nodejs开发条件的同室到此即陈设完结,没有nodejs环境的存续往下看。

首先个门类pmuellr/weinre是Java版的,如今项目曾经转移到http://people.apache.org/~pmuellr/weinre/
进去后找到二进制jar包的非官方打包地址http://people.apache.org/~pmuellr/weinre/builds/
进去后找到1.6.1版本下载解压获得weinre.jar即可使用。
直接贴出1.6.1版本的jar包下载地址:http://people.apache.org/~pmuellr/weinre/builds/1.x/1.6.1/

其他的类型有的是Grunt下的化解方案,感兴趣的可GitHub自行查看。

安装Java版本的weinre须要有Java开发条件。
率先安装JDK,并设置环境变量。
新建系统变量JAVA_HOME,设为安装目录D:\Program
Files\Java\jdk1.6.0_43

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

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

下一场打开命令提醒符,输入java –version
如若出现版本号,则表示安装配置不错。

接下来进入weinre的解压路径,在命令提醒符窗口运行以下命令:

[plain] view
plain
copy

亚洲必赢官网 22

在CODE上查看代码片

亚洲必赢官网 23

派生到我的代码片

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

接下来在Safari浏览器地址栏输入http://localhost:8910/,若打开如下所示页面,则注脚weinre服务启动成功。

表达:weinre默许使用8080端口,服务器主机名默许使用localhost,必要修改可在上述命令中开展设置,比如可以绑定为开销机器的内网IP地址。为了能在地面使用localhost打开,又能在移动装备或当地环境用IP地址打开Weinre调试工具,大家须求设置boundHost为”-all-“,同时要保管调试页面所在设备与近来付出条件(包蕴Debug客户端和Debug服务端)都处在同一网段内。Weinre绑定端口一定不可能与地面环境已监听的端口争辨,确保绑定的是不了了之端口,例如我设置的是8910。
Weinre还提供了下边的开行参数:
–help : 显示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,
要是页面当先这一个时间都没有其他响应, 那么就会断开连接。
越来越多参数可以访问http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html
MAC OS
X系统尤其便捷,无须命令行,直接运行app即可启动weinre,后续的手续和windows相同。
Debug服务端所在的内网IP地址可以在命令提醒符中输入ipconfig命令查看

然后我们采取服务端所在IP地址加端口访问:
例如:http://192.8.104.20:8910/,如下图所示

TargetScript
将上图中Target Script部分的js地址参加到您要调节的靶子页面内。例如:
<script
src=”;

然后在活动装备打开添加过这么些剧本的网页,例如我的页面放在地面环境并采取端口8888监听,所以在活动端浏览器必要输入:

。并在桌面环境Safari浏览器打开Debug 客户端用户接口。如下图:
http://192.8.104.20:8888/newyear2015/crack.html

一经桌面电脑用USB数据线连接了活动装备,但Debug客户端如故显得为weinre:targetnot
connected,如下图所示:

那时你可以尝试以下格局:

  1. 自我批评是还是不是通过USB数据线连接成功(安装驱动)。

  2. 检查Debug客户端桌面环境是不是和运动装备处于同一个局域网网段,越发是WiFi格局上网的状态,一定要防微杜渐Wifi自动连接到任何互联网中。

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

  4. 自我批评Debug调试客户端用户接口的Client id是还是不是与目标页面内target script 中的client id一致。


Target Bookmarklet

使用此方法能够将标签中的代码注入到目的页面代码中。以下是JavaScript代码段:

javascript:(function(e){e.setAttribute(“src”,”http://192.8.104.20::8910/target/target-script-min.js\#anonymous”);document.getElementsByTagName(“body”)[0].appendChild(e);})(document.createElement(“script”));void(0);

该代码段可以通过在小叔子大端浏览器访问对应的url格局得到。例如那里是:
http://192.8.104.20:8910/target/target-script-min.js
然后保留为设备书签中。
而后只要急需调剂页面,打开页面后,点击Debug书签就可以在桌面环境起初调剂了。


PhoneGapWebApp调试
PhoneGap
WebApp也就是运行在运动设备Webview之内(Android:webview,iOS:uiwebview)的位移接纳,由此weinre调试只须求在要调节的对象页面中投入weinre脚本代码即可。
除此以外可以设置使用GapDebug应用,GapDebug是一款跨平台的移动设备调试工具,援救拖拽式一键安装,协助重启App后Debug状态复苏,帮衬断点调试,协助Windows和Mac
OS系统,官方地址
https://www.genuitec.com/products/gapdebug/

多用户调试
Debug客户端用户接口#号后是一个调试客户端的id,用于在多用户调试时,识别各自差别的调节项目。
在同一局域网的网段内,大家可以共享weinre调试环境。有一台总括机作为Debug服务器,其他成员只须要一个投机的client
id就可以在大团结的微机上上马真机调试了。使用方法同上,那里不再赘言。

Debug客户端中调剂方法

若果调试设备连接成功,会突显如下状态:

Elements面板

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

Resources面板

席卷Databases、Local Storage和Session
Storage信息,若目的页面用到了缓存,则可以在此看到数据。

Network面板

是因为weinre是依照XMLHttpRequest举办监听的,所以互联网面板只浮现通过XML
HTTPRequest的哀求加载的数量,也就是Ajax格局加载的资源。

Timeline面板

Console面板

第三方Weinre服务

技巧公司可以按照上述手续搭建一个当地的weinre调试环境,供团队内部选拔。除了自建weinre服务器,也足以运用第三方提供的weinre服务。

脚下海外的有PhoneGap提供的weinre远程服务,用户能够访问下述网址参看用户远程调试接口
http://debug.build.phonegap.com/

艺术和下面自建weinre服务没什么不一样,那里就不多说了。

其他调试工具

除了介绍过的Chrome
远程调试工具DevTools、weinre远程调试,近年来的还有Adobe公司生产的跨平台调试工具Adobe
Edge Inspect
CC,以及国内天涯论坛前端工程师@听奏同学开发的iOS系统专用调试工具MIHTool,也是职能很有力的。那里不一一介绍了。

参考文章:
weinre – Running
http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html

相关文章

网站地图xml地图