使用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和npm是否安装成功。默认windows最新安装包,会包含npm,如果npm没有安装,请手动安装。

C:\Users\jason>f:
F:\>cd nodejs
F:\nodejs>node -v
v0.10.0
F:\nodejs>npm -v
1.2.14

3、使用npm安装weinre,在node.js安装目录输入以下命令

npm install weinre

4、启动weinre服务器

node.exe node_modules\weinre\weinre --boundHost -all-

在windows下,系统防火墙可能会弹出是否允许其访问网络的提示,点击充许即可。

5、浏览器打开

http://localhost:8080

如果访问正常,说明服务器已配置成功。

(二)、直接使用phoneGap的调试服务器
如果觉得服务器配置麻烦,也可以使用phoneGap现成的调试服务器。
phoneGap调试服务器地址:http://debug.phonegap.com/(相当于本机安装的http://localhost:8080)

二、weinre使用方法
1、需调试的页面加入JS脚本
如:

<script src="http://你的调试服务器/target/target-script-min.js#anonymous"></script>

1.1使用收获夹快速添加调试脚本到需要调试的页面。
将以下代码添加到书签,访问需要调试的页面时,访问一下书签,即可以通过JS将调试脚本添加到当前页面,但部份浏览器不支持!

javascript:(function(e){e.setAttribute("src","http://你的调试服务器地址/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);

2、在PC端使用webkit浏览器打开控制台

http://10.18.252.111:8080/client/#anonymous

#后面为识别码

tips:识别码仅仅是为了识别多个需调试的项目时使用,可供多用户操作。

在控制台,你就可以轻松的调试手机网页了!

时间: 2024-10-28 14:08:52

使用weinre远程调试手机网页(nodejs、phoneGap)的相关文章

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

Weinre是什么? Weinre代表Web Inspector Remote,是一种远程调试工具.举个例子,在电脑上可以即时的更改手机上对应网页的页面元素.样式表, 或是查看Javascript变量,同时还可以看到手机上页面的错误和警告信息. Weinre作为一种远程调试工具,在结构上分为三层: 目标页面(target):被调试的页面,页面已嵌入weinre的远程js,下文会介绍: Debug客户端(client):本地的Web Inspector调试客户端: Debug服务端(agent):

使用weinre远程调试网页

1 下载nodejs并解压至 nodejsproject/ http://nodejs.org/download/ 2 安装weinre     ./nodejsprojectbin/bin/npm install weinre       #使用nodejs提供的npm 否则会出错 3 启动weinre    ./nodejsproject/node_modules/weinre [someoption]        options:        --httpPort     port t

UC 浏览器远程调试手机web网页记录

浏览器远程调试插件有很多,本来要使用chrome浏览器的调试插件的,但是需要FQ才能使用(公司网络有限制,果断放弃),最终选择使用UC浏览器的. 其实UC官网插件使用已经介绍的很详细了,但是有几处坑需要注意一下额! 参考进行配置UC远程调试:http://plus.uc.cn/document/webapp/doc5.html 1,如下图,如果是win64位系统,应该解压到C:\Windows\SysWOW64目录下 2,如下图,安装adb成功后,执行以下命令进行映射端口时,命令之间有空格,可以

使用weinre远程调试

1.调试环境: 1)使用nodejs搭建调试服务器: 先安装node,然后使用npm安装weinre,在node.js安装目录输入以下命令 npm install weinre 2)需要wifi环境和webkit浏览器. 2.远程调试: 1)启动weinre服务器 d: //在命令行中进入d盘 cd Nodejs //进入Nodejs安装目录 此处是d:/Nodejs node.exe node_modules\weinre\weinre --boundHost -all- //启动weinre

weinre远程调试

一: 关于weinre weinre是一款依赖于nodejs的远程调试工具,现阶段一般用到手机app上调试非常的强大 二: weinre的安装 1)  安装 nodejs以及npm 2) 安装weinre npm -g install weinre 三: weinre使用例子 1) 打开命令行,输入: weinre --boundHost[IP_address] --httpPort[port] (IP_address 是pc的ip地址, 不能是127.0.0.1,port可以输入一个随便的端口

Android开发系列10 Cordova架构学习 Weinre远程调试技术

手机上的页面不像桌面开发这么方便调试.可以使用Weinre进行远程调试以方便开发.本文介绍windows下的安装与使用. 安装 使用npm安装,可以运行: npm install -g weinre 安装完路径可能是这样的: 输入命令 weinre 即可启动. 使用浏览器打开网址: http://localhost:8080 推荐使用Chrome. 如果有防火墙,要注意需要允许8080端口数据通行. 现在可以连接Cordova程序进行调试了.把下面代码放到index.html里. <script

利用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调试手机页面)

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

利用firefox远程调试手机页面

在pc端的Firefox中添加插件ADB Helper https://github.com/mozilla/adbhelper 手机用数据线与pc连接 点击“地球” 选择自己的设备这时会请求手机需要手机同意远程 选择自己要查看的目的页面