H5前端開發者的一大困擾就是網頁相容性問題，在自己手機上已經完美完成了需求之後，一到驗收或者上線，就出現各種相容引起的bug，要解決還特别曲折，不僅要探索Android和iOS手機的不同調試方式，還要支援在不同浏覽器或者APP上調試，極大的影響了開發的效率。
雖然我們也可以通過模拟器進行開發調試，但模拟終究是模拟，在某些場景下真機還是不可或缺，尤其是特定機型版本的問題。
一般情況下，真機Web調試要怎麼做呢？
系統自帶調試功能
Android
Chrome開發者工具能基本模拟的手機環境，配上各種斷點調試，一大利器。除此之外，Chrome有一個調試真機的方法。
具體實作方式：通過USB資料線，将Android手機連接配接到電腦上，手機用Chrome浏覽器打開頁面，電腦上也打開Chrome，輸入chrome://inspect/ ，進入調試模式，這個時候就能調試頁面啦。
| 優點 | 可以用chrome強大的調試工具，調試起來十分友善 |
|---|---|
| 缺點 | 1.隻支援android；2.隻能用手機版chrome（國内大部分App調試的功能都閹割掉了）；3.調試起來非常複雜，而且對PC的Chrome版本有依賴 |
iOS
蘋果的産品雖然封閉，但是其還是提供了一些暖心的小功能，友善開發者。
具體的調試方式：打開iPhone手機設定設定 -> Safari -> 進階 -> 打開Web檢查器，然後通過資料線将iPhone連接配接到Mac，電腦和手機同時打開Safari，電腦上Safari打開 開發-iPhone，就能開始調試啦。
| 快，很流暢，不卡頓 | |
|---|---|
| 1.裝置最貴；2.隻能限制在iOS safari下調試，app内的webview就沒辦法了 |
真機平台遠端調試
移動端的真機調試，市面上有不少平台支援，但支援WEB調試的幾乎沒有。岩鼠平台恰好解決了這一問題。
雙端支援
支援Android海外内熱門機型&iOS各大機型的WEB調試。
原生體驗
本地使用devtools調試能支援的功能，岩鼠平台幾乎都能支援，并且操作體驗也是完全一緻。
Andoird除了能使用Chrome調試之外，還能完美支援使用U4核心的APP（例如UC浏覽器、誇克、支付寶、淘寶、釘釘等）。
iOS支援Safari/Webview調試, 也支援第三方App調試。
一鍵開啟
3種快捷方式，輕松打開網頁
- 通過Scheme适配打開
- 通過二維碼掃描打開
- 直接選擇目标APP打開
技術福利時間
岩鼠平台如何實作web調試能力呢？
Chrome調試的核心原理就是浏覽器的核心通過遠端調試協定(remote debugging protocol)與前端Devtools的應用程式建立websocket連結傳遞調試消息。而通過真機平台調試的關鍵的就是如何發現調試服務，其實就是在真機平台上實作一個浏覽器中chrome://inspect的類似服務。完整的實作邏輯可以繼續往下看。
建立連接配接
首先WEB核心會建立一個unix的socket的web服務，這個服務隻要建立了實際上都可以通過/proc/net/unix被查詢到。例如Chrome釋出版本的socket名稱就是chrome_devtools_remote。是以通過grep關鍵詞就可以擷取到這台手機上所有相關服務，然後通過adb forward實作轉發就可以讓這個web服務暴露到主機來進行通路了。
通路網頁
然後localhost:39222/json就可以通路到具體的網頁資訊。
[
{
"description": "",
"devtoolsFrontendUrl": "http://.../inspector.html?ws=10.2.35.209:39223/devtools/page/120",
"id": "120",
"title": "百度一下",
"type": "page",
"url": "https://m.baidu.com/?from=844b&vit=fps",
"webSocketDebuggerUrl": "ws://10.2.35.209:39223/devtools/page/120" }
]
我們還可以通過localhost:39222/json/version擷取到應用相關資訊。
{
"Android-Package": "com.android.chrome",
"Browser": "Chrome/68.0.3440.91",
"Protocol-Version": "1.3",
"User-Agent": "Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MTC20K)...",
"V8-Version": "6.8.275.26",
"WebKit-Version": "537.36 (@8daf58f7f40d22013c59388236c8e71e1117cb2c)",
"webSocketDebuggerUrl": "ws://10.2.35.209:39223/devtools/browser"
對接服務
擷取到 webSocketDebuggerurl 和前端的 devtools 應用程式進行對接就可以達到開啟Chrome調試的效果了。
上面例子 localhost:39222/json 接口傳回的 devtoolsFrontendUrl 就是拼接後浏覽器通路的最終url了。
相容性問題
做完整個對接似乎就完工了，但是代碼的世界從來沒有那麼單純，我們還要解決一個版本相容性問題。Chrome到現在已經有70多版本了，Devtools也演進了很多，難免會有版本之間協定沖突問題。是以可以看到json中帶有對應的devtool-frontend的版本資訊，就是為了解決這種問題。
我們發現從Chrome的48到71之間有上萬的devtools-frontend版本。是以為了解決數量大的問題我們進行了一定的精簡，每個核心版本選取一個對應的該版本最新的devtools前端進行對應，這樣就把數量降下來了，當然出現相容性問題的機率也提高了，如果大家在使用過程發現情況請多多回報，我們會第一時間跟進處理。
首先iOS端方面，我們是沒有任何辦法去修改；其次，修改devtools去适配Safari Debug protocol的話，工作量也是巨大的，也不利于devtools後面的更新。
為此，我們思考的方案是像 remotedebug-ios-webkit-adapter 那樣，做一個中間層，把Safari Debug protocol與Chrome devtools protocol做一次正向與反向的轉換，進而達到我們的目的。
通過實作協定轉換後, 我們不僅能使用devtools去調試iOS中的網頁, 甚至還可以支援到大部分基于Chrome Devtools Protocol的自動化架構。
iOS特性與第三方App支援
目前iOS能否調試手機中的某個app, 是依賴證書去做判斷的, 如果手機中需要調試的app是developer證書, 則Safari中會把所有可調試的網頁或者JSContext全部列出來, 使用者選擇對應的網頁或者JSContext調試.
而現在通過岩鼠平台的iPhone雲真機做Web調試的話, 使用者隻需要上傳ipa後, 我們都會使用developer證書重簽名, 是以無論是Safari還是任何一個第三方的app, 都可以直接使用岩鼠提供的Web調試.
調試依賴javascript的用戶端架構(Weex、React Native), 現在市面上iOS絕大部分依賴javascript的架構, JS引擎都是使用蘋果自導的JavascriptCore.framework。