Skip to content
文章目录

pc端调试移动端的chrome浏览器

重要的前置说明

  • 请尽量用原装线,不然可能你一切配置正常,但 pc 浏览器中还是没法探测到手机浏览器
  • 要先使得开发者模式可见
  • 要启用开发者选项
  • 启用 USB 调试
  • USB 配置要选择WTP(媒体传输协议)
  • 默认 USB 配置选择文件传输/Android Auto
  • PC 端浏览器版本要和移动端浏览器版本保持一致(移动端 chrome 下载有点困难,要有科学). 因为如果手机端和 PC 端 chrome 版本不一致,chrome 内部需要下载对应的devtools,而此时需要访问某些外部网络,而如果 PC 端和移动端 chrome 版本一致,则无需再额外下载devtools

使开发者选项可见

以 oppo 平板为例:

设置 --> 关于本机 --> 版本信息 --> 版本号 ,连续点击版本号, 直至让你输入锁屏密码,然后开发模式就处于可见状态了

设置 USB 调试

以 oppo 平板为例:

系统设置 --> 开发者选项

  • 启用 开发者选项
  • 启用 USB 调试(此时可能会出现一个弹窗询问,选择确定
  • 启用 无线调试
  • 默认USB配置配置为文件传输/Android Auto
  • 选择USB配置配置为MTP(媒体传输协议)

打开手机chrome浏览器

手机chrome浏览器中打开需要调试的网页

PC chrome 浏览器

地址输入chrome://inspect/#devices(此时手机/平板中可能会出现一个弹窗询问,选择确认)

如果探测到了手机/平板的chrome浏览器则点击inspect就可以调试了(此时有可能出现一个 404 错误,出现这个错误的原因是因为手机 chrome 版本与 PC 的 chrome 版本不一致,需要保持相同的chrome版本, 或者 PC Chrome 版本比移动端 Chrome 版本高一点点),如果此时没有探测到手机/平板的chrome浏览器, 则可以重新拔插USB连接线,重新插入 USB 连线之后,会有个询问窗,选择传输文件/Android Auto即可

404 错误

404 错误

USB 调试连接成功之后的效果

USB 调试连接成功之后的效果

附加:如果是调试webview

必须先启用 WebView 调试。要启用 WebView 调试,需要调用 WebView 类的静态方法 setWebContentsDebuggingEnabled, 其他配置同上面的内容

js
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
  WebView.setWebContentsDebuggingEnabled(true)
}

使用 Chrome 的 WebADB 工具来调试手机

参考资料

远程调试 Android WebViews

chrome inspect 远程调试 H5

chrome 调试手机网页

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

Chrome 浏览器远程调试