前端小哥哥小姐姐們面對著瀏覽器兼容性與手機分辨率的各種坑苫幢，模擬器又重現(xiàn)不了职员，想找到對應的手機又比較困難碧信，非常腦殼疼赊琳，極大的影響了開發(fā)的效率。<br />妹想到砰碴，現(xiàn)在有了[巖鼠](https://yanshu.effirst.com)Web調(diào)試躏筏，不僅安卓能輕松地一鍵去調(diào)試手機中的網(wǎng)頁，居然連iOS都支持~~!!而且真機也十分流暢呈枉，使用起來非常方便.?**重點來了趁尼，現(xiàn)在內(nèi)測階段還能直接領禮包免費使用呢~~!**<br />究竟[巖鼠](https://yanshu.effirst.com/)是怎么去把這些平時操作十分復雜的功能都搬到Web上的呢??
<a name="4666b912"></a>
## 曾經(jīng)的我們 -- 使用系統(tǒng)自帶調(diào)試功能
<a name="Android"></a>
### Android
Chrome開發(fā)者工具能基本模擬的手機環(huán)境，配上各種斷點調(diào)試猖辫，一大利器酥泞。除此之外，Chrome有一個調(diào)試真機的方法啃憎。<br />具體實現(xiàn)方式：通過USB數(shù)據(jù)線芝囤，將Android手機連接到電腦上，手機用Chrome瀏覽器打開頁面，電腦上也打開Chrome凡人，輸入chrome://inspect/ 名党，進入調(diào)試模式，這個時候就能調(diào)試頁面啦挠轴。<br />
| 優(yōu)點 | 1.可以用chrome強大的調(diào)試工具，調(diào)試起來十分方便 |
| --- | --- |
| 缺點 | 1.只支持android<br />2.只能用手機版chrome（國內(nèi)大部分App調(diào)試的功能都閹割掉了）<br />3.調(diào)試起來非常復雜耳幢，而且對PC的Chrome版本有依賴 |
<a name="iOS"></a>
### iOS
蘋果的產(chǎn)品雖然封閉岸晦，但是其還是提供了一些暖心的小功能，方便開發(fā)者睛藻。<br />具體的調(diào)試方式：打開iPhone手機設置**設置**?->?**Safari**?->?**高級**?-> 打開Web檢查器启上，然后通過數(shù)據(jù)線將iPhone連接到Mac，電腦和手機同時打開Safari店印，電腦上Safari打開 開發(fā)-iPhone冈在，就能開始調(diào)試啦。<br />
| 優(yōu)點 | 1.快按摘，很流暢包券，不卡頓 |
| --- | --- |
| 缺點 | 1.設備最貴<br />2.只能限制在iOS safari下調(diào)試，app內(nèi)的webview就沒辦法了 |
<a name="EHRzr"></a>
#### 前端小哥哥小姐姐心中OS:
<br />
<a name="89f6db24"></a>
## 現(xiàn)在的我們 -- 真機平臺遠程調(diào)試
移動端的真機調(diào)試炫贤，市面上有不少平臺支持溅固，但支持WEB調(diào)試的幾乎沒有。[巖鼠平臺](https://yanshu.effirst.com)恰好解決了這一問題兰珍。<br />在巖鼠平臺上調(diào)試的效果如下：<br />
<a name="d7db3999"></a>
### 雙端支持
<a name="e303fb55"></a>
#### 支持Android海外內(nèi)熱門機型&iOS各大機型
<a name="e6292905"></a>
### 原生體驗
<a name="f814e2ed"></a>
#### 安卓使用體驗就像手機在本地侍郭，使用Chrome去調(diào)試一樣... 還有連iOS的體驗也是與Mac Safari的一樣，逆天了~~~
<a name="RGgAW"></a>
#### 本地使用devtools調(diào)試能支持的功能掠河，巖鼠平臺幾乎都能支持亮元，并且操作體驗也是完全一致
<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>
### 一鍵開啟
<a name="fb24c3ea"></a>
### 3種快捷方式，輕松打開網(wǎng)頁
- 通過Scheme適配打開
- 通過二維碼掃描打開
- 直接選擇目標APP打開
<a name="13d77089"></a>
## 背后的秘密 -- 技術福利時間
巖鼠平臺如何實現(xiàn)web調(diào)試能力呢望艺？
<a name="Android-1"></a>
### Android
Chrome調(diào)試的核心原理就是瀏覽器的內(nèi)核通過遠程調(diào)試協(xié)議(remote debugging protocol)與前端Devtools的應用程序建立websocket鏈接傳遞調(diào)試消息苛秕。而通過真機平臺調(diào)試的關鍵的就是如何發(fā)現(xiàn)調(diào)試服務，其實就是在真機平臺上實現(xiàn)一個瀏覽器中chrome://inspect的類似服務找默。整個實現(xiàn)邏輯如下：
<a name="22481c20"></a>
#### 建立連接
首先WEB內(nèi)核會建立一個unix的socket的web服務艇劫，這個服務只要建立了實際上都可以通過/proc/net/unix被查詢到。例如Chrome發(fā)布版本的socket名稱就是chrome_devtools_remote惩激。因此通過grep關鍵詞就可以獲取到這臺手機上所有相關服務店煞，然后通過adb forward實現(xiàn)轉(zhuǎn)發(fā)就可以讓這個web服務暴露到主機來進行訪問了蟹演。
<a name="20184aeb"></a>
#### 訪問網(wǎng)頁
然后localhost:39222/json就可以訪問到具體的網(wǎng)頁信息例如
```
[ {
? "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": ""
}
```
<a name="7c8c2551"></a>
#### 對接服務
獲取到webSocketDebuggerurl和前端的devtools應用程序進行對接就可以達到開啟Chrome調(diào)試的效果了顷蟀。上面例子localhost:39222/json接口返回的devtoolsFrontendUrl就是拼接后瀏覽器訪問的最終url了酒请。
<a name="425adced"></a>
#### 兼容性問題
做完整個對接似乎就完工了，但是代碼的世界從來沒有那么單純鸣个，我們還要解決一個版本兼容性問題羞反。Chrome到現(xiàn)在已經(jīng)有70多版本了，Devtools也演進了很多囤萤，難免會有版本之間協(xié)議沖突問題昼窗。因此可以看到json中帶有對應的devtool-frontend的版本信息，就是為了解決這種問題涛舍。<br />我們發(fā)現(xiàn)從Chrome的48到71之間有上萬的devtools-frontend版本澄惊。 所以為了解決數(shù)量大的問題我們進行了一定的精簡，每個內(nèi)核版本選取一個對應的該版本最新的devtools前端進行對應富雅，這樣就把數(shù)量降下來了掸驱，當然出現(xiàn)兼容性問題的概率也提高了，如果大家在使用過程發(fā)現(xiàn)情況請多多反饋吹榴，我們會第一時間跟進處理亭敢。
<a name="iOS-1"></a>
### iOS
首先iOS端方面，我們是沒有任何辦法去修改图筹，其次帅刀，修改devtools去適配Safari Debug protocol的話，工作量也是巨大的远剩，也不利于devtools后面的升級扣溺。<br />為此，我們思考的方案是像remotedebug-ios-webkit-adapter那樣瓜晤，做一個中間層锥余，把Safari Debug protocol與Chrome devtools protocol做一次正向與反向的轉(zhuǎn)換，從而達到我們的目的痢掠。
通過實現(xiàn)協(xié)議轉(zhuǎn)換后驱犹，我們不僅能使用devtools去調(diào)試iOS中的網(wǎng)頁，甚至還可以支持到大部分基于Chrome Devtools ?Protocol的自動化框架足画。
<a name="ec9fd1f9"></a>
#### iOS特性與第三方App支持
當前iOS能否調(diào)試手機中的某個app雄驹，是依賴證書去做判斷的，如果手機中需要調(diào)試的app是developer證書淹辞，則Safari中會把所有可調(diào)試的網(wǎng)頁或者JSContext全部列出來医舆，用戶選擇對應的網(wǎng)頁或者JSContext調(diào)試.<br />而現(xiàn)在通過[巖鼠平臺](https://yanshu.effirst.com)的iPhone云真機做Web調(diào)試的話，用戶只需要上傳ipa后，我們都會使用developer證書重簽名蔬将，所以無論是Safari還是任何一個第三方的app爷速，都可以直接使用巖鼠提供的Web調(diào)試.<br />調(diào)試依賴javascript的客戶端框架(Weex、React Native)霞怀，現(xiàn)在市面上iOS絕大部分依賴javascript的框架惫东，JS引擎都是使用蘋果自導的JavascriptCore.framework。
<a name="Wltda"></a>
## 未來未來未來未來未~未!來!
我們即將會上線腦殼疼解決方案 -- H5兼容性測試里烦，只需要填寫凿蒜，寫入url后，自動化幫你跑千百種機型胁黑，通過AI圖像識別，幫你找出兼容性有問題的機型和瀏覽器州泊，讓你快速發(fā)現(xiàn)問題丧蘸，快速修復. 敬請期待..
<a name="69fbd764"></a>
## 試用巖鼠平臺真機調(diào)試
由UC研發(fā)效能團隊研發(fā)的巖鼠云設備平臺，正在進行限量內(nèi)測遥皂，加入交流群力喷，可以獲得內(nèi)測資格，免費試用演训！
**加入我們的釘釘交流群弟孟，隨時聯(lián)系我們**<br />反饋問題、產(chǎn)品建議样悟、技術交流拂募、第一時間掌握福利信息，歡迎加入釘釘群討論<br />
<br />搜索群號：23106523 或者掃碼一下二維碼<br /><br />
<br />
<br />**微信小助手**<br />合作窟她、購買服務等陈症，請聯(lián)系小助手<br />搜索微信號：effirst-assistant?或者掃碼以下二維碼<br />
