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

转载地址:http://www.douban.com/note/289846168/

调试前端页面我一直使用着神器Chrome开发人员工具, 那个方便, 大家都懂的.

但当我们要调试为移动设备设计的Web页面时, 是不是觉得有点力不从心了?
平时开发时我们可以一直都是在桌面调试这个页面, 但最终的运行环境是移动设备, 最终还是要在手机上验证一下, 这个时候各种兼容性问题就有可能接踵而来.

当我们在手机上打开这个页面时, 发现有个地方样式有问题, 但桌面上展现正常, 这个时候怎么办?
我们是不是只能推理下某个地方样式有兼容性问题, 逐步将问题范围缩小, 猜想/修改/刷新手机, 无限循环下去, 直到解决问题为止.

这个时候要是有一个像Chrome开发人员工具一样的调试工具能远程实现调试手机上打开的页面该多好啊.

其实是还真有, 只是我不知道而已, 下面就有请weinre 闪亮登场!!

weinre is WEb INspector REmote.
weinre is a debugger for web pages, like FireBug and Web Inspector, except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.
weinre reuses the user interface code from the Web Inspector project at WebKit, so if you've used Safari's Web Inspector or Chrome's Developer Tools, weinre will be very familiar.

我这里只是简单介绍下怎么使用, 详情资料大家还是去官网看吧

---------------------------------------------------------------------------------------------------------------------------

接下来我们实战一把
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

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

 

参考
----------------
移动终端开发必备知识 - weinre远程实时调试