Chrome 65开发者工具设备模式窗口裁剪显示异常问题咨询

Hey，我之前在Chrome 65版本里碰到过一模一样的设备模式bug，调试移动端页面的时候超闹心！给你几个亲测有效的解决方案：

• 重置开发者工具布局
  大概率是DevTools的布局配置缓存炸了。操作很简单：打开开发者工具后按F1调出设置面板，拉到最底部点击「恢复默认值并重新加载」，等DevTools重启后再切设备模式试试。我当时就是这个操作搞定的，旧版本Chrome特别容易出现这类布局异常。

• 关闭GPU硬件加速
  Chrome 65的GPU渲染和设备模式存在兼容性问题。路径是：Chrome菜单 → 设置 → 高级 → 系统 → 取消勾选「使用硬件加速模式（如果可用）」，然后重启Chrome。虽然会损失一点性能，但能直接解决渲染区域变白的问题，临时测试完全够用。

• 手动修正设备视图的缩放与分辨率
  有时候是设备模式的缩放参数出错了。切换到设备模式后，看看顶部工具栏的缩放滑块，拉回100%，或者右键点击设备视图区域选择「重置缩放」。如果还不行，试试手动输入自定义分辨率（比如375x667模拟iPhone SE），别用预设的设备选项，说不定能绕过bug。

• 备选：临时使用新版Chrome测试
  这个bug在Chrome 66及以后的版本已经被官方修复了，如果上面的方法都没用，你可以临时装个新版Chrome来做设备模式测试。当然优先试试前面的本地修复，毕竟升级浏览器可能会影响其他工作环境。

小提示：长期做移动端开发的话，还是建议尽快升级到较新的稳定版Chrome，旧版本的这类兼容性bug真的挺多的。

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