chrome android远程调试工作原理

最新推荐文章于 2024-07-23 13:53:30 发布

FserSuN

最新推荐文章于 2024-07-23 13:53:30 发布

阅读量1k

点赞数

分类专栏： chrome

原文链接：https://www.girish.in/how-remote-debugging-works-in-chrome/

版权

chrome 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

注意⚠️：本文为个人学习原理所翻译的文章，文中介绍的方法还未实践验证，不保证有效可用。目前仅进行了原理学习，后续会补充实际操作过程中遇到的问题。

chrome android远程调试工作原理

Chrome Android 允许通过桌面对web页面进行远程调试。调试使用了devtools-protocol协议[1]。本文介绍桌面chrome与android chrome间是如何建立连接。

android手机在开发者模式下并启用了usb调试后，chrome android允许通过unix domain sockets对chrome进行调试。可以通过socket进行连接，获取打开的页面列表。每个页面都有
一个调试url，可以用来调试这个页面。

查看unix domain socket

找到unix domain socket/proc/net/unix 包含了unix domain sockets列表。Chrome 通过_devtools_remote为名称创建sockets(参见 devtools_adb_bridge.cc[2])

可以通过下列命令查看：

adb shell cat /proc/shell/unix | grep _devtools_remote

输出样式如下：

00000000: 00000002 00000000 00010000 0001 01 107909 @chrome_devtools_remote_8985
00000000: 00000002 00000000 00010000 0001 01 87977 @chrome_devtools_remote

建立adb转发

接着连接abstract socket并找到打开页面的列表。通过下列adb命令建立转发。

adb forward tcp:4000 localabstract:chrome_devtools_remote_8985

端口4000是随机选择的，也可是其它端口。上述的命令使adb通过usb 将localhost，tcp端口为4000的请求转发到名为chrome_devtools_remote_8985 abstract socket上。

获取页面列表

接着可以连接到4000端口获取页面列表。

curl localhost:4000/json

可以看到如下输出

[ {
   "description": "",
   "devtoolsFrontendUrl": "http://chrome-devtools-frontend.appspot.com/serve_rev/@165554/devtools.html?ws=localhost:4000/devtools/page/0",
   "id": "0",
   "title": "https://www.google.com/url?sa=t&source=web&rct=j&ei=aEPpUq3iIMrFoATNqYDwDQ&url=http://m.youtube.com/watch%3Fv%3DoHg5SJYRHA0&cd=3&ved=0CC8QtwIwAg&usg=AFQjCNE6GowB7mL72VHPMCbZco5bTpnXbA&sig2=GBopoUdf_D-kofy7N2c80w",
   "type": "page",
   "url": "https://www.google.com/url?sa=t&source=web&rct=j&ei=aEPpUq3iIMrFoATNqYDwDQ&url=http://m.youtube.com/watch%3Fv%3DoHg5SJYRHA0&cd=3&ved=0CC8QtwIwAg&usg=AFQjCNE6GowB7mL72VHPMCbZco5bTpnXbA&sig2=GBopoUdf_D-kofy7N2c80w",
   "webSocketDebuggerUrl": "ws://localhost:4000/devtools/page/0"
} ]

通过webSocketDebuggerUrl使用remote debug protocol与页面通信。

总结

通过adb与手机chrome建立连接，并通过chrome devtool protocol实现调试。

原文地址

https://www.girish.in/how-remote-debugging-works-in-chrome/

参考资料

[1]https://chromedevtools.github.io/devtools-protocol/
[2]https://chromium.googlesource.com/chromium/chromium/+/c8916317b5ebe621b2deaac26eabac21da8d6329/chrome/browser/devtools/devtools_adb_bridge.cc
[3]https://stackoverflow.com/questions/20263821/remote-webkit-debugging-with-android-4-4-webviews/20282005#20282005