mPaas里使用H5无线调试

2022-04-12 07:59:32

一背景

目前主流的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真机云测平台，支持远程真机测试，远程无线调试，也可以解决多机器的兼容性问题

码农公寓

一 背景

二 无线调试技术