Chrome DevTools 远程调试安卓网页的原理
作为前端开发,我们每天都会用 Chrome DevTools 调试 Chrome 的网页,但其实它还可以远程调试安卓手机的网页。
那 Chrome Devtools 如何远程调试安卓网页呢?它的实现原理是什么?
今天我们就来了解一下:
远程调试安卓网页
用数据线把安卓手机和电脑连接起来,在手机设置里打开 USB 调试:
然后在 chrome 打开 chrome://inspect 页面,勾选 Discover USB devices(默认是勾选的):
这时候下面就会出现一个提示:请在设备上接受 debugging 会话
在手机上点击确定,就会建立调试会话:
下面就会列出所有可以调试的网页:
浏览器里的网页,或者 APP 调试包的 webview 的网页都会列出来。
点击 inspect 就可以调试了:
可以审查元素:
可以打断点:
也可以用 Performance 分析性能:
各种调试 PC 网页的功能基本都支持。这样就可以愉快的调试安卓的移动端网页了。
不过这个过程你可能会遇到这样的问题,打开的窗口是空白的或者是 404:
这是因为调试的目标可能是任意 chrome 版本,那么 Chrome Devtools 自然也要用相应的版本才行,所以就需要动态下载。
而动态下载的 devtools 网页是在 google 域名下的,需要科学上网才行。
科学上网之后,就可以正常的下载 Chrome DevTools 来做调试,也就不会白屏或 404 了。
但也不是每次都要科学上网,一个调试目标只需要下载一次 Chrome Devtools 的代码,之后就可以一直用了。
我们了解了 Chrome DevTools 怎么调试安卓的网页,那它的原理是什么呢?
Chrome DevTools 的原理
Chrome DevTools 被设计成了和 Chrome 分离的架构,两者之间通过 WebSocket 通信,设计了专门的通信协议:Chrome DevTools Protocol。
这样只要实现对接 CDP 协议的 ws 服务端,就可以用 Chrome DevTools 来调试,所以 Chrome DevTools 可以用来调试浏览器的网页、调试 Node.js,调试 Electron 等。
那自然也就可以远程调试安卓手机的网页了,只要开启了 USB 调试,那手机和电脑就可以做网络通信,从而实现基于 CDP 的调试。
这个 CDP 的调试协议是 json 格式的,如果想看它传输了什么也是可以的:
下载金丝雀版本的 chrome:
在 Chrome DevTools 的 more tools 里打开 Protocol Monitor 面板:
然后你就可以在 Protocol Monitor 面板里看到所有的 CDP 协议的数据交互了:
这就是调试的实现原理。
总结
Chrome DevTools 和 Chrome 是分离的架构,两者通过 WebSocket 通信,通信协议是 Chrome DevTools Protocol,可以在金丝雀版本的 Protocol Monitor 里看到 CDP 的数据交互。
因为这样的实现原理,Chrome DevTools 可以调试很多目标,其中就包括 USB 设备。
打开 USB 调试之后,在 chrome://inspect 页面就可以看到可调试的网页了,点击对应的网页就可以调试。
要注意的是调试的目标浏览器要和用的 Chrome DevTools 版本一一对应才行,所以第一次调试会先下载 Chrome DevTools,这需要访问 google 的域名,如果没有科学上网,会有白屏和 404 的问题。
理解了调试的原理,Chrome DevTools 调试安卓网页的流程,就可以愉快的远程调试安卓手机的网页了。
相关文章
- java商城小程序收藏
- 巴士团小程序
- 微信小程序this作用域
- 从零开始搞监控系统(5)——小程序监控
- Pyinstaller打包配置UPX缩小程序包大小,打包时出现UPX is not available处理方法
- 如何将小程序游戏引入自有APP?(Android篇)
- 超级App成为小程序流量新的变现突破口
- 小程序小游戏怎样实现在自己的App里上架运行?
- Vue 网络请求模块封装 (axios)
- 微信小程序中的支付宝支付
- 小程序中商家入驻提醒、新订单提醒
- 用这个库 3 分钟实现让你满意的表格功能:Bootstrap-Table
- 利用Frida绕过Android App(apk)的SSL Pinning
- Flask 框架:运用Axios库实现前后端交互
- 搭建Typecho小程序(QQ微信通用)
- Drozer-Android安全测试
- 个推支持小程序消息推送,助力开发者实现用户高触达、高转化
- android 终端模拟器
- android 系统浏览器 源码-Android 最最最简单的浏览器代码
- Android画中画(PIP)模式使用