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

背景

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结构：

其余工具

• MIHTool（是前端工程师在iOS设备上调试和优化页面的得力助手。） —— 做者博客
• Adobe Inspect cc(Preview & inspect web designs on devices.) ——官方网站