• weinre使用


    2016-1-21 更新说明:

    微信web开发者工具已经集成了weinre,只需设置手机代理便可调试任意页面,更简单更方便,推荐使用!

    Web应用开发者需要针对手机进行界面的调试,但是手机上并没有称心如意的调试工具(如Firebug),调试界面的工作往往事半功倍。本文介绍的调试工具Weinre 就是解决这一问题的优秀调试工具。本文以Windows系统为例:

    为什么使用weinre

    我们在调试web页面时,在PC端我们有Chrome控制台、FireBug这两款优秀的工具,让我们可以查看Elements、Network、Console等项,让本来复杂的前端变得简单而有趣。

    例如,js出问题了,使用Console查看便知;页面css有问题,通过审查元素即可定位元素。

    但是,当我们在移动端测试h5页面,当出现问题,该怎么查看?明明在电脑上访问是正常的,到手机里就不正常了。哪里出问题了?怎么追踪?都是个难题。

    weinre就为我们提供了诸如Elements、Network、Console等功能调试,你在手机上点击的任何一个链接,发出的任何一次请求,weinre都可以捕捉,并以我们熟悉的Console控制台方式显示。甚至,我们在控制台里点击页面的某个标签,在手机都会以选中的形式告知我们,当前这个标签对应的页面的哪一块。

    weinre是什么

    引自网友的一段话:

    Weinre的本意是Web Inspector Remote,它是一种远程调试工具。功能与Firebug、Webkit inspector类似,可以帮助我们即时更改页面元素、样式,调试JS等。

    举个例子,在电脑上可以即时 的更改手机上对应网页的页面元素、样式表,或是查看Javascript变量,同时还可以看到手机上页面的错误和警告信息。

    如何安装

    首先确保你的电脑已经搭建好了java环境。即:安装了jdk。这里不多做说明。

    weinre没有安装包,不会像普通程序那样有界面,他依赖命令行和浏览器。

    weinre本身是个jar包。我们需要下载这个文件:weinre-jar-1.6.1.zip

    由于不大好下载,这里列出下载地址:
    1、weinre unofficial binary packages for your convenience:
    http://people.apache.org/~pmuellr/weinre/builds/1.x/1.6.1/

    2、weinre1.6.1 - 下载频道 - CSDN.NET
    http://download.csdn.net/detail/skyhh/4629366

    下载下来,解压到某个目录,例如D:weinre

    解压后是个weinre.jar文件。

    启动weinre

    命令行下输入:

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

    提示:

    2016-01-21 16:41:27.185:INFO::jetty-7.x.y-SNAPSHOT
    2016-01-21 16:41:27.292:INFO::Started SelectChannelConnector@0.0.0.0:8081
    2016-01-21 16:41:27.293:INFO:weinre:HTTP server started at http://localhost:8081
    

    说明weinre已经在正常运行。httpPort为端口,大家可自行更改。运行weinre.jar后,命令行要一直开着,可以写一个bat文件,需要的时候,执行bat就可以。

    在浏览器(使用webkit内核浏览器,如chrome)输入:http://localhost:8081,即可看到weinre的基本信息。

    上图中的debug client user interface是weinre的Debug客户端,点击进入后可以看到目前还没有被测试的目标网页。

    移动端调试

    为了让需要调试的页面被weinre检测到,需要添加Debug Target,有两种方法:

    1、Target Script

    该方法需要在调试的页面的header标签中增加一个js:

    <script src="http://192.168.36.101:8081/target/target-script-min.js#anonymous" type="text/javascript">
    </script>
    

    添加后在移动设备中访问该页面即可。以上192.168.36.101是你电脑的局域网IP地址。注意替换。

    如果被测试的页面我们无法改变其代码,那么还可以使用下面的第二种方法,添加书签。

    2、Target Bookmarklet
    该方法是将一段js保存到移动设备的书签中,可以在 刚才打开的http://localhost:8081/ 找到这段js:

    javascript:(function(e){e.setAttribute("src","http://192.168.36.101:8081/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);
    

    将这段js保存到名为Debug书签中,然后使用移动设备访问我想要调试的页面,比如说 http://baidu.com,最后点击Debug书签就OK了。

    但是目前手机上好多浏览器已经不支持添加这样格式的书签了,会提示无效。

    出现问题

    目前发现打开debug client user interface页面空白,控制台显示js错误,暂时无解决方案。暂时搁置。推荐使用微信web开发者工具方案代替。

    参考:

    1、Mobile Web调试工具Weinre - 挨踢前端 - 博客园
    http://www.cnblogs.com/duanhuajian/archive/2012/10/28/2743832.html
    2、Web移动应用调试工具——Weinre - Dojo中文博客 - 博客频道 - CSDN.NET
    http://blog.csdn.net/dojotoolkit/article/details/6280924

  • 相关阅读:
    Flexbox
    jquery.cropper 裁剪图片上传
    让Sublime Text3支持Less
    css实现图片垂直居中
    手淘适配-flexible
    CSSREM
    vue.js+boostrap最佳实践
    最好用的技术是最基础的
    响应式网页布局
    php基础入门
  • 原文地址:https://www.cnblogs.com/52fhy/p/5149153.html
Copyright © 2020-2023  润新知