【原创】响应式设计之移动端调试工具

背景

2013年是网页设计响应式的一年。所谓响应式网页设计，是由Ethan Marcotte在2010年提出的名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。简单来说就是同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局。这是一个多么强大的概念，一套代码兼容所有设备，节省维护成本，提高开发效率。然而，现实并非如此完美，在其强大的背后也有鲜为人知的辛酸苦楚。

众所周知，在响应式设计出现或者说在各种移动设备不断迅速抢占PC市场之前，所有的网页设计几乎不要求兼容移动设备，而在PC端的开发调试已经相当成熟，各种调试工具纷纷脱颖而出，诸如：Firebug、Chrome开发者工具等。这让开发者如鱼得水，在传统网页设计中游刃有余。

而如今的互联网市场已经有很大一部分属于移动设备的领地，网页设计兼容移动设备刻不容缓，而响应式设计的提出让这一目标成为可能，甚至可以说是网页设计兼容移动设备的完美解决方案。但是，光有方案只能是空谈，几乎没有人能够不经过反复调试就能写出完全正确的代码，移动设备上的开发调试给网页设计带来了阻力，让开发者不得不投入更多的成本用以对移动设备兼容的调试。所以良好的移动开发调试工具必须问世，而拥有一款优秀的移动开发调试工具，必然给响应式网页设计锦上添花。

人类的智慧是无穷的，2010年底weinre问世，至今weinre已经发布2.0.0版本，已经成为一款相当成熟的针对移动网页设计的调试工具。

weinre

weinre is WEb INspector REmote. Pronounced like the word "winery". Or maybe like the word "weiner". Who knows, really. —— 完整介绍（weinre官网）

weinre使用方法

安装weinre：

Windows环境：
```
npm install -g weinre
```
Mac OS X：
```
sudo npm install -g weinre
```
其他环境请自行查阅安装方法

在项目中引入调试脚本：

引入方式：

<script src="http://10.13.124.199:8088/target/target-script-min.js#test"></script>

需注意，host与port要与启动weinre时设置的一直。

启动weinre：

普通启动方式：

weinre --httpPort 8088 --boundHost 10.13.124.199

所有参数列表：

--help (or -? or -h)                              查看使用帮助
--httpPort [portNumber]                           设置启动端口，默认8080
--boundHost [hostname | ip address | -all-]       绑定主机地址，默认localhost
--verbose [true | false]                          是否允许详细信息写入stdout，默认false
--debug [true | false]                            是否允许调试信息写入stdout，默认false
--readTimeout [seconds]                           设置服务器将消息发送到目标或客户端的等待时间，默认5s
--deathTimeout [seconds]     设置监听到一个调试客户端或目标终端连接到显示终端信息的等待时间，默认3 * readTimeout

开始调试：

打开浏览器[推荐Chrome]，输入<code html>http://10.13.124.199:8088</code> **注意：**该处不是输入项目地址，需与启动weinre时设置的host和port一直。会得到类似以下界面：
使用浏览器新窗口或其他终端[例如：ipad]打开项目地址，注意：在项目首页中加入脚本并指定目标，例：
再返回weinre调试界面，此时或片刻后会出现：
点选目标，此时被选中的目标变为【绿色】，切换至【Elements】选项卡，出现DOM结构：