Chrome远程调试Android异常：调试界面损坏求助

嘿，我之前帮朋友排查过几乎一模一样的问题，结合你用的Chrome 66这个比较旧的版本，大概率是WebView和Chrome DevTools版本不兼容，或者模拟器的渲染设置干扰了DevTools界面，下面是具体的排查和解决步骤：

一、核心原因分析 #

Chrome的调试工具（DevTools）和Android WebView的调试是强依赖版本匹配的——你用的Chrome 66是2018年的老版本，但模拟器里的Android System WebView可能已经随系统更新到了更高版本，版本差得太多就会导致DevTools的UI渲染逻辑冲突，出现你截图里的错乱情况。另外，模拟器的硬件加速也可能给旧版Chrome的DevTools添乱。

二、具体解决办法 #

1. 让WebView和Chrome版本完全对齐 #

• 先打开模拟器的「设置」→「应用管理」→找到「Android System WebView」，查看它的版本号（比如是66.xxx还是更高）。
• 去Chrome官方的版本归档渠道下载对应版本的Chrome稳定版（比如WebView是66.xxx就装Chrome 66.xxx），确保两者版本完全一致。别用Canary了，尝鲜版和旧WebView的兼容性本来就差。

2. 关掉模拟器的硬件加速 #

• 模拟器里打开「设置」→「开发者选项」→「硬件加速渲染」，把「强制GPU渲染」关掉。
• 或者启动模拟器时直接加命令行参数禁用GPU：

  emulator -avd 你的模拟器名称 -gpu off
  

  旧版Chrome对新模拟器的GPU加速支持不完善，很容易搞乱DevTools的UI。

3. 重置Chrome DevTools的配置 #

• 打开Chrome，输入chrome://settings/resetProfileSettings，选择「重置设置」，把DevTools的缓存和自定义配置清掉。
• 也可以手动删除配置文件：Mac上路径是~/Library/Application Support/Google/Chrome/Default/DevTools，删掉这个文件夹再重启Chrome试试。

4. 检查Cordova的WebView配置 #

• 打开项目的config.xml，看看有没有自定义WebView的特殊设置（比如除了WebView.setWebContentsDebuggingEnabled之外的配置），先把这些注释掉，重新构建应用再调试。
• 另外，Cordova的Android平台版本也可能有影响，如果用的是太新的Cordova Android 9+，试试降级到8.x版本，和旧Chrome的适配会更好。

5. 换个低版本的Android模拟器 #

• 试试创建Android 7.1或者8.0的模拟器，这些版本的WebView版本更接近Chrome 66，兼容性会好很多。

如果以上方法都不管用，建议尽量升级Chrome到较新版本吧——毕竟Chrome 66早就停止维护了，很多兼容性问题官方不会再修复，升级后再对应匹配WebView版本，调试体验会顺畅很多。

内容的提问来源于stack exchange，提问作者Tobias