文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Chrome DevTools 远程调试安卓网页的原理

2024-12-01 16:42

关注

那 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 调试安卓网页的流程,就可以愉快的远程调试安卓手机的网页了。

来源:神光的编程秘籍内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯