Chrome DevTools 是前端開發和除錯的入門神器，上手容易使用也很簡便，但很多高階功能還是要認真學習和等待發掘的，這裡就直接貼上詳細的教程供大家收藏學習。
言歸正傳，遇上了移動端網頁，除錯的目標是要讓頁面在主流的手機平臺上表現和行為一致。通常我們都是先在chrome的手機模擬模式下進行開發，提測後才會在手機端的瀏覽器進行測試。測試階段一旦出現問題解決起來就會比較麻煩，因為解決這類問題一般不會一次就能改好，有時還要考慮各自瀏覽器相容性然後使用排除法來嘗試解決。由於缺乏視覺化的除錯介面，我們不能直觀地除錯出現問題的手機，甚至還需要每改一次釋出一遍然後才能看到效果，可見效率是低下的。weinre和spy-debugger就為我們提供了這種移動端除錯的視覺化介面。
weinre是一款遠端除錯工具（web inspector），可以在PC上直接除錯執行在移動裝置上的遠端頁面。使用方式如下：
- 全域性安裝weinre
npm install weinre -g - 啟動
weinre除錯介面的預設埠是8080，可加上 httpPort 引數指定埠 - 可以除錯本地伺服器上的頁面，需引入一個指令碼(埠寫實際埠)：
<script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>
可見weinre有個不足是需要引入一個script指令碼,所以使用起來並不友好。spy-debugger則是內部整合了weinre和anyproxy抓包工具，可以自動給頁面注入weinre的指令碼，下面將詳細介紹spy-debugger的用法。
- 全域性安裝spy-debugger
npm install spy-debugger -g - 啟動
spy-debugger預設使用anyproxy抓包，推薦配置外部代理，如：spy-debugger -e http://127.0.0.1:8888，然後再配置fiddler監聽該埠就能結合fiddler使用了 - 設定手機的HTTP代理
代理的地址為 PC的IP地址 ，代理的埠為spy-debugger的啟動埠(預設埠為：9888) （也可以指定埠:spy-debugger –p 8888）
Android設定代理步驟:設定 - WLAN - 長按選中網路 - 修改網路 - 高階 - 代理設定 - 手動
iOS設定代理步驟：設定 - 無線區域網 - 選中網路 - HTTP代理手動
功能：
-
選中&檢視&修改 頁面元素和樣式；控制檯執行指令碼
-
檢視修改頁面resources（localStorage和sessionStorage）；檢視network和timeline看板（建議用抓包工具檢視）
-
頁面編輯模式（原理是html5的contenteditable屬性，不常用）
移動端網頁除錯的特點是多個裝置、多個瀏覽器的除錯，這導致有時候不得不在這些裝置間來回切換和重新整理頁面，下一篇將會介紹Browsersync--能夠在瀏覽器間實時自動重新整理頁面和同步滾動點選操作。