如今在移動平臺上，web/hybrid app 不斷向 native app 發(fā)起挑戰(zhàn)非洲。
背景
出于解放生產(chǎn)力和降低成本的考量，越來越多的團隊開始嘗試以 web 技術(shù)來開發(fā)應(yīng)用。
在各移動平臺上拐纱，native app 開發(fā)都得到了官方的最大支持，工具鏈非常成熟地来。盡管如此戳玫，native app 開發(fā)者往往都不喜歡真機調(diào)試，因為它非常費時未斑。在 webapp 開發(fā)這邊咕宿，情況更加糟糕。不僅費時蜡秽，由于 webapp 往往要覆蓋多個平臺府阀，需要在多種設(shè)備上進行調(diào)試，這還讓調(diào)試工作變得非常地瑣碎芽突，難以形成通用的方案试浙。
前端開發(fā)者在 PC 平臺上如魚得水，然而切換到移動平臺寞蚌，則受到掣肘田巴。本文嘗試總結(jié)一些簡單有效的調(diào)試方案，以滿足不同場景下調(diào)試的需求挟秤。
縮小調(diào)試范圍
筆者認(rèn)為移動設(shè)備上調(diào)試的需求主要來自于兩點壹哺，一是 webapp 使用了（或需要適配）移動平臺上獨有的特性，例如觸摸事件艘刚、虛擬鍵盤遮蓋管宵、移動平臺獨有的 BOM API 等，二是 webapp 出現(xiàn) PC 瀏覽器上不可復(fù)現(xiàn)的錯誤。對于前者箩朴，我們似乎是只能迎難而上岗喉，但對于后者，則可以盡量避免炸庞。
出現(xiàn)在 PC 上不可復(fù)現(xiàn)的錯誤的主要原因是瀏覽器的兼容性問題钱床，其中渲染的問題更加突出。得益于 JavaScript 的語言特性和 ES5 廣泛實現(xiàn)燕雁，借助 babel 等工具诞丽，我們可以將由 ES6 ES7 語法編寫的代碼編譯為 ES5 的，從而避免 JavaScript 上的兼容性問題拐格。
不過 CSS 很難甚至是不能被通過打補蹲惫弧（polyfill）和編譯的方式來達到完美的兼容性嫡秕。開發(fā)者要對各目標(biāo)平臺的 CSS 支持度充分了解谆膳，從中選取廣泛支持的特性來進行開發(fā)华坦。好在 WebKit 以及衍生品已占據(jù)了移動瀏覽器渲染引擎（WebKit 包括用于布局渲染的 WebCore 和執(zhí)行 JavaScript 的 JavaScriptCore 兩個引擎，本文只取其渲染引擎的含義）的主要份額金踪，使 CSS 特性確定的工作減輕不少浊洞。
主要的移動平臺
不可否認(rèn)，現(xiàn)如今 iOS 和 Android 系統(tǒng)統(tǒng)治了智能手機和平板電腦設(shè)備胡岔，本文所介紹的調(diào)試方法也僅針對于這兩個系統(tǒng)法希。iOS 上，瀏覽器核心隨系統(tǒng)一直平滑穩(wěn)定地升級靶瘸，iOS 6 以后支持使用 Mac Safari 來進行調(diào)試苫亦。Android 從 4.4 開始，其 WebView 基于 Chromium 開發(fā)怨咪，這不僅帶來了 v8 JavaScript 引擎屋剑，還帶來了可用桌面 Chrome 來調(diào)試的能力。
除此之外诗眨，微信的巨大成功唉匾，也讓針對于微信的 webapp 開發(fā)備受重視。在 iOS 上匠楚，微信瀏覽器與 Safari 表現(xiàn)一致巍膘。在 Android 上，它采用的是騰訊瀏覽服務(wù)（TBS）芋簿，并非系統(tǒng)提供的 WebView 組件峡懈。TBS 的初衷也許是解決在官方版本和衍生版本眾多的 Android 系統(tǒng)上，WebView 表現(xiàn)一致性的問題益咬。由于不隨 Android 系統(tǒng)一起升級，在很長一段時間里，TBS 的 Webkit 版本都落后于系統(tǒng)的 WebView幽告，導(dǎo)致微信常被調(diào)侃為“移動端的IE 6”梅鹦。好在今年 3 月基于 Blink 打造的 TBS 2.0 終于發(fā)布，使其支持更新的 CSS 特性冗锁。
調(diào)試工具
本文僅介紹可以免費下載和使用的工具齐唆。
1、weinre 與 jsconsole
weinre (WEb INspector REmote) 與 jsconsole 是原理上相似的工具冻河。weinre 復(fù)用了 WebKit 的 Web Inspector 的界面代碼箍邮，有 Safari 和 Chrome 調(diào)試器經(jīng)驗的開發(fā)者會對此非常熟悉。jsconsole 是一個 JavaScript 的 web 控制臺叨叙，它能接管控制臺的日志輸出锭弊，也能響應(yīng)調(diào)試服務(wù)器發(fā)出的求值命令（通過 Server-Send Event 發(fā)出），將日志和求值結(jié)果通過 xhr 發(fā)送到服務(wù)器擂错。jsconsole 功能雖然更少味滞，但官方提供了一個開箱即用的線上應(yīng)用，http://jsconsole.com/钮呀，無需安裝任何軟件即可開始調(diào)試剑鞍。兩者的調(diào)試功能都是由 JavaScript 編寫，都必須把調(diào)試服務(wù)腳本插入目標(biāo)頁面爽醋，使其難以用于線上產(chǎn)品的調(diào)試蚁署。并且由于運行在瀏覽器沙盒中，其提供調(diào)試能力受到了較大的限制蚂四，例如無法查看 httponly 屬性的 cookie光戈，和非 xhr 的請求。
2证杭、微信 Web 調(diào)試工具與 spy-debugger
這兩者也是類似的工具田度，都是基于 weinre 開發(fā)的。設(shè)備連接調(diào)試工具提供的代理后訪問目標(biāo)網(wǎng)頁解愤，weinre 的調(diào)試腳本會被自動注入到 HTML 頁面镇饺，從而免除了手動注入的麻煩。相比于 weinre 僅能查看 HTTP xhr 請求送讲，利用代理奸笤，微信 Web 調(diào)試工具提供了查看所有 HTTP 請求的能力。不過由于沒有實現(xiàn) HTTPS 中間人哼鬓，無法查看 HTTPS 請求监右。 spy-debugger 在這些功能之上提供了查看 HTTPS 請求的功能。值得一提的是异希，微信 Web 調(diào)試工具額外提供了調(diào)試微信 JSSDK 的能力健盒，不過調(diào)試對象并不是真機，需是其提供的瀏覽器窗口。
3扣癣、Safari 與 Chrome
使用 PC 瀏覽器來調(diào)試對應(yīng)的移動瀏覽器惰帽，你將擁有最佳的調(diào)試體驗。WebKit 家族的 PC 瀏覽器都有非常強大的調(diào)試工具父虑，其調(diào)試移動設(shè)備的體驗幾乎與調(diào)試桌面網(wǎng)頁無異该酗。Opera 自從將渲染核心從 Presto 切換到 Blink 之后，自家用于調(diào)試 Opera Mobile 的 Dragonfly 也被移除了士嚎，可見 Opera 對 Webkit 調(diào)試工具也是滿意的（汗）呜魄。
Mac Safari 調(diào)試 iOS Safari 和 UIWebView 只需經(jīng)過簡單的設(shè)置。首先在 iOS 設(shè)備上啟用 Safari 的 Web 檢查器功能（設(shè)置>Safari>高級>Web 檢查器）莱衩，再通過 USB 線纜連接到 Mac爵嗅，然后就能在 Mac Safari 的“開發(fā)”菜單中選中該設(shè)備來進行調(diào)試。如果沒有找到“開發(fā)”菜單膳殷，則需要在 Safari 偏好設(shè)置中啟用調(diào)試功能操骡。調(diào)試 UIWebView 的步驟是一樣的，但是要求 app 在該 Mac 設(shè)備上能被調(diào)試赚窃，也就是說第三方開發(fā)者是不能直接調(diào)試微信的 UIWebView 的册招。
Chrome 調(diào)試 Chrome for Android 和基于 Chromium 的 WebView 的詳情可以在https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging找到。值得一提的是勒极，Chrome 調(diào)試支持 Screencast 功能是掰，能夠?qū)⒁苿釉O(shè)備上的 Web 視圖投射到 Chrome 調(diào)試工具中，不過這回降低 webapp 的性能表現(xiàn)辱匿。
使用 Chrome 來調(diào)試 iOS 設(shè)備也是可行的键痛。利用 google 開發(fā)的 ios-webkit-debug-proxy，把 Safari 的遠(yuǎn)程調(diào)試協(xié)議代理到 Chrome DevTools 上匾七，可以由 DevTools 接管幾乎所有的調(diào)試功能絮短。
Webkit 遠(yuǎn)程調(diào)試協(xié)議
Webkit
Safari 和 Chrome 在移動平臺上強大的調(diào)試能力源自 Webkit 的遠(yuǎn)程調(diào)試協(xié)議（remote debugging protocol）。Webkit 的遠(yuǎn)程調(diào)試協(xié)議是 Webkit 在 2012 年引入的昨忆，目前所有 Webkit 內(nèi)核的瀏覽器都支持這一特性丁频。DevTools 通過遠(yuǎn)程調(diào)試協(xié)議與目標(biāo)頁面相連，可以獲取到 Webkit 內(nèi)核提供的調(diào)試信息邑贴，這些信息遠(yuǎn)比 weinre 等在瀏覽器沙盒中獲取的要準(zhǔn)確和豐富席里。Webkit 遠(yuǎn)程調(diào)試協(xié)議與 Chrome DevTools 都是開放的，這讓 ios-webkit-debug-proxy拢驾， React DevTools 和 vue-devtools 等強大且富有想象力的調(diào)試工具能成為現(xiàn)實奖磁。得益于協(xié)議的開放性，其他廠商也對 Webkit 調(diào)試表現(xiàn)出積極的興趣繁疤。Firefox 宣布了用于調(diào)試 Webkit 內(nèi)核瀏覽器的 Valence咖为，不過目前仍處于技術(shù)預(yù)覽版秕狰。
Fiddler
Fiddler 是可以運行在 Mac，Linux 和 Windows 上的一個用于 web 調(diào)試的代理軟件躁染》馇。可以用來查看 HTTP API 訪問，AMD 腳本加載褐啡，緩存命中等。Fiddler 有豐富的調(diào)試功能鳖昌，其中支持 HTTPS 捕獲和篡改請求響應(yīng)對移動端調(diào)試十分有用备畦。
使用 HTTPS 捕獲功能需要在移動設(shè)備上安裝 Fiddler 提供的證書，各移動平臺的設(shè)置方法可在http://docs.telerik.com/fiddler/configure-fiddler/tasks/configurefiddler找到许昨。有時我們需要替換線上產(chǎn)品的某個 js 文件來定位問題懂盐，或者偽造 session 來模擬使用場景，F(xiàn)iddler 的篡改功能就能派上用場糕档，具體的使用細(xì)節(jié)可以在http://docs.telerik.com/fiddler/KnowledgeBase/FiddlerScript/ModifyRequestOrResponse找到莉恼。
結(jié)論
調(diào)試運行 iOS >= 6 和 Android >= 4.4 的設(shè)備，優(yōu)先采用 Safari 或 Chrome 進行調(diào)試速那。其余情況俐银，可采用 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/
本文作者：陳倬（點融黑幫）捶惜，目前就職于點融網(wǎng)成都前端團隊，主要負(fù)責(zé)內(nèi)部 webapp 的開發(fā)荔烧，喜歡 Vue.js 吱七。
