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

转载 2016年08月31日 11:18:08

http://ju.outofmemory.cn/entry/1355

本调试方式需要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 -1.2.14

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

npm install weinre


4、启动weinre服务器

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

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

5、浏览器打开

http://localhost:8080

http://192.168.1.125:8080

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

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

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


'

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

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

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

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

#后面为识别码

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

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

本文出自:http://www.2fz1.com, 原文地址:http://www.2fz1.com/?p=396, 感谢原作者分享。

nodejs使用weinre远程调试手机网页

转自:http://www.2fz1.com/?p=396 使用weinre远程调试手机网页(nodejs、phoneGap) 时间:2013-03-13 作者:Json 文章分类:Nod...
  • xcyuzhen
  • xcyuzhen
  • 2013年12月10日 15:25
  • 946

weinre远程调试工具安装及其使用方法

weinre安装步骤 1 现在下载node.js安装 (装完要重启 不然环境变量不生效) 2 安装weinre cmd打开运行 npm install weinre -g 在mac上需要( s...
  • gdfgdfk
  • gdfgdfk
  • 2015年12月15日 14:25
  • 697

weinre远程调试mobile页面

移动端页面的调试因为没有像firebug 这样的工具,调试起来比在PC更加麻烦一些。 但是借由weinre, 我们也可以像PC端那样,远程调试webapp。 (以下环境均为windows7...
  • spring21st
  • spring21st
  • 2013年05月15日 23:03
  • 5723

调试移动端网页工具Weinre使用整理

一、Weinre 说明 Weinre的本意是Web Inspector Remote,它是一种远程调试工具。功能与Firebug、Webkit inspector类似,可以帮助我们即时更改页面元素、样...
  • u011127019
  • u011127019
  • 2017年02月20日 16:01
  • 1122

移动端Web开发调试之Weinre调试教程

在设计师与前端开发人员的努力下,一个WebApp出炉了,可是测试人员说了一堆的问题:某某机型下页面表现不一致,某某系统下页面如何如何,某某系统浏览器下页面怎么怎么滴。看着满满的测试汇总文档,我们曾经在...
  • freshlover
  • freshlover
  • 2015年01月12日 11:53
  • 38051

nodejs安装weinre 及移动端调试网页

安装nodejs官网下载安装包,安装 cmd检查是否安装成功 安装weinre 安装路径D:\nodejs\node_modules\weinre开启weinre 默认端口 在cmd中执行we...
  • WRian_Ban
  • WRian_Ban
  • 2015年10月08日 15:39
  • 1473

通过node.js 安装phonegap

phonegap 安装环境搭建在网上已经有了很多教程,大部分是通过node.js执行npm install -g phonegap来安装的,但是在执行命令的 时候会报错误: npm ERR! Win...
  • u012251421
  • u012251421
  • 2015年09月20日 21:01
  • 565

Web应用调试:现在是Weinre和JSConsole,最终会是WebKit的远程调试协议

随着智能手机和平板电脑的越来越流行,这对于开发者来说意味着网站需要进行优化,或者适应移动浏览器。但是在移动平台上的调试工具却一直处于功能贫血状态;现代的桌面浏览器装备了功能强大的JavaScript和...
  • cengjingcanghai123
  • cengjingcanghai123
  • 2015年02月12日 11:34
  • 677

( >o< )瞎!你还在用weinre?Browsersync来了!

遇见 Browsersync所有发生了的事情皆是命运啊,曾经偷过的懒占过的便宜,呵呵,都来讨债了。以前用的gulp+weinre是ex配置的,如今各奔东西,如今重装固态硬盘,如今gulp+weinre...
  • WRian_Ban
  • WRian_Ban
  • 2016年04月08日 13:51
  • 1292

webapp开发调试环境--weinre配置

用谷歌调试工具中的手机模拟器模拟手机进行webapp的开发,与真机上的效果还是有些偏差,opera手机模拟器的效果亦不佳。有时在pc上开发出来的webapp效果良好,在部分真机上就出现了偏差,这时候就...
  • Smy_yu
  • Smy_yu
  • 2014年08月29日 12:02
  • 2887
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用weinre远程调试手机网页(nodejs、phoneGap)
举报原因:
原因补充:

(最多只允许输入30个字)