如今在移動平臺上，web/hybrid app 不斷向 native app 發起挑戰。
背景
出于解放生產力和降低成本的考量，越來越多的團隊開始嘗試以 web 技術來開發應用。
在各移動平臺上，native app 開發都得到了官方的最大支持，工具鏈非常成熟。盡管如此，native app 開發者往往都不喜歡真機調試，因為它非常費時。在 webapp 開發這邊，情況更加糟糕。不僅費時，由于 webapp 往往要覆蓋多個平臺，需要在多種設備上進行調試，這還讓調試工作變得非常地瑣碎，難以形成通用的方案。
前端開發者在 PC 平臺上如魚得水，然而切換到移動平臺，則受到掣肘。本文嘗試總結一些簡單有效的調試方案，以滿足不同場景下調試的需求。
縮小調試范圍
筆者認為移動設備上調試的需求主要來自于兩點，一是 webapp 使用了（或需要適配）移動平臺上獨有的特性，例如觸摸事件、虛擬鍵盤遮蓋、移動平臺獨有的 BOM API 等，二是 webapp 出現 PC 瀏覽器上不可復現的錯誤。對于前者，我們似乎是只能迎難而上，但對于后者，則可以盡量避免。
出現在 PC 上不可復現的錯誤的主要原因是瀏覽器的兼容性問題，其中渲染的問題更加突出。得益于 JavaScript 的語言特性和 ES5 廣泛實現，借助 babel 等工具，我們可以將由 ES6 ES7 語法編寫的代碼編譯為 ES5 的，從而避免 JavaScript 上的兼容性問題。
不過 CSS 很難甚至是不能被通過打補丁（polyfill）和編譯的方式來達到完美的兼容性。開發者要對各目標平臺的 CSS 支持度充分了解，從中選取廣泛支持的特性來進行開發。好在 WebKit 以及衍生品已占據了移動瀏覽器渲染引擎（WebKit 包括用于布局渲染的 WebCore 和執行 JavaScript 的 JavaScriptCore 兩個引擎，本文只取其渲染引擎的含義）的主要份額，使 CSS 特性確定的工作減輕不少。
主要的移動平臺
不可否認，現如今 iOS 和 Android 系統統治了智能手機和平板電腦設備，本文所介紹的調試方法也僅針對于這兩個系統。iOS 上，瀏覽器核心隨系統一直平滑穩定地升級，iOS 6 以后支持使用 Mac Safari 來進行調試。Android 從 4.4 開始，其 WebView 基于 Chromium 開發，這不僅帶來了 v8 JavaScript 引擎，還帶來了可用桌面 Chrome 來調試的能力。
除此之外，微信的巨大成功，也讓針對于微信的 webapp 開發備受重視。在 iOS 上，微信瀏覽器與 Safari 表現一致。在 Android 上，它采用的是騰訊瀏覽服務（TBS），并非系統提供的 WebView 組件。TBS 的初衷也許是解決在官方版本和衍生版本眾多的 Android 系統上，WebView 表現一致性的問題。由于不隨 Android 系統一起升級，在很長一段時間里，TBS 的 Webkit 版本都落后于系統的 WebView，導致微信常被調侃為“移動端的IE 6”。好在今年 3 月基于 Blink 打造的 TBS 2.0 終于發布，使其支持更新的 CSS 特性。
調試工具
本文僅介紹可以免費下載和使用的工具。
1、weinre 與 jsconsole
weinre (WEb INspector REmote) 與 jsconsole 是原理上相似的工具。weinre 復用了 WebKit 的 Web Inspector 的界面代碼，有 Safari 和 Chrome 調試器經驗的開發者會對此非常熟悉。jsconsole 是一個 JavaScript 的 web 控制臺，它能接管控制臺的日志輸出，也能響應調試服務器發出的求值命令（通過 Server-Send Event 發出），將日志和求值結果通過 xhr 發送到服務器。jsconsole 功能雖然更少，但官方提供了一個開箱即用的線上應用，http://jsconsole.com/，無需安裝任何軟件即可開始調試。兩者的調試功能都是由 JavaScript 編寫，都必須把調試服務腳本插入目標頁面，使其難以用于線上產品的調試。并且由于運行在瀏覽器沙盒中，其提供調試能力受到了較大的限制，例如無法查看 httponly 屬性的 cookie，和非 xhr 的請求。
2、微信 Web 調試工具與 spy-debugger
這兩者也是類似的工具，都是基于 weinre 開發的。設備連接調試工具提供的代理后訪問目標網頁，weinre 的調試腳本會被自動注入到 HTML 頁面，從而免除了手動注入的麻煩。相比于 weinre 僅能查看 HTTP xhr 請求，利用代理，微信 Web 調試工具提供了查看所有 HTTP 請求的能力。不過由于沒有實現 HTTPS 中間人，無法查看 HTTPS 請求。 spy-debugger 在這些功能之上提供了查看 HTTPS 請求的功能。值得一提的是，微信 Web 調試工具額外提供了調試微信 JSSDK 的能力，不過調試對象并不是真機，需是其提供的瀏覽器窗口。
3、Safari 與 Chrome
使用 PC 瀏覽器來調試對應的移動瀏覽器，你將擁有最佳的調試體驗。WebKit 家族的 PC 瀏覽器都有非常強大的調試工具，其調試移動設備的體驗幾乎與調試桌面網頁無異。Opera 自從將渲染核心從 Presto 切換到 Blink 之后，自家用于調試 Opera Mobile 的 Dragonfly 也被移除了，可見 Opera 對 Webkit 調試工具也是滿意的（汗）。
Mac Safari 調試 iOS Safari 和 UIWebView 只需經過簡單的設置。首先在 iOS 設備上啟用 Safari 的 Web 檢查器功能（設置>Safari>高級>Web 檢查器），再通過 USB 線纜連接到 Mac，然后就能在 Mac Safari 的“開發”菜單中選中該設備來進行調試。如果沒有找到“開發”菜單，則需要在 Safari 偏好設置中啟用調試功能。調試 UIWebView 的步驟是一樣的，但是要求 app 在該 Mac 設備上能被調試，也就是說第三方開發者是不能直接調試微信的 UIWebView 的。
Chrome 調試 Chrome for Android 和基于 Chromium 的 WebView 的詳情可以在https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging找到。值得一提的是，Chrome 調試支持 Screencast 功能，能夠將移動設備上的 Web 視圖投射到 Chrome 調試工具中，不過這回降低 webapp 的性能表現。
使用 Chrome 來調試 iOS 設備也是可行的。利用 google 開發的 ios-webkit-debug-proxy，把 Safari 的遠程調試協議代理到 Chrome DevTools 上，可以由 DevTools 接管幾乎所有的調試功能。
Webkit 遠程調試協議
Webkit
Safari 和 Chrome 在移動平臺上強大的調試能力源自 Webkit 的遠程調試協議（remote debugging protocol）。Webkit 的遠程調試協議是 Webkit 在 2012 年引入的，目前所有 Webkit 內核的瀏覽器都支持這一特性。DevTools 通過遠程調試協議與目標頁面相連，可以獲取到 Webkit 內核提供的調試信息，這些信息遠比 weinre 等在瀏覽器沙盒中獲取的要準確和豐富。Webkit 遠程調試協議與 Chrome DevTools 都是開放的，這讓 ios-webkit-debug-proxy， React DevTools 和 vue-devtools 等強大且富有想象力的調試工具能成為現實。得益于協議的開放性，其他廠商也對 Webkit 調試表現出積極的興趣。Firefox 宣布了用于調試 Webkit 內核瀏覽器的 Valence，不過目前仍處于技術預覽版。
Fiddler
Fiddler 是可以運行在 Mac，Linux 和 Windows 上的一個用于 web 調試的代理軟件。可以用來查看 HTTP API 訪問，AMD 腳本加載，緩存命中等。Fiddler 有豐富的調試功能，其中支持 HTTPS 捕獲和篡改請求響應對移動端調試十分有用。
使用 HTTPS 捕獲功能需要在移動設備上安裝 Fiddler 提供的證書，各移動平臺的設置方法可在http://docs.telerik.com/fiddler/configure-fiddler/tasks/configurefiddler找到。有時我們需要替換線上產品的某個 js 文件來定位問題，或者偽造 session 來模擬使用場景，Fiddler 的篡改功能就能派上用場，具體的使用細節可以在http://docs.telerik.com/fiddler/KnowledgeBase/FiddlerScript/ModifyRequestOrResponse找到。
結論
調試運行 iOS >= 6 和 Android >= 4.4 的設備，優先采用 Safari 或 Chrome 進行調試。其余情況，可采用 weinre 及其衍生工具和 jsconsole。Fiddler 可作為這些方案的有效補充。
參考資料：
http://javascript.ruanyifeng.com/bom/mobile.html
https://developer.chrome.com/multidevice/webview/overview
http://bbs.mb.qq.com/thread-1128359-1-1.html
https://github.com/wuchangming/spy-debugger
https://github.com/google/ios-webkit-debug-proxy
http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging
http://docs.telerik.com/fiddler/configure-fiddler/tasks/configurefiddler
http://docs.telerik.com/fiddler/KnowledgeBase/FiddlerScript/ModifyRequestOrResponse
http://taobaofed.org/blog/2015/11/20/webkit-remote-debug-test/
https://trac.webkit.org/wiki/WebInspector
https://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html
https://github.com/vuejs/vue-devtools
https://developer.mozilla.org/en-US/docs/Tools/Valence
http://moduscreate.com/enable-remote-web-inspector-in-ios-6/
本文作者：陳倬（點融黑幫），目前就職于點融網成都前端團隊，主要負責內部 webapp 的開發，喜歡 Vue.js 。
