`

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

 
阅读更多

 

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

一、调试核心程序weinre简介

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

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

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

http://pan.baidu.com/netdisk/singlepublic?fid=902768_1583634639weinre.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即可远程调试

五、总结

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

2cheat.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内核浏览器(chromesafari))访问http://localhost:8081/,不出意外的话可以看到weinre的基本信息。

 

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

 

  三、添加Debug Target

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

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

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

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

    2Target 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:”链接进入weinreDebug界面,如果成功添加了Debug Target,这里可以看到它。

 

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

 

 

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

 

 

 

 

 

 

分享到:
评论

相关推荐

    Android程序设计基础

    3.10 利用日志消息调试程序 48 3.11 利用调试器调试程序 50 3.12 退出游戏 50 3.13 快速阅读指南 50 第4章 绘制2D图形 53 4.1 Android图形基础 53 4.1.1 Color类 53 4.1.2 Paint类 54 4.1.3 Canvas类 55 ...

    手机安装ubuntu 以及搭建web服务器,实现内网传透工具集合.zip

    1. **手机安装Ubuntu**: Termux是一个Android上的终端模拟器和Linux环境应用,它允许用户在手机上运行各种Linux命令行工具。通过Termux,我们可以安装并运行Ubuntu的镜像文件,这为在移动设备上进行Linux操作提供了...

    asp+ACCESS在线考试系统(源代码+设计说明书+).zip

    ASP(Active Server Pages)是一种微软开发的服务器端脚本语言,常用于构建动态网页和Web应用程序。ACCESS则是一款关系型数据库管理系统,适用于小型到中型企业,用于存储和管理数据。结合这两个技术,我们可以构建...

    展讯手机平台软件简介

    - **完整文档**:详尽的文档资料,包括软件平台说明书、API说明、用户手册及培训材料,确保了开发者的易用性和学习效率。 ### 性能与环境要求 展讯手机平台软件的运行对硬件和软件环境有特定要求: - **硬件资源*...

    WAP天气预报小偷 v1.0

    WAP(Wireless Application Protocol)是一种在移动设备上浏览网页的技术,允许用户通过手机等无线终端访问互联网内容。这个程序可能是为那些早期没有智能设备或无法使用传统网络服务的用户设计的。 【描述】提到,...

    Android电脑源码通过adb实现实时屏幕演示

    这通常在“设置”-&gt;“关于手机”-&gt;“软件信息”中找到并连续点击“构建号”七次激活开发者选项,然后在开发者选项中开启USB调试。 3. **授权**:当电脑首次连接设备时,设备上会弹出一个授权提示,点击“确定”以...

    Ubuntu安装scrcpy完成手机投屏和控制(Ubuntu用QQ微信的另一种方法)

    在Ubuntu操作系统中,有时我们需要在电脑上使用手机应用程序,如QQ和微信,但频繁地在键盘和手机之间切换可能会降低工作效率。为了解决这个问题,我们可以利用scrcpy来实现在Ubuntu上进行手机投屏和控制,从而提高...

    科美企业手机电脑建站系统专业版 v5.5

    安装和使用"科美企业手机电脑建站系统专业版 v5.5"时,需要注意避免使用可能影响系统安全性的调试工具,如提到的"aspweb"。这些工具可能会暴露系统的源代码或者漏洞,对网站安全构成威胁。在部署前,应确保服务器...

    天人短文网站系统(带手机版) v3.82

    临时测试网站.exe可能是一个用于本地测试的程序,方便开发者在部署前进行调试。下载说明.htm和天人短文网站系统程序开发说明_必读!.txt则是对软件安装和使用的指导文档,对于初次使用者非常有帮助。 总体而言,...

    七彩影视双端APP源码新版本 支持PC+WAP+APP三端

    1. **多端适配**:源码支持PC(个人电脑)、WAP(移动网页)和APP(移动应用)三种不同的终端,这意味着开发者可以构建一套统一的影视服务,无论用户是在桌面浏览器、手机浏览器还是通过专用的移动应用,都能享受到...

    天人短文网站系统(带手机版) v3.98

    该系统支持Access和MSSQL两种数据库架构,具备多设备兼容性,能够无缝切换于电脑、手机和平板等不同终端,确保用户在各种设备上都能获得良好的浏览体验。 1. ASP(Active Server Pages)技术:ASP是一种由微软公司...

    天人文章管理系统(带手机版) v3.94 GB2312

    "临时测试网站.exe"可能是一个用于本地开发和测试环境的程序,帮助开发者快速预览和调试系统。说明.htm文件通常包含系统的基本操作指南和使用说明,为用户提供参考。最后,favicon.ico是网站的图标文件,会在浏览器...

    小刀娱乐网源码(带手机版) v3.81

    8. `临时测试网站.exe`:这可能是一个用于本地快速搭建测试环境的可执行程序,方便开发者调试源码。 9. `下载说明.htm`:提供了源码的下载和安装指南,帮助用户了解如何正确部署和使用。 10. `天人QQ技术网站系统...

    科美智能企业网站管理系统专业版(带手机版) v4.3

    在安装和使用过程中,需要注意的是,开发者特别提示不要使用一些调试工具如aspweb、NETBOX、小旋风等进行调试。这是因为这些工具可能会导致系统出现异常,甚至存在安全风险。正确的做法应该是按照官方提供的说明文档...

    基于MATLAB_Simulink的PID控制器参数整定.pdf

    响应式网站是一种兼容各种设备屏幕尺寸的网页设计方法,它通过使用流体布局和CSS媒体查询技术,使得网页能够在不同的终端设备(如PC、平板电脑、智能手机等)上都能展现良好的浏览效果。这与MATLAB和Simulink的内容...

    WAP开发教程.rar

    "E书说明.txt"可能是关于如何阅读和使用PDF文件的指南,特别是对于可能不熟悉电子书格式的用户。 总之,WAP开发涉及移动设备的特性、网络条件以及用户体验等多个层面,开发者需要对WAP协议有深入理解,同时掌握适应...

    天人文章管理系统(带手机版) v4.77 GB2312

    1. **多设备兼容**:天人文章管理系统采用响应式设计,能无缝适配电脑、手机和平板等不同设备,用户无论在哪种终端上都能获得一致的浏览体验。后台管理界面同样支持多设备访问,方便管理者随时随地进行内容更新。 2...

Global site tag (gtag.js) - Google Analytics