Web远程调试

目前的远程调试方法主要依赖远程调试工具，如 weinre、 JSconsole、 socketbug等。但将来桌面浏览器和移动浏览器有希望默认支持远程调试功能，目前的chrome开发工具已经开始支持远程调试（ 具体可见这里），且已将相关代码提交到了webkit代码库中，将来更多的浏览器有望支持远程调试功能。

上述三种远程调试工具中，weinre使用较为普遍，且已成为phonegap项目的一部分；JSconsole主要偏重于js调试，功能较为单一；socketbug依赖于node.js和socket.IO，安装使用较为复杂。
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这个地址应该能打开

这里用-all-是为了在0.0.0.0上打开端口8082，避免非本地无法远程请求这个端口，然后在要调试的页面里加上weinre的代理：

<script src="http://computer-ip:8082/target/target-script-min.js#anonymous"></script>

这里computer-ip用能让device连上主机的地址，当然有关device与主机网络连接的问题我会在后面的文章中具体来谈。之后就是在 device上启动应用程序，这里就拿android做例子，IOS是一样的。device启动后，打开chrome浏览器（基于webkit内核的都 行），访问：http://localhost:8082/client/#anonymous， 如果之前都问题的话，就能在target下看到device的连接，单击后，会发现这个连接变绿，这说明已能调试远程的device，然后再点element之后就能像使用 firebug或chrome开发者工具那样来使用了，不过它缺了很重要的功能就是远程JS断点调试，不过我会在后面来介绍另外一个工具来实现，下面看看 调试上的截图：

(第一张图是我pc上测试的)

3）Javascript远程断点debug

这里推荐使用Aardwolf(https://github.com/lexandera/Aardwolf/)来实现这个功能，它的原理和weinre类似，也是通过架server来远程debug device。下载Aardwolf后，启动server:

node Aardwolf_install_folder/app.js -h -d web_app_path

web_app_path里就是你需要调试的web应用，里面包含需要调试的JS。

然后类似于weinre，需要在html里添加Aardwolf代理：

• <script src=”http://computer-ip:8500/aardwolf.js”></script>
• <script src=”http://computer-ip:8500/js/main.js”></script>

其中aardwolf.js是系统js，js/main.js是需要调试的js，这个main.js经过aardwolf翻译后，具备了被调试的能力。之后，启动应用，就能在localhost:8000上进行debug：

4）移动平台Javascript开发模式

虽然上面的种种方法都能在device上进行调试HTML5，但全程开发都这么搞估计大家也快疯掉，所以我还是比较推荐现在桌面的浏览器上开发完主 要的界面和逻辑，主要phonegap与device结合点外，其他基本上和桌面浏览器是一致的。所以我会先开发一个Chrome APP版本，先重点搞定这个版本后然后再移植到其他平台上，这样在其他平台上就只用调试和device相关的点。关于chrome app的相关内容我会在后面单独来谈。