你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
singsong

Weinre移动端调试利器 2个回复 专栏 @ 框架与库

singsong 发布于 2 年前

author:突然收到div.io社区邀请码,听小伙伴说该社区还不错,就注册了。这是小弟第一次发文章,可能存在诸多不足,也请各位大大多担待,也请告知小弟一下。

weinre 英文全称 WEb Inspector REmote。发音类似于‘winery’。

术语(Terminology)

当我们使用weinre时,会涉及到三个服务协调工作

调试服务器(Debug Server)
这是一个HTTP服务器,你能从weinre-node运行。这个HTTP服务会被Debug Client和Debug Target调用。

调试客户端(Debug Client)
这个是一个Web Inspector用户界面(类似于Firefox's Firebug、chrome's web Isnspector);它包含常用的Elements、Resoureces、Network、TimeLine和Console面板,此外它还有一个Remote面板。

调试目标(Debug Target)
这是你想要进行调试的web页面。这个名字(Debug Target)也用于表示运行调试页面的设备。

其中Debug Client和Debug Target是基于HTTP通过XMLHttpRequest(XHR)与Debug Server进行通信。通常Debug Client和Debug Server运行在桌面上,而Debug Target运行在移动设备中。不过要让Debug Target起作用,需要向调试页面中注入Debug Server提供的JavaScript代码片段。 weinre components

NOTE:Weinre只能在基于Webkit内核的浏览器上工作,所以如果你使用Firefox和IE进行调试,那将不会工作。你可以使用Chrome和Safari来完成调试工作。因此weinre是非常适合用于调试IOS和Android移动设备的web页面和web apps。

安装

weinre是基于node.js实现的应用程序,所以要运行weinre需要下载和安装node运行环境。而weinre的安装可以通过如下两种方式进行安装:

  • npm 安装
    weinre可以作为一个npm package进行安装。并且可以将二进制包*-bin.tar.gz的URLs和文件作为npm install命令的目标参数。在通过npm进行安装时,可指定-g选项实现全局域的安装。对于*ix和MAC,需要通过sudo获取操作权限,对于Windows,AFAIK,不需要sudo。如下实例所示:
sudo npm -g install http://example.com/path/to/apache-cordova-weinre-X.Y.Z-bin.tar.gz

weinre也被部署在https://npmjs.org/package/weinre上,所以也可以通过如下命令安装:

sudo npm -g install weinre


NOTE:通过第二种命令进行安装时,可能会报错,可以通过指定特定安装版本来解决。如:sudo npm -g install weinre@lastest

启动服务

在命令终端总输入如下的命令行可以启动Wernre服务:

weinre [options]

其中options包含字段有:

  • --help(-?/-h)

    显示帮助

  • --httpPort[端口号]

    HTTP服务的端口号
    default:8080

  • --boundHost [主机 | ip地址 | -all-]

    将服务绑定到指定的ip地址上
    default:localhost
    使用默认值,除本机外,其他设备是不能访问到服务的。为了其他设备可以访问服务,需要绑定主机/ip地址。你也可以使用-all-,绑定当前主机上所有有效的接口。

    想要获取你主机的ip地址:

    mac和Linux用户可以通过ifconfig命令获取,对于windows用户可以通过ipconfig获取。

  • --verbose[true | false]

    可让jibberish写入到标准输出流stdout中
    Default:false

  • --debug[true | false]

    可让更多的jibberish写入到标准输出流stdout中
    Default:false

  • --readTimeout[秒(seconds)]

    服务器等待消息成功发送到调试目标或客户端的秒数
    Default:5
    该值可以被设置成很大的数值,但是浏览器可能会超时。最好不要把它设置比默认值还小,因为会导致更多的网络流量产生,如空消息被发送。

  • --deathTimeout[秒(seconds)]

    在调试客户端和目标挂掉之前,等待调试客户端和目标回复的秒数
    Default:3*readTimeout
    通常默认值是最佳的选择。然而,如过你要调试weinre,可以把该值设定大一些。

实例:

$ weinre --boundHost 192.168.1.1 --httpPort 9090

在IP地址为192.168.1.1:9090上启动了一个weinre服务。如果成功启动,此时命令终端会打印类似如下的信息:

2015-09-09T02:46:31.266Z weinre: starting server at http://192.168.1.1:9090

到此为止,只是搭建好调试服务器(Debug Server),接下来会介绍调试目标(Debug Target)的创建。

调试目标

此时你可以通过http://hostname|ip:port(如上:http://192.168.1.1:9090)访问创建好的调试服务器(Debug Server)。不过我们的目的是使用该服务来调试页面,这需要创建调试目标。要创建调试目标可以在你想要调试的页面中添加如下代码:

<script src="http://hostname|ip:port/target/target-script-min.js"></script>

添加位置,一般放置body标签中,当然了也可以添加到head标签中,此时调试目标(Debug target)就创建好了。

调试客户端

当前你可以通过http://hostname|ip:port/client(如上:http://192.168.1.1:9090/client)访问调试客户端了。另外,你也可以直接访问http://hostname|ip:port(如上:http://192.168.1.1:9090)weinre的主页,再从主页访问调试客户端。 调试客户用户界面
使用方法与桌面端的浏览器调试类似(如Firefox's Firebug、chrome's web Isnspector),虽然功能上有所削减。不过已满足移动设备调试需求。另外可以参考Debugging mobile web applications remotely with WEINRE

weinre主页


如图所示,weinre主页共7部分组成:weinre-web inspector remote、Access Points、Target Demos、Target Script、Target Bookmarklet、Development、versions。简单介绍一下其中比较有用的几个部分:

PS:详细介绍可以参考官网

  • Access Points(访问入口):提供了调试客户端(Debug client)和weinre文档的访问链接。
  • Target Demos(调试目标实例):提供了3个实例,如果你没有调试页面,可以使用该实例来了解weinre的特性。
  • Target Script:提供了注入调试页面的脚步链接。
  • Target Bookmarklet:该功能比较有意思,因为该功能可以动态注入target script到任一调试页面中。例如,在你的调试页面中添加如下代码:
<a href='javascript:(function(e){e.setAttribute("src","http://10.129.193.88:9090/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);'>weinre target debug</a>

当单击【weinre target debug】链接时,调试页面会转化成调试目标(Debug Target)。

  • Development:提供了weinre开发接口

参考文献

  • singsong

    靠!不能编辑修改?

    #1
  • berg

    @singsong 可以,见一楼最下方,另外,建议上传个头像,方便给你专栏权限。

    #2
登录后回复,如无账号,请使用邀请码注册