使用weinre通过PC浏览器调试手机网页

Weinre是什么?

Weinre代表Web Inspector Remote,是一种远程调试工具。举个例子,在电脑上可以即时的更改手机上对应网页的页面元素、样式表,
或是查看Javascript变量,同时还可以看到手机上页面的错误和警告信息. 

Weinre作为一种远程调试工具,在结构上分为三层:

目标页面(target):被调试的页面,页面已嵌入weinre的远程js,下文会介绍;
Debug客户端(client):本地的Web Inspector调试客户端;
Debug服务端(agent):一个HTTP Server,为目标页面与Debug客户端建立通信。

使用方法:

(一)、nodejs搭建调试服务器(以windows为例)
	1、安装node.js
	安装程序下载:http://nodejs.org/#download
	安装完毕后随便打开一个cmd窗口
	运行 node -v
	结果:v0.10.32
	运行 npm -v
	结果:v0.10.32
	说明计算机有了nodejs环境和npm包管理器,满足安装weinre要求了。
(二)、安装weinre
    cmd 窗口运行
    npm install -g weinre
	安装完毕后:    

(三)、使用Weinre进行远程调试
	a.
	启动weinre服务器
	weinre --httpPort 8081 --boundHost 10.12.12.213
	或者
	weinre --boundHost -all-
	或者
	weinre --boundHost  10.12.12.213

	b.
	运行成功后:
	输入显示:2015-03-11T05:39:07.109Z weinre: starting server at http://10.12.12.213:8081
	访问页面:
	http://10.12.12.213:8081/
	如图:
	
	把下面这个js引入到要调试的页面里面
	http://10.12.12.213:8081/target/target-script-min.js#anonymous
	Example:
	<script src="http://10.12.12.213:8081/target/target-script-min.js#anonymous"></script>
	用手机打开你的页面后
	就可以通过PC浏览器(WebKit内核)打开 Weinre Debug 客户端在控制台调试页面了。
	http://10.12.12.213:8081/client/#anonymous

(四)、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, 如果页面超过这个时间都没有任何响应, 那么就会断开连接。
	这些配置也可以在 Weinre 根目录下创建 server.properties 文件配置,内容如下所示:

	httpPort:		8081
	boundHost:		-all-
	httpPort:		8081
	reuseAddr:		true
	readTimeout:		1
	deathTimeout:		5
时间: 2024-12-07 20:11:59

使用weinre通过PC浏览器调试手机网页的相关文章

使用weinre远程调试手机网页(nodejs、phoneGap)

本调试方式需要wifi环境和webkit浏览器. weiner主页:http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html 一.配置调试服务器 (一).nodejs搭建调试服务器(以windows为例)1.安装node.js安装程序下载:http://nodejs.org/#download本文安装在“F:/nodejs/”目录. 2.测试安装是否成功打开CMD,切换到nodejs所在的安装目录.输入如下命令测试node.js

用PC浏览器模拟手机浏览器(一):无扩展版

想浏览手机版,打开对应网址却跳转到PC版?怎么办? 下面咱们来说下在只是安装了浏览器,无需其他安装操作的情况下来怎么用PC浏览器模拟手机浏览器,然后访问手机站点. 浏览器众多,IE系列的咱就不考虑了,相信你也不用他浏览手机站点,否侧太没品位了,那咱今天就说说其他的:Chrome和Safari两个浏览器,在无任何扩展的情况下怎么来模拟手机浏览器. 其实,还是如前言里说的,就是修改浏览器的User Agent,来让那些以User Agent为判断标准的站点认为你当前的浏览器为手机浏览器,从而呈现手机

通过chrome浏览器调试手机页面(IOS和Android)

开发PC页面的时候使用chrome浏览器的开发者工具,可以很容易的捕获到页面的dom元素,并且可以修改样式,方便调试,但是手机上却很麻烦,因为手机上没有办法直接打开开发者工具查看元素.其实可以通过将设备连接到PC,使用PC的开发者工具检测 一.针对android设备 1.在android设备上开始开发者模式 2.将设备连接到PC,在chrome浏览器地址栏输入:chrome://inspect/#devices 3.在手机上打开网页的时候,chrome就会检测到网页,可以直接调试 二.针对IOS

利用chorme调试手机网页

太方便了,很实用的技巧(特意记录一下) 1.pc端安装最新的chrome 2.手机端安装最新的chrome ( Android机 ) 3.USB连接线 4.打开电脑的chrome 在地址栏输入 chrome://inspect 选中 Discover USB devices 可以检测到你的设备 可以看到监测到我的设备是C6603 #YT9108PMBJ 5.打开手机上的chrome,访问你需要调试的网站:这时pc上的chorme会出现你访问的网址的记录,如下图 6.点击上图访问链接下面的insp

安装weinre在PC端调试移动端

1.使用node安装weinre. 2.启动weinre, 1 weinre 3.在浏览器打开 http://localhost:8080 显示页面:把Target Script的JS放到页面上面.

清除pc浏览器访问手机版造成pc会员中心跳转手机版错误-destoon技巧

最近研究destoon,从电脑端访问手机端会造成pc会员中心跳转手机版错误,在一步一步查看源代码内核,才发现问题,所以分享给大家! 加入网站首页 index.php  然后访问你的  网址/index.php    set_cookie('mobile', ' ', $DT_TIME + 30*86400);       如果要去掉pc端用模拟器访问手机端造成pc端会员中心不能访问的设置    可以打开 mobile/common.inc.php  找到以下:    if($_mobile ==

JS判断是PC浏览器还是手机设备浏览器

<script> $(function () { var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsMidp = sUserAgent.match(/midp

Weinre(pc调试手机页面)

Weinre是一款基于Web Inspector(Webkit)的远程调试工具,借助于网络,可以在PC上直接调试运行在移动设备上的远程页面,中文意思是远程Web检查器,有了Weinre,在PC上可以即时修改目标网页的HTML/CSS/Javascript,调试过程可实时显示移动设备上页面的预览效果,并同步显示设备页面的错误和警告信息,可以查看网络资源的信息,不过weinre不支持断点调试.该项目目前是 Apache Cordova 的一部分. Weinre系统支持性 iOS 3.1.3或更低版本

电脑连接并调试手机浏览器的网页

直接在浏览器上 用浏览器的手机模式 模拟手机环境有时候不是太准确,所以想办法 实现在手机上能连接,并调试手机正在访问的网页,文本给出了解决方法(没有苹果手机,所以只做了安卓的) 下图就是电脑上连接好的效果: 需要做一下步骤 一, 手机端的准备: 1.usb数据线,第一次连接电脑跟手机 可能还需要装驱动: 2.打开开发者模式,打开选择USB配置,设置成USB连接(一定注意),具体手机连接可以不太一样 ,但是都需要设置成usb连接方式 3,下载手机版谷歌浏览器,调试的时候 用的是谷歌浏览器 二,电脑