神器啊!安卓iOS的H5還能這樣調(diào), 這樣測(cè)...

前端小哥哥小姐姐們面對(duì)著瀏覽器兼容性與手機(jī)分辨率的各種坑，模擬器又重現(xiàn)不了，想找到對(duì)應(yīng)的手機(jī)又比較困難，非常腦殼疼，極大的影響了開(kāi)發(fā)的效率。<br />妹想到，現(xiàn)在有了[巖鼠](https://yanshu.effirst.com)Web調(diào)試，不僅安卓能輕松地一鍵去調(diào)試手機(jī)中的網(wǎng)頁(yè)，居然連iOS都支持~~!!而且真機(jī)也十分流暢，使用起來(lái)非常方便.?**重點(diǎn)來(lái)了，現(xiàn)在內(nèi)測(cè)階段還能直接領(lǐng)禮包免費(fèi)使用呢~~!**<br />究竟[巖鼠](https://yanshu.effirst.com/)是怎么去把這些平時(shí)操作十分復(fù)雜的功能都搬到Web上的呢??

<a name="4666b912"></a>

## 曾經(jīng)的我們 -- 使用系統(tǒng)自帶調(diào)試功能

<a name="Android"></a>

### Android

Chrome開(kāi)發(fā)者工具能基本模擬的手機(jī)環(huán)境，配上各種斷點(diǎn)調(diào)試，一大利器。除此之外，Chrome有一個(gè)調(diào)試真機(jī)的方法。<br />具體實(shí)現(xiàn)方式：通過(guò)USB數(shù)據(jù)線，將Android手機(jī)連接到電腦上，手機(jī)用Chrome瀏覽器打開(kāi)頁(yè)面，電腦上也打開(kāi)Chrome，輸入chrome://inspect/ ，進(jìn)入調(diào)試模式，這個(gè)時(shí)候就能調(diào)試頁(yè)面啦。<br />

| 優(yōu)點(diǎn) | 1.可以用chrome強(qiáng)大的調(diào)試工具，調(diào)試起來(lái)十分方便 |

| --- | --- |

| 缺點(diǎn) | 1.只支持android<br />2.只能用手機(jī)版chrome（國(guó)內(nèi)大部分App調(diào)試的功能都閹割掉了）<br />3.調(diào)試起來(lái)非常復(fù)雜，而且對(duì)PC的Chrome版本有依賴 |

<a name="iOS"></a>

### iOS

蘋(píng)果的產(chǎn)品雖然封閉，但是其還是提供了一些暖心的小功能，方便開(kāi)發(fā)者。<br />具體的調(diào)試方式：打開(kāi)iPhone手機(jī)設(shè)置**設(shè)置**?->?**Safari**?->?**高級(jí)**?-> 打開(kāi)Web檢查器，然后通過(guò)數(shù)據(jù)線將iPhone連接到Mac，電腦和手機(jī)同時(shí)打開(kāi)Safari，電腦上Safari打開(kāi) 開(kāi)發(fā)-iPhone，就能開(kāi)始調(diào)試?yán)病?lt;br />

| 優(yōu)點(diǎn) | 1.快，很流暢，不卡頓 |

| --- | --- |

| 缺點(diǎn) | 1.設(shè)備最貴<br />2.只能限制在iOS safari下調(diào)試，app內(nèi)的webview就沒(méi)辦法了 |

<a name="EHRzr"></a>

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

![image.jpg](/img/remote/1460000020301159?w=259&h=194)<br />

<a name="89f6db24"></a>

## 現(xiàn)在的我們 -- 真機(jī)平臺(tái)遠(yuǎn)程調(diào)試

移動(dòng)端的真機(jī)調(diào)試，市面上有不少平臺(tái)支持，但支持WEB調(diào)試的幾乎沒(méi)有。[巖鼠平臺(tái)](https://yanshu.effirst.com)恰好解決了這一問(wèn)題。<br />在巖鼠平臺(tái)上調(diào)試的效果如下：<br />![web調(diào)試1.2019-08-26 01_07_05.gif](https://pic1.zhimg.com/v2-6975db3a7c75bdbfa6136d7fab44d744_b.webp)

<a name="d7db3999"></a>

### 雙端支持

<a name="e303fb55"></a>

#### 支持Android海外內(nèi)熱門(mén)機(jī)型&iOS各大機(jī)型

![image.jpg](/img/remote/1460000020301161?w=720&h=448)

<a name="e6292905"></a>

### 原生體驗(yàn)

<a name="f814e2ed"></a>

#### 安卓使用體驗(yàn)就像手機(jī)在本地，使用Chrome去調(diào)試一樣... 還有連iOS的體驗(yàn)也是與Mac Safari的一樣，逆天了~~~

<a name="RGgAW"></a>

#### 本地使用devtools調(diào)試能支持的功能，巖鼠平臺(tái)幾乎都能支持，并且操作體驗(yàn)也是完全一致

<a name="c9e693d3"></a>

#### Andoird除了能使用Chrome調(diào)試之外，還能完美支持使用U4內(nèi)核的APP（例如UC瀏覽器、夸克、支付寶、淘寶、釘釘?shù)龋?/p>

<a name="a4f6e944"></a>

#### iOS支持Safari/Webview調(diào)試，也支持第三方App調(diào)試

| 功能 | Android | iOS |

| --- | --- | --- |

| Elements | √ | √ |

| Console | √ | √ |

| Sources | √ | √ |

| Network | √ | √ |

| Performance | √ | × |

| Memory | √ | 僅支持觸發(fā)GC |

| Application | √ | √ |

| Security | √ | × |

| Audits | √ | × |

<a name="be812d42"></a>

### 一鍵開(kāi)啟

![image.jpg](/img/remote/1460000020301162?w=700&h=236)

<a name="fb24c3ea"></a>

### 3種快捷方式，輕松打開(kāi)網(wǎng)頁(yè)

- 通過(guò)Scheme適配打開(kāi)

- 通過(guò)二維碼掃描打開(kāi)

- 直接選擇目標(biāo)APP打開(kāi)

<a name="13d77089"></a>

## 背后的秘密 -- 技術(shù)福利時(shí)間

巖鼠平臺(tái)如何實(shí)現(xiàn)web調(diào)試能力呢？

<a name="Android-1"></a>

### Android

Chrome調(diào)試的核心原理就是瀏覽器的內(nèi)核通過(guò)遠(yuǎn)程調(diào)試協(xié)議(remote debugging protocol)與前端Devtools的應(yīng)用程序建立websocket鏈接傳遞調(diào)試消息。而通過(guò)真機(jī)平臺(tái)調(diào)試的關(guān)鍵的就是如何發(fā)現(xiàn)調(diào)試服務(wù)，其實(shí)就是在真機(jī)平臺(tái)上實(shí)現(xiàn)一個(gè)瀏覽器中chrome://inspect的類似服務(wù)。整個(gè)實(shí)現(xiàn)邏輯如下：

<a name="22481c20"></a>

#### 建立連接

首先WEB內(nèi)核會(huì)建立一個(gè)unix的socket的web服務(wù)，這個(gè)服務(wù)只要建立了實(shí)際上都可以通過(guò)/proc/net/unix被查詢到。例如Chrome發(fā)布版本的socket名稱就是chrome_devtools_remote。因此通過(guò)grep關(guān)鍵詞就可以獲取到這臺(tái)手機(jī)上所有相關(guān)服務(wù)，然后通過(guò)adb forward實(shí)現(xiàn)轉(zhuǎn)發(fā)就可以讓這個(gè)web服務(wù)暴露到主機(jī)來(lái)進(jìn)行訪問(wèn)了。

<a name="20184aeb"></a>

#### 訪問(wèn)網(wǎng)頁(yè)

然后localhost:39222/json就可以訪問(wèn)到具體的網(wǎng)頁(yè)信息例如

```

[ {

? "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"

} ]

```

我們還可以通過(guò)localhost:39222/json/version獲取到應(yīng)用相關(guān)信息。

```

{

? "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": ""

}

```

<a name="7c8c2551"></a>

#### 對(duì)接服務(wù)

獲取到webSocketDebuggerurl和前端的devtools應(yīng)用程序進(jìn)行對(duì)接就可以達(dá)到開(kāi)啟Chrome調(diào)試的效果了。上面例子localhost:39222/json接口返回的devtoolsFrontendUrl就是拼接后瀏覽器訪問(wèn)的最終url了。

<a name="425adced"></a>

#### 兼容性問(wèn)題

做完整個(gè)對(duì)接似乎就完工了，但是代碼的世界從來(lái)沒(méi)有那么單純，我們還要解決一個(gè)版本兼容性問(wèn)題。Chrome到現(xiàn)在已經(jīng)有70多版本了，Devtools也演進(jìn)了很多，難免會(huì)有版本之間協(xié)議沖突問(wèn)題。因此可以看到j(luò)son中帶有對(duì)應(yīng)的devtool-frontend的版本信息，就是為了解決這種問(wèn)題。<br />我們發(fā)現(xiàn)從Chrome的48到71之間有上萬(wàn)的devtools-frontend版本。 所以為了解決數(shù)量大的問(wèn)題我們進(jìn)行了一定的精簡(jiǎn)，每個(gè)內(nèi)核版本選取一個(gè)對(duì)應(yīng)的該版本最新的devtools前端進(jìn)行對(duì)應(yīng)，這樣就把數(shù)量降下來(lái)了，當(dāng)然出現(xiàn)兼容性問(wèn)題的概率也提高了，如果大家在使用過(guò)程發(fā)現(xiàn)情況請(qǐng)多多反饋，我們會(huì)第一時(shí)間跟進(jìn)處理。

<a name="iOS-1"></a>

### iOS

首先iOS端方面，我們是沒(méi)有任何辦法去修改，其次，修改devtools去適配Safari Debug protocol的話，工作量也是巨大的，也不利于devtools后面的升級(jí)。<br />為此，我們思考的方案是像remotedebug-ios-webkit-adapter那樣，做一個(gè)中間層，把Safari Debug protocol與Chrome devtools protocol做一次正向與反向的轉(zhuǎn)換，從而達(dá)到我們的目的。

![屏幕快照 2019-09-02 10.36.04.png](/img/remote/1460000020301163?w=659&h=527)

通過(guò)實(shí)現(xiàn)協(xié)議轉(zhuǎn)換后，我們不僅能使用devtools去調(diào)試iOS中的網(wǎng)頁(yè)，甚至還可以支持到大部分基于Chrome Devtools ?Protocol的自動(dòng)化框架。

<a name="ec9fd1f9"></a>

#### iOS特性與第三方App支持

當(dāng)前iOS能否調(diào)試手機(jī)中的某個(gè)app，是依賴證書(shū)去做判斷的，如果手機(jī)中需要調(diào)試的app是developer證書(shū)，則Safari中會(huì)把所有可調(diào)試的網(wǎng)頁(yè)或者JSContext全部列出來(lái)，用戶選擇對(duì)應(yīng)的網(wǎng)頁(yè)或者JSContext調(diào)試.<br />而現(xiàn)在通過(guò)[巖鼠平臺(tái)](https://yanshu.effirst.com)的iPhone云真機(jī)做Web調(diào)試的話，用戶只需要上傳ipa后，我們都會(huì)使用developer證書(shū)重簽名，所以無(wú)論是Safari還是任何一個(gè)第三方的app，都可以直接使用巖鼠提供的Web調(diào)試.<br />調(diào)試依賴javascript的客戶端框架(Weex、React Native)，現(xiàn)在市面上iOS絕大部分依賴javascript的框架，JS引擎都是使用蘋(píng)果自導(dǎo)的JavascriptCore.framework。

<a name="Wltda"></a>

## 未來(lái)未來(lái)未來(lái)未來(lái)未~未!來(lái)!

![0DrRdy2E.gif](https://pic1.zhimg.com/v2-458925cbe44ba65d1d6f9c84c8f7f6a0_b.webp)

我們即將會(huì)上線腦殼疼解決方案 -- H5兼容性測(cè)試，只需要填寫(xiě)，寫(xiě)入url后，自動(dòng)化幫你跑千百種機(jī)型，通過(guò)AI圖像識(shí)別，幫你找出兼容性有問(wèn)題的機(jī)型和瀏覽器，讓你快速發(fā)現(xiàn)問(wèn)題，快速修復(fù). 敬請(qǐng)期待..

<a name="69fbd764"></a>

## 試用巖鼠平臺(tái)真機(jī)調(diào)試

由UC研發(fā)效能團(tuán)隊(duì)研發(fā)的巖鼠云設(shè)備平臺(tái)，正在進(jìn)行限量?jī)?nèi)測(cè)，加入交流群，可以獲得內(nèi)測(cè)資格，免費(fèi)試用！

**加入我們的釘釘交流群，隨時(shí)聯(lián)系我們**<br />反饋問(wèn)題、產(chǎn)品建議、技術(shù)交流、第一時(shí)間掌握福利信息，歡迎加入釘釘群討論<br />

<br />搜索群號(hào)：23106523 或者掃碼一下二維碼<br />![](/img/remote/1460000020301165?w=546&h=560)<br />

<br />

<br />**微信小助手**<br />合作、購(gòu)買(mǎi)服務(wù)等，請(qǐng)聯(lián)系小助手<br />搜索微信號(hào)：effirst-assistant?或者掃碼以下二維碼<br />![1566367826277-05d10306-6b3f-4e86-81ab-3252c2e65484.jpg](/img/remote/1460000020301166?w=574&h=564)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容