移動端網頁調試 之 weinre&spy-debugger

Chrome DevTools 是前端開發和調試的入門神器，上手容易使用也很簡便，但不少高級功能仍是要認真學習和等待發掘的，這裏就直接貼上詳細的教程供你們收藏學習。

言歸正傳，趕上了移動端網頁，調試的目標是要讓頁面在主流的手機平臺上表現和行爲一致。一般咱們都是先在chrome的手機模擬模式下進行開發，提測後纔會在手機端的瀏覽器進行測試。測試階段一旦出現問題解決起來就會比較麻煩，由於解決這類問題通常不會一次就能改好，有時還要考慮各自瀏覽器兼容性而後使用排除法來嘗試解決。因爲缺少可視化的調試界面，咱們不能直觀地調試出現問題的手機，甚至還須要每改一次發佈一遍而後才能看到效果，可見效率是低下的。weinre和spy-debugger就爲咱們提供了這種移動端調試的可視化界面。

weinre是一款遠程調試工具（web inspector），能夠在PC上直接調試運行在移動設備上的遠程頁面。使用方式以下：

1. 全局安裝weinre npm install weinre -g
2. 啓動 weinre 調試界面的默認端口是8080，可加上 httpPort 參數指定端口
3. 能夠調試本地服務器上的頁面，需引入一個腳本(端口寫實際端口)：
   <script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>

可見weinre有個不足是須要引入一個script腳本,因此使用起來並不友好。spy-debugger則是內部集成了weinre和anyproxy抓包工具，能夠自動給頁面注入weinre的腳本，下面將詳細介紹spy-debugger的用法。

1. 全局安裝spy-debugger npm install spy-debugger -g
2. 啓動 spy-debugger 默認使用anyproxy抓包，推薦配置外部代理，如： spy-debugger -e http://127.0.0.1:8888，而後再配置fiddler監聽該端口就能結合fiddler使用了
3. 設置手機的HTTP代理
   代理的地址爲 PC的IP地址 ，代理的端口爲spy-debugger的啓動端口(默認端口爲：9888) （也能夠指定端口: spy-debugger –p 8888 ）
   Android設置代理步驟:設置 - WLAN - 長按選中網絡 - 修改網絡 - 高級 - 代理設置 - 手動
   iOS設置代理步驟：設置 - 無線局域網 - 選中網絡 - HTTP代理手動

功能：

• 選中&查看&修改 頁面元素和樣式；控制檯執行腳本

• 查看修改頁面resources（localStorage和sessionStorage）；查看network和timeline看板（建議用抓包工具查看）

• 頁面編輯模式（原理是html5的contenteditable屬性，不經常使用）

移動端網頁調試的特色是多個設備、多個瀏覽器的調試，這致使有時候不得不在這些設備間來回切換和刷新頁面，下一篇將會介紹Browsersync--可以在瀏覽器間實時自動刷新頁面和同步滾動點擊操做。