移动web 应用开发调试

调试前端页面我一直使用着神器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. 
 在手机上打开要调试页面的地址

    http://192.168.31.161:7773/index2.htm

   

   对于本机的localhost 也是可以进行调试的。

在 weinre Access Points 中开始远程调试

点击anonymous Access Points

同时还有一个插件 ripple  也是比较方便的，对于调试phonegap 应用比较方便