手机终端网页调试程序使用说明

标签: 手机 终端 网页 | 发表时间:2014-05-17 23:55 | 作者:jm1999
出处:http://www.iteye.com

 

(按照本文最后总结部分所述进行操作可以快速抓住要领,学会使用)

一、调试核心程序weinre简介

Weinre是一种远程调试工具,即可以在电脑上调试手机上的页面。调试界面和webkit内核浏览器(chrome、safari等)调试界面很相似,熟悉webkit内核浏览器的开发人员很容易上手使用。

二、weinre的下载、安装及使用

1、Weinre的下载地址如下:(需要java环境支持)

http://pan.baidu.com/netdisk/singlepublic?fid=902768_1583634639(weinre.jar)

2、下载weinre.jar后,将其放在你自己选择的目录。这里为方便说明,放在D盘根目录下面

3、打开cmd,定位到weinre.jar所在目录,这里是D盘

4、输入java -jar weinre.jar --httpPort 8088 --boundHost -all-返回如下信息,则weinre成功开启

5、打开 http://localhost:8088,则打开weinre主页

6、打开 http://localhost:8088/client/#anonymous则进入调试监控页面,这个页面就是我们需要用到的远程调试页面(熟悉chrome等浏览器的开发人员很容易上手)

至此,weinre部分介绍完毕。更多关于weinre的参考资料如下:

http://www.iinterest.net/2012/02/08/debugging-mobile-web-applications-with-the-weinre/

http://blog.csdn.net/dojotoolkit/article/details/6280924

三、连接weinre入口程序cheat.js介绍

为方便用户使用weinre调试程序,本人制作weinre入口程序cheat.js,方便开发人员进行远程调试。

Cheat.js下载地址:

https://tc-svn.tencent.com/isd/isd_snsapp_rep/web_proj/trunk/build/snsapp/debug/cheat.js(需要svn权限)或者

http://pan.baidu.com/netdisk/singlepublic?fid=903571_3362738424(网盘下载)

 

四、入口程序cheat.js使用说明

1、下载的js文件加载到需要进行远程调试的手机页面。

比如: http://qzs.qq.com/snsapp/app/bee/mobile/index.html?uin=462938286&mod=subscribe该程序需要进行远程调试,则在head头部嵌入cheat.js文件

2、激活远程调试入口界面

激活方式:请在间隔不超过2秒的时间内,分别依次在屏幕上3手指触摸,4手指触摸,5手指触摸

按上述激活方式操作后,可以成功看到如下界面:

 

在输入框输入weinre所在服务器的IP地址即可开启手机页面与weinre的连接。

然后在PC端输入http://[weinre所在服务器的IP地址]:8088/client/#anonymous即可远程调试

五、总结

1、weinre服务成功开启(也就是完成到第二大步,第四小步的工作)

2、cheat.js加载到需要调试的手机页面中

3、在该手机页面中操作激活秘籍(3手触摸,4手触摸,5手触摸)

4、在激活入口页面输入weinre所在服务器的IP地址

5、在PC端输入http://[weinre所在服务器的IP地址]:8088/client/#anonymous

 

 

 

 

 

第二种方法

 一、首先确保你的电脑已经搭建好了java环境。即:安装了jdk。这里就不多说了,在网上搜个jdk,一步步安装及ok。

  二、 安装及运行Weinre

    1、下载: http://ishare.iask.sina.com.cn/f/23607399.html  ,这里直接下载jar包,下载好之后放在一个文件夹里就行不需任何处理。
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

     2、运行cmd,在weinre所在文件夹的 地址栏输入代码:java -jar weinre.jar --httpPort 8081 --boundHost -all-  (如下图):

 

     3、回车后会出现相应信息(注意:在调试过程中不要关闭cmd):

 

     4、打开本地浏览器,(使用webkit内核浏览器(chrome、safari))访问 http://localhost:8081/,不出意外的话可以看到weinre的基本信息。

 

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

 

  三、 添加Debug Target

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

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

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

    添加后在移动设备中访问该页面即可,如果调试的页面比较少可以使用这个方法,如果多的话推荐第二种方法

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

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

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

   四、真机调试。

    1、 移动设备须有有 wifi无线连接,且和电脑在同一网段,(确保本机安装了 服务器,可以到网上搜 xamppwamp,)把要调试的 页面放在服务器中相应的文件夹中,我安装的是xampp,所以放在htdocs目录下。在手机的页面中打开本页面的地址,如:http://192.168.0.102/index.html 。回到http://localhost:8081页面,点击“debug client user interface:”链接进入weinre的Debug界面,如果成功添加了Debug Target,这里可以看到它。

 

  2、接下来我们就可用自己熟悉的方式调试页面了,并且调试结果会实时显示在移动设备上

 

 

MAC 系统更为简单,不用命令行,直接运行app即可启动weinre,接下来的步骤和windows一样。

 

 

 

 

 

 





已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [手机 终端 网页] 推荐:

手机终端网页调试程序使用说明

- - Web前端 - ITeye博客
(按照本文最后总结部分所述进行操作可以快速抓住要领,学会使用). 一、调试核心程序weinre简介. Weinre是一种远程调试工具,即可以在电脑上调试手机上的页面. 调试界面和webkit内核浏览器(chrome、safari等)调试界面很相似,熟悉webkit内核浏览器的开发人员很容易上手使用.

手机超PC成第一大终端

- - 《商业价值》杂志
中国互联网络信息中心(CNNIC)在7月19日发布的《第30次中国互联网络发展状况统计报告》显示,在中国,中国互联网用户实现互联网接入的方式呈现出全新格局,在2012年上半年,通过手机接入互联网的网民数量达到3.88亿,相比台式电脑的3.8亿,手机成为中国互联网用户的第一大上网终端. CNNIC指出,手机上网终端的普及和上网应用的创新,成为了刺激手机上网用户增速回升的重要刺激因素.

通过.htaccess对手机与PC终端分流呈现页面

- - 傻子-王跸西的blog-WangBiXi.com
对于使用手机终端访问PC版页面的,跳转到手机版网页. 对于PC终端访问手机版页面的,跳转到PC版网页. .htaccess文件中内容:. #上面的例子就是如果访问终端为Iphone,则跳转到http://www.yoursite.com/monile/这个页面. #.htaccess对所在文件夹下的页面文件及其子目录下的页面文件皆有效.

“新浪视野”推出网页版,打造基于微博的多终端阅读平台

- - 36氪
HTML5已是一个不可逆转的趋势,虽然App目前仍是主流,但随着移动终端的多元化和复杂化,可兼容手机、平板、电脑、电视以及其他屏幕设备的HTML5浏览器标准将会呈现出巨大的优势. 近日,新浪在发布iPad社会化阅读应用 “新浪视野”之后,转而推出了新浪视野 V1.0.0 Wap版和 V1.0.0 Web版.

近期手机网页项目一些杂碎心得分享

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2576. 其实上上周就可以出此文了,只是,就跟谈恋爱一样的,要讲求时机以及心情. 这会儿,看完了海贼王情报,处理了邮件,文章评论以及部分同行靠谱的提问,加上好几天没有动“笔头子”了,于是,很有兴致,分享些杂碎的知识点.

Medium如何在手机上复制网页版的阅读体验?

- - PingWest中文网
Medium创始人Ev Williams在发布Medium iOS版时,写了一篇题为 <. Welcome to Medium for iPhone> 的文章,讲述他对移动版Medium的想法. 总的来说,Ev Williams表达的是:Medium注重设计,在移动端做Medium所面对的挑战和付出的精力比网页版多,Medium网页版暂时不支持写文章.

Google 计划为发展中国家开发非智能手机版 Gmail 网页应用

- SotongDJ - 谷奥——探寻谷歌的奥秘
Google的Gmail团队通过非洲博客宣布他们目前正在忙于为发展中国家开发非智能手机版 Gmail 网页应用,大多数的发展中国家很少使用智能手机,所以他们无法使用本地应用来访问Gmail邮箱. 但他们的手机也有简单的浏览器,可连接互联网,Google将部署一个非智能手机版的Gmail,通过mail.google.com提供服务.

Google计划为发展中国家开发非智能手机版Gmail网页应用

- xing - cnBeta.COM
Google的Gmail团队通过非洲博客宣布他们目前正在忙于为发展中国家开发非智能手机版 Gmail 网页应用,大多数的发展中国家很少使用智能手机,所以他们无法使用本地应用来访问Gmail邮箱.

Nielsen 报告指出,用户开始拥抱智能手机 App 而摒弃传统 Web 网页服务

- - Engadget 中国版
每到年末的时候,市场分析公司都会发布年终盘点,Nielsen 公司也不例外. 该公司刚刚发布了十大网络web 品牌,十大网络视频品牌和十大智能手机 App,其揭示了一种不断增长的趋势,那就是越来越多的人使用智能手机 App ,而不是基于传统的 Web 服务. 在这份榜单中, Nielsen 公司还指出,和去年同期相比,各个品牌的用户整体使用率已经发生了一些改变,网络品牌全线下跌,在线视频品牌表现的比较平坦,智能手机 App 的使用率则在暴涨.

TermKit: 下一代富终端

- openboy - Wow! Ubuntu
TermKit 是由 Steven Wittens 为 MacOS X 编写的一个很有趣的项目,可以称之为下一代的富媒体终端. 它可以在终端中用图形化元素来显示命令结果,比如图标等等. 现在有人对此项目进行了 fork ,把它移植到了 Ubuntu 平台上,但没有原生程序,只能运行在 Chromium/Chrome 中,有兴趣的话你可以尝试一下.