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

weinre安装步骤

1 现在下载node.js安装 (装完要重启 不然环境变量不生效)
2 安装weinre cmd打开运行 npm install weinre -g 在mac上需要( sudo npm install weinre -g 不然会提示没有权限创建文件夹）才能安装成功

3 启动weinre

如果在windows平台上没加任何配置，WIN7下 weinre会安装在 C:\Users\Administrator\AppData\Roaming\npm\node_modules\weinre\weinre，

MAC 会再node /usr/local/lib/node_modules/weinre/weinre –boundHost -all- –httpPort 8082

这个路径自己电脑找不到的话看环境变量 path  npm文件夹的路径
注意路径(文件夹名字)不能空格！！！比方说C:\Documents and Settings
然后启动server:

打开cmd命令行工具，输入：(path-to-weinre-node 换成你的路径)
node path-to-weinre-node/weinre –boundHost -all- –httpPort 8082

成功应该是下面结果

如果不行可以看看端口8082是否开启  netstat

如果运行成功 http://localhost:8082/client/#anonymous这个地址应该能打开

三：weinre的使用例子

步骤一：打开命令行，输入：weinre --boundHost [IP_address] --httpPort [port] (IP_address 是pc的ip地址, 不能是127.0.0.1，port可以输入一个随便的端口)

假设我的pc的ip地址为192.168.1.131，然后我就可以输入这样的命令：weinre --boundHost 192.168.1.131 --httpPort 1234

步骤二：在浏览器上打开网址192.168.1.131:1234，然后我们就可以看到以下界面：

步骤三：我们就按照上面的红色箭头所说的做，先复制一段script到我们所要调试的界面

步骤四：我们就可以点击上面那个连接，然后进入调试界面了。调试界面是下面这个样子的：

 

步骤五：利用手机打开所要调试的页面（也就是刚才添加了script的那个页面，注意要在pc上开启服务器，然后手机通过输入对应地址来访问页面）

步骤六：点击调试页面里对应的Targets，然后点击Elements工具，就可以进行调试了。

调试展示：

点击了<p>标签对应的这一行之后，右边就好像使用chrome开发者工具一样，显示出这个dom结点对应的css了