大廠技術堅持周更精選好文 本文為來自 西瓜視頻前端技術團隊 的文章，已授權 ELab 發布。 作者：鄭家興 前端程序員最容易搞出 P0 事故的就是白屏，PC 上的白屏我們比較好調，打開 Chrome Devtools 就能看見。 但是手機上的白屏怎麼調？以及遠程用戶手機上的白屏又該怎麼調？這時候就需要使用遠程調試的技術了。 本文將對遠程調試這個話題進行探討，並給出最佳實踐。 有移動端 Web 開發背景，或者對移動端 Web 開發感興趣的前端同學 hybrid：前端和客戶端的混合開發，一般是指在客戶端應用上啟動 Webview 渲染 Web 頁面，兼顧原生 App 和 Web 的優點。在本文中，為方便理解，hybrid 泛指移動設備上的前端技術，包含原來的 hybrid 應用、以及移動瀏覽器 Web。 他們的共同點在於： 因此，我們粗淺的定義調試由四部分組成 相比調試，遠程調試的調試界面（client）和目標調試服務（server）一定在不同的機器上； 此外，遠程調試在傳輸通道上做了限定，需要藉助一些物理介質（比如 WIFI、藍牙、USB）來配合傳輸通道（transport channel）傳遞協議 對於 hybrid 這個場景，遠程調試的四要素分別是： 早期的移動端網頁稱之為 WAP ，支持展示少量頁面標籤以及頁面腳本。 當時存在着各種類型的操作系統，比如諾基亞的 Symbian、黑莓等等，大部分手機都會支持 WAP 。 以諾基亞為例，2005 年諾基亞手機內置 S60 瀏覽器，其內核用的 Webkit，支持 WAP 頁面展示。 當前的頁面形態還比較簡單，加之混合應用還沒起來，大部分情況下本地調試即可解決，因此遠程調試還不是痛點。 一般還是採用 alert 這樣的本地調試方案。 時間快進到 2009 年，Opera Mobile 10 發布，Symbian 系統可安裝下載。 該瀏覽器牛逼之處在哪？其**支持局域網內遠程調試，無需 USB ，領先同行數年！甚至如今（2022）Android Chrome 默認都不提供 WIFI 調試**，只能通過一些工具解決（下文會提到） 當前該方案的不足之處在於生態，如果統一市場的是 Opera 而不是 Chrome 的話... 2007 年首款 iPhone 和 Android 設備分別發布，自帶 Webview 功能（採用的 Webkit 引擎） 那一開始如何進行 Webview 頁面調試的呢？ 引自Step By Step: Turn On The iPhone/iPad’s Web Debugging Console · MaisonBisson 首先 iOS 的調試方案不通用，還壓縮了頁面布局；Android 上調試需要懂 Android 的同學配合。 此時的調試如此麻煩，不如繼續使用 alert 。 但 alert 本身就難用，此時有追求的前端同學就誕生了一個想法： 畫一個調試框，支持打印輸出（重寫 consoleapi），執行輸入腳本（eval） 這也是後面介紹的 vconsole 等解決方案的雛形，但當時大家各做各的，貌似也沒有較出名的開源方案。 聰明的程序員大多是偷懶的 如果能在電腦上直接調試移動端頁面，那效率就大大提高。可是客戶端不支持，作為一個前端開發，怎麼用前端技術來解決這個問題？ 2010.12，Patrick Mueller 推出了 weinre 工具，意為WebInspectorRemote（見 weinre - ChangeLog） weinre 由三部分組成 weinre 的原理如下： 以最常用的「Console 面板執行代碼」為例： weinre使用純前端能力，沒有用到任何 native 能力。 因此其功能有限，比如無法調試源碼、監控所有請求（可以想一下為什麼）。 但weinre提供了一個思路，即純前端可以實現基礎能力的任意遠程調試 weinre 方案故好，但還是缺少諸如完整的元素麵板、完整的請求列表面板。 於是，輪到操作系統開始卷了。 此時的遠程調試四要素如下： 該階段能夠實現完整的調試能力，但引入了 USB 作為調試通道，增加了遠程調試成本，且不適用於跨地遠程調試 CDP，即 Chrome Devtools Protocol 。隨着 Chrome 的優化，Safari 、Firefox 和 IE 等瀏覽器的沒落，社區上使用 Chrome Devtools 調試的占比越來越大。 這個階段其實沒有什麼創新性的突破，而是將原來的調試體系往 CDP 靠攏，社區出了如下方案： 而在基於 WIFI 通道的調試方案上，weinre 已不再兼容 Chrome Devtools Protocol ，於是社區又出了一款代替 weinre 的方案 -- chii 於 2020.4 推出，對標 weinre 的能力，只是將 webkit protocol 改為 Chrome Devtools Protocol ，weinre 無法獲取到的，chii 也無法獲取，比如網絡只能捕獲 xhr 於此同時，原先的「頁面展示一個調試窗口」也出了幾種較為好用的方案： 簡單總結下這個階段：工具不斷優化，並往 Chrome Devtools 調試靠攏 前面提到，社區調試方案逐步遷移到 Chrome Devtools 的調試體系，包括： 現在還有一個問題沒有解決：如何基於 WIFI 通道完整的調試Hybrid頁面？ 解決了這個問題，我們就能拋開物理限制，實現跨地區的完整的遠程調試 在分析這個問題之前，我們需要先解決如下問題： Android 和 iOS 的 USB 調試過程不太一樣，這裡先講 Android 的 Android Chrome 在開啟調試模式後，會啟動 Unix Domain Socket Server（固定端口 9229） ，對其發送/json/list請求可以獲得可調試的頁面列表；創建 socket client 並連上該 Server ，找到目標調試頁面，對其收發 cdp 數據包，即可控制相應頁面或者收到該頁面的調試信息。 使用 usb 調試，實際是使用 ****adb****做了一層端口轉發 本地訪問 9229 端口實際訪問的是 Android 內部的 9229 端口 PC 啟動調試工具時，會創建一個socket client，接着再通過 adb 連上了Unix Domain Socket Server，此後即可就進行 cdp 進行通信。 解決方案其實很簡單，加一層websocket進行中轉 在 Android App 內部啟動 2 個 socket client : 然後 PC 的 socket server 再轉發 CDP 數據給Chrome Devtools iOS 和 Mac 之間進行 USB 通信，採用的是 USB 協議稱之為usbmux，其本身是私有協議，用於自身應用使用，但是都被破解得差不多了... usbmuxd是 usbmux 協議的實現，是一個守護進程，隨 iOS 設備和 Mac 設備的系統啟動而啟動，當 iOS 設備連接上 Mac ，之間的 usb 通信將通過 usbmuxd 這個中間服務進行 於是如果我們知道了 Web 遠程調試對應的 USB 協議，那麼就可以取代 Safari Inspector ，實現自己的調試終端。 相關的調試協議可以通過這個倉庫找到 GitHub - google/ios-webkit-debug-proxy: A DevTools proxy (Chrome Remote Debugging Protocol) for iOS ，感興趣的自行查閱 同 Android ，要想取消 USB ，我們也需要啟動了一個 websocket 來做指令中轉。 要做指令中轉，我們首先需要找到遠程調試服務的端口。那麼問題來了：iOS 的遠程調試服務端口是多少？ 不像 Android 的調試端口是固定的，iOS 設備的內部服務是啟動時動態註冊的。 對於這個問題，iOS 提供了一種類似「門衛」的解決方案：內部運行一個守護進程（lockdown），運行在固定端口（62078），支持系統服務訪問能力。 暫時無法在飛書文檔外展示此內容 於是可以先通過該服務找到 Web 調試服務（com.apple.webinspector）的端口，之後的過程和 Android 一樣了。 首先是使用成本，本地需要另外啟動一個 socket server 服務。 那麼把 socket server 服務部署在線上呢？的確可以降低用戶的使用成本，但是相應的，網絡鏈路變長了，容易出現時延問題，如果是居家辦公不在同一個辦公網的話就更嚴重了。 打分規則： 上面講了這麼多，我們會發現調試方案非常的零碎，或者落地成本較高。 我們希望未來的遠程調試是這樣的： 第三點需要操作系統支持，其他的屬於上層方案，總是可以實現。 usbmux協議分析 - Lazy Eval 揭秘瀏覽器遠程調試技術 Webkit 遠程調試協議初探 乾貨｜一定要知道的抖音小程序/小遊戲調試原理！ iOS自動化測試驅動工具探索 - 掘金 Web應用調試：現在是Weinre和JSConsole，最終會是WebKit的遠程調試協議_Java_Werner Schuster_InfoQ精選文章 在越獄設備調試任意 iOS App 的 WebView - 字節時代 wap是什麼渠道的簡稱（wap的另一層意思） 跨終端Web之Hybrid App_移動_徐凱_InfoQ精選文章 我們來自字節跳動，是旗下西瓜視頻前端部門，負責西瓜視頻的產品研發工作。 我們致力於分享產品內的業務實踐，為業界提供經驗價值。包括但不限於營銷搭建、互動玩法、工程能力、穩定性、Nodejs、中後台等方向。 歡迎關注我們的公眾號：xiguafe，閱讀更多精品文章。 我們在招的崗位：https://job.toutiao.com/s/rhjPVXT。招聘的城市：北京/上海/廈門。 歡迎大家加入我們，一起做有挑戰的事情！ 謝謝你的閱讀，希望能對你有所幫助，歡迎關注、點讚~
階段 0：WAP 時代的原始調試 - 2000
最佳實踐
留言列表