神器啊!安卓iOS的H5還能這樣調, 這樣測...

前端小哥哥小姐姐們面對着瀏覽器兼容性與手機分辨率的各類坑，模擬器又重現不了，想找到對應的手機又比較困難，很是腦袋疼，極大的影響了開發的效率。

妹想到，如今有了巖鼠Web調試，不只安卓能輕鬆地一鍵去調試手機中的網頁，竟然連iOS都支持~~!!並且真機也十分流暢，使用起來很是方便. 重點來了，如今內測階段還能直接領禮包無償使用呢~~!

究竟巖鼠是怎麼去把這些平時操做十分複雜的功能都搬到Web上的呢??

曾經的咱們 -- 是這樣玩的

Android:

Chrome開發者工具能基本模擬的手機環境，配上各類斷點調試，一大利器。除此以外，Chrome有一個調試真機的方法。

具體實現方式：經過USB數據線，將Android手機鏈接到電腦上，手機用Chrome瀏覽器打開頁面，電腦上也打開Chrome，輸入chrome://inspect/ ，進入調試模式，這個時候就能調試頁面啦。

iOS

蘋果的產品雖然封閉，可是其仍是提供了一些暖心的小功能，方便開發者。

具體的調試方式：打開iPhone手機設置設置 -> Safari -> 高級 -> 打開Web檢查器，而後經過數據線將iPhone鏈接到Mac，電腦和手機同時打開Safari，電腦上Safari打開 開發-iPhone，就能開始調試啦。

前端小哥哥小姐姐心中OS:

如今的咱們 -- 真機平臺遠程調試

移動端的真機調試，市面上有很多平臺支持，但支持WEB調試的幾乎沒有。巖鼠平臺剛好解決了這一問題。

在巖鼠平臺上調試的效果以下

雙端支持, 支持Android海外內熱門機型&iOS各大機型

原生體驗

安卓使用體驗就像手機在本地，使用Chrome去調試同樣... 還有連iOS的體驗也是與Mac Safari的同樣，逆天了~~~

本地使用devtools調試能支持的功能，巖鼠平臺幾乎都能支持，而且操做體驗也是徹底一致 Andoird除了能使用Chrome調試以外，還能完美支持使用U4內核的APP（例如UC瀏覽器、夸克、支付寶、淘寶、釘釘等）

一鍵開啓

3種快捷方式，輕鬆打開網頁

• 經過Scheme適配打開
• 經過二維碼掃描打開
• 直接選擇目標APP打開

背後的祕密 -- 技術福利時間

巖鼠平臺如何實現web調試能力呢？

Android

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://chrome-devtools-frontend.appspot.com/serve_rev/@8daf58f7f40d22013c59388236c8e71e1117cb2c/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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.91 Mobile Safari/537.36",
   "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

首先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。

將來將來將來將來未~未!來!

咱們即將會上線腦袋疼解決方案 -- H5兼容性測試，只須要填寫，寫入url後，自動化幫你跑千百種機型，經過AI圖像識別，幫你找出兼容性有問題的機型和瀏覽器，讓你快速發現問題，快速修復. 敬請期待..

試用巖鼠平臺真機調試

由UC研發效能團隊研發的巖鼠雲設備平臺，正在進行限量內測，加入交流羣，能夠得到內測資格，免費試用！

加入咱們的釘釘交流羣，隨時聯繫咱們

反饋問題、產品建議、技術交流、第一時間掌握福利信息，歡迎加入釘釘羣討論

搜索羣號：23106523 或者掃碼一下二維碼

微信小助手

合做、購買服務等，請聯繫小助手

搜索微信號：effirst-assistant 或者掃碼如下二維碼