移动端WEB真机调试全攻略-阿里云开发者社区

开发者社区> 阿里UC研发效能> 正文

移动端WEB真机调试全攻略

简介: H5前端开发者的一大困扰就是网页兼容性问题,而前端调试也有多种方法,包括模拟器,自己连接真机,云真机等。而岩鼠正式提供了完美的云真机方案,赋能前端开发者。

H5前端开发者的一大困扰就是网页兼容性问题,在自己手机上已经完美完成了需求之后,一到验收或者上线,就出现各种兼容引起的bug,要解决还特别曲折,不仅要探索Android和iOS手机的不同调试方式,还要支持在不同浏览器或者APP上调试,极大的影响了开发的效率。

虽然我们也可以通过模拟器进行开发调试,但模拟终究是模拟,在某些场景下真机还是不可或缺,尤其是特定机型版本的问题。

一般情况下,真机Web调试要怎么做呢?

系统自带调试功能

Android

Chrome开发者工具能基本模拟的手机环境,配上各种断点调试,一大利器。除此之外,Chrome有一个调试真机的方法。

具体实现方式:通过USB数据线,将Android手机连接到电脑上,手机用Chrome浏览器打开页面,电脑上也打开Chrome,输入chrome://inspect/ ,进入调试模式,这个时候就能调试页面啦。

优点 可以用chrome强大的调试工具,调试起来十分方便
缺点 1.只支持android;2.只能用手机版chrome(国内大部分App调试的功能都阉割掉了);3.调试起来非常复杂,而且对PC的Chrome版本有依赖

iOS

苹果的产品虽然封闭,但是其还是提供了一些暖心的小功能,方便开发者。

具体的调试方式:打开iPhone手机设置设置 -> Safari -> 高级 -> 打开Web检查器,然后通过数据线将iPhone连接到Mac,电脑和手机同时打开Safari,电脑上Safari打开 开发-iPhone,就能开始调试啦。

优点 快,很流畅,不卡顿
缺点 1.设备最贵;2.只能限制在iOS safari下调试,app内的webview就没办法了

真机平台远程调试

移动端的真机调试,市面上有不少平台支持,但支持WEB调试的几乎没有。岩鼠平台恰好解决了这一问题。
11.gif

双端支持

支持Android海外内热门机型&iOS各大机型的WEB调试。
12.png

原生体验

本地使用devtools调试能支持的功能,岩鼠平台几乎都能支持,并且操作体验也是完全一致。

Andoird除了能使用Chrome调试之外,还能完美支持使用U4内核的APP(例如UC浏览器、夸克、支付宝、淘宝、钉钉等)。
iOS支持Safari/Webview调试, 也支持第三方App调试。

image.png

一键开启

13.png

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://.../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)...",
"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后面的升级。
14.png

为此,我们思考的方案是像 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。

免费体验岩鼠WEB调试

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

分享研发效能领域相关优秀实践,技术分享,产品信息

官方博客
官网链接