使用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
使用weinre通过PC浏览器调试手机网页的更多相关文章
- 用PC浏览器模拟手机浏览器(一):无扩展版
想浏览手机版,打开对应网址却跳转到PC版?怎么办? 下面咱们来说下在只是安装了浏览器,无需其他安装操作的情况下来怎么用PC浏览器模拟手机浏览器,然后访问手机站点. 浏览器众多,IE系列的咱就不考虑了, ...
- 怎样判断当前浏览器是PC浏览器还是手机浏览器
可以通过检测navigator.userAgent字段中是否有"mobi"字段来检测是PC浏览器还是手机浏览器: /mobi/i.test(window.navigator.use ...
- 通过chrome浏览器调试手机页面(IOS和Android)
开发PC页面的时候使用chrome浏览器的开发者工具,可以很容易的捕获到页面的dom元素,并且可以修改样式,方便调试,但是手机上却很麻烦,因为手机上没有办法直接打开开发者工具查看元素.其实可以通过将设 ...
- 利用chorme调试手机网页
太方便了,很实用的技巧(特意记录一下) 1.pc端安装最新的chrome 2.手机端安装最新的chrome ( Android机 ) 3.USB连接线 4.打开电脑的chrome 在地址栏输入 chr ...
- 安装weinre在PC端调试移动端
1.使用node安装weinre. 2.启动weinre, weinre --httpPort 8081 --boundHost -all- 3.在浏览器打开 http://localhost:80 ...
- 用pc浏览器打开手机页面
原理是仿造http包头,下面已chrome为例. 方法:运行->输入如下手机操作系统对应的代码即可. 安卓: chrome.exe --user-agent="Mozilla/5.0 ...
- 判断pc浏览器和手机浏览器方法
一 //平台.设备和操作系统 var system = { win: false, mac: false, xll: f ...
- 利用chrome调试手机网页
1.pc端安装最新的chrome 2.手机端安装最新的chrome ( Android机 )ms不需要 3.USB连接线 4.打开电脑的chrome 在地址栏输入 chrome://inspect
- 使用chrome浏览器调试移动端网页(非模拟访问)
1. 使用数据线连接手机与电脑 2. 打开手机调试模式 参考:http://jingyan.baidu.com/article/f79b7cb35ada4d9145023e63.html 本人使用的m ...
随机推荐
- 字符编码的故事(ASCII,ANSI,Unicode,Utf-8区别)转载
http://www.imkevinyang.com/2009/02/字符编解码的故事(ascii,ansi,unicode,utf-8区别).html 很久很久以前,有一群人,他们决定用8个可以开合 ...
- php中body下出现莫名空白字符
php中body下出现莫名空白字符,出现原因 1. 模板前面有莫名格式空格,删不掉,必须把模板里面东西复制出来,新建一个文件弄进去,覆盖原有的 2.docutype前面出现代码,也会导致此问题(有可能 ...
- 浅谈ASP脚本的解释
10多年前,ASP的出现使全世界的WEB设计者摆脱了C/C++的繁杂,大幅提升了页面的开发效率 然而一直到数年之后,asp的解释一直握在微软手里,后来阿帕奇也支持asp了,虽然没有IIS那么强大,但是 ...
- Spring JTA multiple resource transactions in Tomcat with Atomikos example--转载
原文地址:http://www.javacodegeeks.com/2013/07/spring-jta-multiple-resource-transactions-in-tomcat-with-a ...
- WIndows 7 与 Debian 7 双系统启动引导
以前写有一篇文章是Windows XP下引导Linux的(http://www.cnblogs.com/ibgo/archive/2012/05/20/2510736.html),采用的是grub4d ...
- Android 自学之星级评分条RatingBar
星级评分条(RatingBar)与拖动条十分相似,他们还有共同的父类AbsSeekBar.实际上星级评分条和拖动条的用法和功能都十分的接近:他们都允许用户通过拖动来改变进度.RatingBar与See ...
- xsl输出html代码 非闭合
``` </div> <div class="row-fluid"> ···
- BIO与NIO、AIO的区别
IO的方式通常分为几种,同步阻塞的BIO.同步非阻塞的NIO.异步非阻塞的AIO. 一.BIO 在JDK1.4出来之前,我们建立网络连接的时候采用BIO模式,需要先在服务端启动一个Serve ...
- 【转】Android自动化测试之MonkeyRunner录制和回放脚本(四)
测试脚本录制: 方案一: 我们先看看以下monkeyrecoder.py脚本: #Usage: monkeyrunner recorder.py #recorder.py http://mirror ...
- swift基本运算符
一.空合运算符(Nil Coalescing Operator) 形式:a??b,如果a包含值则解封,否则返回默认值b 条件:a必须为optional类型,这个就不多说了,就是可选类型:默认值b的类型 ...

