在本地调试移动设备上的页面——神器weinre介绍
来源:互联网 发布:windows下安装ipython 编辑:程序博客网 时间:2024/05/02 12:11
转:http://www.cnblogs.com/lvdabao/p/3436620.html
平时写代码,最喜欢用chrome的developer Tool调试页面了,基本是离不了的工具。但是当页面需要在移动设备上使用,尤其是被嵌入到Hybird APP中时,由于移动版的chrome没有developer Tool,只能傻傻的用alert来输出一些调试信息,修改了CSS样式也必须不断的刷新,文件多了有时候还得经常清缓存,效率极其低下。神啊,救救我吧!
于是weinre出现了!它是一个基于nodejs的工具。可以把远程的页面运行情况映射到本地,在本地的浏览器中查看调试信息,修改的css样式也可以实时同步到远程页面上,欧耶!话不多说,赶快看看如何使用吧~
安装
对于习惯在windows下开发的程序猿,看到nodejs总有一种隔海相望的感觉,但现在nodejs在windows下的支持已经比较完善了。我就是在win7下顺利配置好该环境。
1. 首先保证你安装了nodejs环境,如果没有,先去官网下载安装。
2. nodejs v0.10已经集成了npm,所以可以直接使用npm安装,在cmd中敲:npm install weinre -g。
3. 安装完成后,你会在目录C:\Users\Administrator\AppData\Roaming\npm\node_modules下看到weinre,这便是它的主目录了。
4. 在cmd中运行weinre –httpPort 8080 –all,然后打开浏览器访问127.0.0.1:8080,如果出现如下页面,就说明安装成功
使用
在使用之前我们需要明白weinre中都有哪些角色:
目标页面——我们真正要调试的页面,也就是要运行在移动设备上的页面
调试端——我们的本地浏览器,在这里对目标页面进行调试
服务器——监控目标页面和调试端的动作,向两端推送消息
首先,weinre已经包含了一个http服务器,它的根目录就是C:\Users\Administrator\AppData\Roaming\npm\node_modules\weinre\web。该目录下放置目标页面和调试端页面。
为了组织好你的目标页面,可以在当前目录下新建一个文件夹,如www。
该目录下client即为调试端。
使用weinre命令可以启动服务器,具体的选项可以参考官网http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html,挺简单,一般使用weinre –httpPort 8080 –boundHost -all- 就可以了。
服务器启动后,在本地浏览器地址栏访问http://127.0.0.1:8080/client/即可打开调试端,界面如下:
相信你不会陌生~ Targets即显示当前映射的远程页面,下面该把远程端运行起来了。
在用移动设备访问你的目标页面前,还有一件事要做。在web/target下,有一个target-script-min.js文件,讲它引入你的目标页面头部,像这样:
- 在本地调试移动设备上的页面——神器weinre介绍
- 在本地调试移动设备上的页面——神器weinre介绍
- 在本地调试移动设备上的页面——神器weinre介绍
- weinre 桌面调试web移动端神器
- 使用weinre调试移动端web页面
- 使用weinre调试移动端页面
- 移动端开发调试工具神器--Weinre使用方法
- 使用weinre在PC端同步远程调试移动端页面(在xampp上部署项目到Tomcat,并通过外网访问(图解). )
- Web移动应用调试工具——Weinre
- Web移动应用调试工具——Weinre
- Web移动应用调试工具——Weinre
- Web移动应用调试工具——Weinre
- weinre 移动项目的远程调试
- 如何在移动设备上调试html5开发的网页
- 如何在移动设备上调试html5开发的网页
- 如何在移动设备上调试html5开发的网页
- 如何在移动设备上调试html5开发的网页
- 修正页面在移动设备上的显示
- thrift C++做server, C++,python, java做Client例子
- 处理 JADE Script 内嵌问题
- UVa #658 It's not a Bug, it's a Feature! (例题11-6)
- linux中断系统的一些研究
- 百度地图集成
- 在本地调试移动设备上的页面——神器weinre介绍
- 作业1
- alias rewrite 后出现404,应设置RewriteBase参数
- Arcgis Server for JavaScript API之自定义InfoWindow
- iOS开发网络数据之AFNetworking使用
- java 设计模式 (1) 工厂方法模式(Factory Method)
- APACHE No input file specified. 完美解决方案
- 新浪微博
- python datetime处理时间