前端调试的困境
公司做前端的同学，一提起需要调试Mobile页面就开始头痛。由于手机的沙箱机制，使得需要调试mobile端的页面困难重重，有时候只得不断地在alert数据用来验证，css调试更加是通过猜测来调试……如果有个在mobile上的浏览器提供一个firebug就好了。（其实firebug lite真的有个online的版本，可以直接嵌入到页面中，不过mobile的屏幕这么小，很难去操作啊……）
现有的方案
OK，其实现在也是有几套方案去调试Mobile的页面的。由于平台的限制，所以我们分开了2套。
Android平台：
Android 4.0以上的机型，可以通过安装Chrome for Android 然后通过Chrome for Desktop的一个ADB plugin去实现在桌面上调试Mobile web。
IOS 平台：
不得不说Apple是挺人性化的，IOS默认的safari支持直接在desktop的safari上调试，不过前提是你需要有一整套Apple的设备（虽然我公司有……）。
神器出现 Weinre
在使用 Weinre 之前，我们先了解一下 Weinre 的基本概念。Weinre 的全称是 Web Inspector Remote（远程 Web 调试工具），功能和 Firebug、Webkit Inspector 类似，可以帮助我们在 PC 端远程调试运行在移动设备浏览器内的 Web 页面或应用，能够即时调试 DOM 元素、 CSS 样式 和 JavaScript 等。
使用 Weinre 的目的是调试运行在移动设备浏览器内的 Web 站点或者应用，我们称这个移动设备即为调试目标（Debug Target）。由于在移动设备上直接进行调试操作不便，Weinre 帮助我们使用桌面传统的 webkit 环境（比如 Web Inspector 或者 Google Chrome 的开发者工具）来进行调试，我们称这个桌面调试环境为调试客户端（Debug Client）。
Weinre 为了能够同步桌面的调试客户端和移动设备上的调试目标，需要你搭建一个调试服务器（Debug Server）。因此，在使用 Weinre 进行远程设备调试时，包含了上面的三种元素：
- 调试服务器：调试服务器起到代理的作用，用来同步调试目标和调试客户端之间的命令；
- 调试客户端：这是 Web Inspector 界面，即开发者在浏览器中进行调试的界面；
- 调试目标：需要调试的页面，也指用于运行被调试 Web 内容的的浏览器所在的移动设备。
别说废话啦，有图有真相：
使用说明
首先我们进入http://192.168.33.6:8080/，下图有详细介绍说明，页面中有两个部分需要主要，一个是需要为调试页面引入一段js，然后打开调试页面，就是我们熟悉的debug tool了……
部署及安装
这个玩意我已经安装到demo2上了，请通过http://192.168.33.6:8080/ 访问使用。
其实这个玩意是一个NodeJS的模块，有动手能力的同学，可以自己在本地安装玩玩。
npm install -g weinre
发表评论
要发表评论，您必须先登录。