一 背景
目前主流的H5調試還都是通過手機插線連結電腦進行調試，以Android為例，通過USB連結電腦，然後通過chrome://inspect/#devices實作手機的遠端調試。但是存在一些問題，主要展現在
1：便利性：裝置需要安裝ADB相關調試環境，需要一定的Android開發背景
2：可用性：Chrome調試經常需要翻牆更新，不然打開白屏
3：穩定性：USB連結容易斷，穩定性差
4：不支援無線：通過USB的方式，需要連線，不能遠端調試
這裡我介紹下一些常用的無線調試技術方案 。
二 無線調試技術
1. vorlon（面向開發）
Vorlon是微軟出品的一個開源的、可擴充的、平台無關的JavaScript遠端調試工具。采用Node.js和socket.io技術。使用它，我們可以通過浏覽器遠端inspect、debug、test任何裝置上的js代碼。官網：
連結，github：
。
首先，我們需要通過npm安裝Vorlon的服務端控制程式。
npm i -g vorlon
安裝成功之後，通過一個簡單的指令即可啟動Vorlon服務。
vorlon
啟動成功後，如果是在本機打開的服務，則在浏覽器端打開
http://localhost:1337即可看到Vorlon的控制台。
這個時候，隻需要待調試頁面端引用下面的腳步，就可以實作調試，
效果如下：
2. Eruda（面向測試）
Eruda 是一個專為手機網頁前端設計的調試面闆，類似 DevTools 的迷你版，其主要功能包括：捕獲 console 日志、檢查元素狀态、捕獲XHR請求、顯示本地存儲和 Cookie 資訊等。位址：
，
主要面向測試同學進行日常測試問題回報。
引用方式：
eruda.init();
三 volor的進階用法
1. 功能
1.1 console: 檢視console日志, 執行js
1.2 modernizr: 檢視目前支援的和不支援的一些api特性
1.3 DOM Explorer: dom樹檢視和修改
1.4 Object Explorer：展示目前的js對象樹
1.5 Best Practices: web開發的一些建議
1.6 Network Monitor：網絡監控
1.7 Resources Explorer: storage和cookie檢視
1.8 Device Information:裝置資訊檢視
四 mPaas注入js腳步的能力
mPaas的H5容器提供了注入H5頁面js标簽的能力，支援多元度正則條件比對注入js腳步。
1. 原理
1.1 注入時機：
以Android為例，是在webview回調onReceivedTitle和onPageFinished時候，執行腳步注入
1.2 注入代碼：
String js = "var script,head=document.head||document.documentElement;script=document.createElement(\"script\");" +
"script.async=true;script.charset=\"UTF-8\";" +
"script.src=\"" + dynamicScript + "\";" +
getCrossOrigin(dynamicScript) +
"head.insertBefore(script,head.firstChild);";
2. 注入的其他場景
- 通用能力輔助：比如分享的頁面分享文案抓取js腳步
- 全局埋點：記錄所有頁面通用埋點
- 安全管控：重寫某些危險api，解決安全漏洞
3. 使用方法
開關：h5_dsRules
配置格式：支援配置多條，以url為key，配置内容為正則比對。
Android
在 Android 工程的
assets/config
路徑下，建立
custom_config.json
檔案，并在檔案内填入以下内容
[
{
"value": "[{\"http://30.89.185.180:1337/vorlon.js\":[{\"appId\":\".*\"}]}]",
"key": "h5_dsRules"
}
] iOS
// DTFrameworkInterface 增加協定聲明
@interface DTFrameworkInterface ()
@end
// DTFrameworkInterface 中重寫 nebulaCustomConfig
- (NSDictionary *)nebulaCustomConfig
{
//
return @{@"h5_dsRules":@"[{\"http://30.89.185.180:1337/vorlon.js\":[{\"appId\":\".*\"}]}]"};
}
// 在 - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions 中調用。
// 啟用配置
[MPNebulaAdapterInterface shareInstance].configDelegate = self; 五 mPaas真機雲測
同時mPaas真機雲測平台，支援遠端真機測試，遠端無線調試，也可以解決多機器的相容性問題