【原創】響應式設計之移動端調試工具

背景

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.) ——官方網站