在本地调试移动设备上的页面——神器weinre介绍

　　平时写代码，最喜欢用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文件，讲它引入你的目标页面头部，像这样：

<script src="../target/target-script-min.js" /></script>

　　好了，能够用你的ipad来访问目标页面了，当链接到服务器以后，你会看到调试端有变化了：

　　Targets下显示出了映射到的页面，绿绿的。而后能够点击你熟悉的标签来进行调试了~

要啥自行车？

　　细细一看，不对呀？少了Sources一项，我要打断点怎么办？这功能目前还真没有，让咱们期待它的出现吧。。。