共计 3707 个字符，预计需要花费 10 分钟才能阅读完成。
前端小哥哥小姐姐们面对着浏览器兼容性与手机分辨率的各种坑，模拟器又重现不了，想找到对应的手机又比较困难，非常脑壳疼，极大的影响了开发的效率。
妹想到，现在有了岩鼠 Web 调试，不仅安卓能轻松地一键去调试手机中的网页，居然连 iOS 都支持 !! 而且真机也十分流畅，使用起来非常方便. 重点来了，现在内测阶段还能直接领礼包免费使用呢 !
究竟岩鼠是怎么去把这些平时操作十分复杂的功能都搬到 Web 上的呢??
曾经的我们 — 使用系统自带调试功能
Android
Chrome 开发者工具能基本模拟的手机环境，配上各种断点调试，一大利器。除此之外，Chrome 有一个调试真机的方法。
具体实现方式：通过 USB 数据线，将 Android 手机连接到电脑上，手机用 Chrome 浏览器打开页面，电脑上也打开 Chrome，输入 chrome://inspect/，进入调试模式，这个时候就能调试页面啦。
| 优点 | 1. 可以用 chrome 强大的调试工具，调试起来十分方便 |
|---|---|
| 缺点 | 1. 只支持 android 2. 只能用手机版 chrome（国内大部分 App 调试的功能都阉割掉了） 3. 调试起来非常复杂，而且对 PC 的 Chrome 版本有依赖 |
iOS
苹果的产品虽然封闭，但是其还是提供了一些暖心的小功能，方便开发者。
具体的调试方式：打开 iPhone 手机设置 设置 -> Safari -> 高级 -> 打开 Web 检查器，然后通过数据线将 iPhone 连接到 Mac，电脑和手机同时打开 Safari，电脑上 Safari 打开 开发 -iPhone，就能开始调试啦。
| 优点 | 1. 快，很流畅，不卡顿 |
|---|---|
| 缺点 | 1. 设备最贵 2. 只能限制在 iOS safari 下调试，app 内的 webview 就没办法了 |
前端小哥哥小姐姐心中 OS:
现在的我们 — 真机平台远程调试
移动端的真机调试，市面上有不少平台支持，但支持 WEB 调试的几乎没有。岩鼠平台恰好解决了这一问题。
在岩鼠平台上调试的效果如下：
双端支持
支持 Android 海外内热门机型 &iOS 各大机型
原生体验
安卓使用体验就像手机在本地，使用 Chrome 去调试一样 … 还有连 iOS 的体验也是与 Mac Safari 的一样，逆天了~~~
本地使用 devtools 调试能支持的功能，岩鼠平台几乎都能支持，并且操作体验也是完全一致
Andoird 除了能使用 Chrome 调试之外，还能完美支持使用 U4 内核的 APP（例如 UC 浏览器、夸克、支付宝、淘宝、钉钉等）
iOS 支持 Safari/Webview 调试，也支持第三方 App 调试
| 功能 | Android | iOS |
|---|---|---|
| Elements | √ | √ |
| Console | √ | √ |
| Sources | √ | √ |
| Network | √ | √ |
| Performance | √ | × |
| Memory | √ | 仅支持触发 GC |
| Application | √ | √ |
| Security | √ | × |
| Audits | √ | × |
一键开启
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://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": ""
}对接服务
获取到 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 后面的升级。
为此，我们思考的方案是像 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。
未来未来未来未来未~ 未! 来!
我们即将会上线脑壳疼解决方案 — H5 兼容性测试，只需要填写，写入 url 后，自动化帮你跑千百种机型，通过 AI 图像识别，帮你找出兼容性有问题的机型和浏览器，让你快速发现问题，快速修复. 敬请期待..
试用岩鼠平台真机调试
由 UC 研发效能团队研发的岩鼠云设备平台，正在进行限量内测，加入交流群，可以获得内测资格，免费试用！
加入我们的钉钉交流群，随时联系我们
反馈问题、产品建议、技术交流、第一时间掌握福利信息，欢迎加入钉钉群讨论
搜索群号：23106523 或者扫码一下二维码
微信小助手
合作、购买服务等，请联系小助手
搜索微信号：effirst-assistant 或者扫码以下二维码