远程实时调试手机上的Web页面

1. 安装
    需要Node.js平台, 先安装好后, 打开Node.js command prompt, 通过NPM来安装 weinre


npm -g install weinre

2. 启动
    安装完成后, 我们接着启动 weinre


weinre -httpPort 8081 -boundHost -all-

能打开这个地址就说明weinre启动成功了

可以配置 .weinre/server.properties 让启动 weinre 变得更方便, 具体方法请参考官网, 配置好后, 以后想启动 weinre, 直接运行weinre命令即可, 无需每次都追加那些参数了.

3. Instrumenting your web page to act as a debug target
    将如下脚本追加到你将要调试的页面上
    <script src="http://你的IP地址:8081/target/target-script-min.js#anonymous"></script>

4. 折腾这么久, 快点让我远程调试吧
    在手机上打开要调试页面的地址

 

在 weinre Access Points 中开始远程调试


点击anonymous Access Points

点击一下激活target

终于可以调试了! 接下来随便怎么玩都可以了, 大家应该都很熟练了吧...

以上为http://www.douban.com/note/289846168/

测试过程中发现的问题及解决:

1 .ipconfig看ip:10.62.0.173

cmd下输入:weinre --httpPort 8080 --boundHost 10.62.0.173

手机访问:http://10.62.0.173:8080/www/2.html
电脑也访问:http://10.62.0.173:8080/www/2.html
[注意:若是使用无线则需要是同一个热点。。手机和电脑都访问同一个网址。。](www是我建立的目录:C:\Users\lenovo\AppData\Roaming\npm\node_modules\weinre\web\www)

这只是手机访问电脑ip的网址而已。。并没有将手机和电脑连接到一起调试,一开始以为这就行了,后来才发现是错的。

2. 若:cmd下输入:weinre --httpPort 8080 --boundHost -all- [8080为端口号。。]
    【注意:若为weinre --httpPort 8080 --boundHost all,则报错weinre: unable to resolve boundHost address:all】

则电脑直接访问 http://127.0.0.1:8080/client/
访问文件:http://127.0.0.1:8080/www/2.html
(本地路径:C:\Users\lenovo\AppData\Roaming\npm\node_modules\weinre\web\www)

3.测试是否成功。。

访问:http://localhost:8080/client/#anonymous
然后顶部有一个:Targets:

若后面为none之类的信息代表没有完成。。。

a.手机访问(注意是谷歌或safari浏览器才可以):10.62.0.172:8081/www/1.html      (我的ip10.62.0.172:8081)

b.电脑访问:http://localhost:8080/client/#anonymous。。出现类似

10.200.108.11 [channel: t-5 id: anonymous] - http://10.62.0.173:8081/www/1.html

代表已经手机和电脑连上去了,主要:上面的文字颜色是蓝色,还需要鼠标点击一下,使其变成绿色,才代表可以最终调试手机上的页面。

c.变成绿色后,则点击elements选项卡,就会出现当前页面的html结构,进行调试。。console中输入alert(‘123‘),手机上马上出现结果。。

1.html内容:

<!doctype html>
<html>
<head>
<script src="http://10.62.0.173:8080/target/target-script-min.js#anonymous"></script>
<script src="../target/target-script-min.js" /></script>
</head>
<body>
<style>
body{background:#ff7300}
h3{font-size:50px;padding:100px;}
</style>
<h3>测试内容。。。。。</h3>
</body>
</html>

补:有时会失败,即target下为none。

cmd下重新输入命令,然后访问http://localhost:8080/,继续:debug client user interface: http://localhost:8080/client/#anonymous
。。最终10.200.108.11 [channel: t-7 id: anonymous] - http://10.62.0.173:8080/www/1.html 方可。。。

时间: 2024-11-07 07:24:00

远程实时调试手机上的Web页面的相关文章

weinre 实时调试手机上的Web页面

H5页面,一般用谷歌浏览器的模拟器调试页面.但一旦个别机型有bug,在谷歌又显示不出来. 所以就得用weinre 这个工具来调试了. weinre工具强大功能:在有bug的机型打开页面,用这个工具,可以快速定位bug,并找出解决方法. 换句话说,当你用手机打开页面,电脑的鼠标放在代码上,手机能够显示出这个代码对应的哪个模块.可以实时修改样式. 开始: 首先,得在node.js   和 npm环境下才可以使用....没有的话可以百度下怎么安装.安装全局就可以. 其次: 1.npm -g insta

Android设备上i-jetty环境的搭建-手机上的web服务器

本文主要跟大家分享如何将一台Android设备打造成一个web服务器使用. 编译i-jetty 1.将源码download下来,http://code.google.com/p/i-jetty/downloads/list 2.解压文件,进入pom.xml所在目录,执行命令:mvncleaninstall,参照(http://code.google.com/p/i-jetty/wiki/BuildInstructions) 执行过程中,出现了异常导致失败,是生成classes.dex时内存溢出的

iOS之safari调试iOS app web页面

Overview 当下移动端开发过程中大量使用前段H5.js等等技术,而这些web页面的调试在Xcode控制台中不太明了,经常我们移动app运行了就是方法,但是不能显示响应的效果,这时候或许就是已经报错了,但是我们在Xcode控制台是看不到这些错误.这时候我们就可以用功能强大的Safari浏览器来开启开发模式连接iPhone来调试app脸面的web页面了. Safari设置 打开Safari偏好者设置,选中"高级菜单",在页面最下方看到"在菜单中显示开发菜单"的复选

手机端web页面的一些注意事项

1.viewport的写法 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> 宽度设为设备宽度(手机屏幕宽度),默认缩放比例设为不缩放,用户是否可手动缩放设为“否” 2.device-width具体是什么呢? 第一代iphone的时候,分辨率为320*480,屏幕尺寸为3.5寸(注意,这个3.5寸说的

用Chrome devTools 调试Android手机app中的web页面。

(1) 手机要满足Android系统为4.4或更高版本,低版本不支持这种方式.(2) 确保App已经开启了webview的debug调试模式,由Android工程师协助.(2) 用usb数据线连接好手机与电脑.(3) 将手机中的 设置 - 开发人员工具 - USB调试功能打开.(4) 打开chrome://inspect/#devices,即单击chrome右上角控制按钮 - 更多工具 - 检查设备 - 勾选上 Discover USB devices(5) 在app中访问一个web页面,对应的

idea导入maven项目,web browser远程单步调试

问题:之前用idea14.1.3导入maven项目后,maven的dependencies不能自动解决依赖,到处都是红色的红线,看着就受不了.虽然不影响命令行编译,但是看着实在是不爽.总结下面几小步: 一.导入maven项目 1) 2) 然后下一步下一步默认设置完成导入,这个时候可以右击pom.xml文件reimport运气好一次导入成功那就没什么问题了,如果导入之后还是一片红不能自动解决依赖,那么请做下面的设置. 检查是否有maven插件,有的话进行下面的设置: 至此简单的设置已经结束,设置完

safari 调试iPhone web页面

safari设置-打开Safari偏好者设置,选中"高级菜单",在页面最下方看到"在菜单中显示开发菜单"的复选框,在复选框内打钩,这样设置完毕就能在Safari菜单中看到开发菜单了 iPhone 设置-打开iPhone手机设置app 选择Safari,找到高级选项,有JavaScript开关web检查器开关,讲两个开关都打开 iPhone接上mac上,打开Safari浏览器,运行手机app里面的web页面,在开发菜单中选择连接的手机,找到调试的网页,就能在Safar

python解析远程web页面的代码

把写代码过程中经常用到的一些代码段珍藏起来,下面的代码段是关于python解析远程web页面的代码. import htmllib, urllib, formatter, sys def parse(url, formatter): f = urllib.urlopen(url) data = f.read() f.close() p = htmllib.HTMLParser(formatter) p.feed(data) p.close() fmt = formatter.AbstractFo

Chrome远程调试手机端UC浏览器

今天在手机UC上发现我的一个网页打不开,而在PC上是正常的,因此需要通过Chrome远程调试手机端UC浏览器查下问题,折腾了老久才弄好. 获取 Google USB 驱动程序 首先将手机通过USB接口与PC连接 接着要确认手机USB驱动程序是不是正常,可以在设备管理器中查看,如果设备左侧没有黄色感叹号,则说明正常. 如果不正常就需要手动安装了,给个链接:获取 Google USB 驱动程序 开发者选项 打开手机的开发者选项 进入手机中 我的设备 -> 全部参数,连续7次点击版本号,以Redmi