移动版 Chrome 开发者工具

Paul Irish

针对移动设备进行开发应该与针对桌面设备进行开发一样简单。我们一直在努力改进 Chrome 开发者工具,以简化您的开发工作。现在,我们要推出一些能够显著改善移动网络开发的新功能。首先,我们介绍远程调试,然后介绍适当的移动设备模拟功能

将设备屏幕抓屏到桌面

到目前为止,远程调试时,您必须在设备和开发者工具之间来回切换。现在,抓屏会在开发者工具旁边显示设备的屏幕。能够看到它固然好,但与它互动会更好:

  • 对抓屏的点击会转换为点按,并在设备上触发适当的触摸事件。
  • 使用桌面指针检查设备上的元素
  • 在桌面键盘上输入内容 - 所有按键操作都会发送到设备。这大大节省了用拇指打字的时间。
  • 通过用指针快速滑动或直接在笔记本电脑触控板上滑动来滚动页面。

有关抓屏的完整文档涵盖了所有这些以及更多功能,例如发送双指张合缩放手势。需要使用 Android 版 Chrome Beta 版 (m32)。

轻松进行远程调试

18 个月前,Chrome 为 WebKit 浏览器引入了适当的远程调试功能,但如果您当时试用过,则必须处理 400MB 的 Android SDK 下载、将 adb 二进制文件添加到您的 $PATH 以及一些神奇的命令行咒语。

现在,我们很高兴地宣布,你可以忘记这些了。Chrome 现在能够发现已连接 USB 的设备并与之通信。我们在 Chrome 中直接通过 USB 实现了 adb 协议,方便您轻松前往 Menu > Tools > Inspect Devices 并立即启动远程调试会话。

发现已连接 USB 的设备。

此功能在所有平台(包括 Chrome 操作系统)中都能运行良好,但请注意,在 Windows 上,您需要先安装合适的 USB 驱动程序才能与设备通信。如果您之前从未尝试过,则还需要在设备上启用 USB 调试,并确认您使用的是 Android 版 Chrome 浏览器(测试版)。阅读完整文档

本地项目的端口转发

您是在 localhost:8000 上开发,但您的手机无法连接到该地址。因此,我们将端口转发直接添加到了远程调试工作流中。现在,无需任何隧道技术,即可轻松处理完整项目。在 about:inspect 上点击进入“端口转发”以设置您想使用的端口,如果端口允许,这些端口会以绿色亮起。

端口转发

移动设备模拟

您并不总是拥有需要测试兼容性的设备,对吧?虽然对真实设备进行远程调试将会为您提供最佳的性能和触摸体验,但您现在可以在桌面设备上模拟许多设备特性,从而节省时间并加快迭代循环。

通过完全触摸事件模拟来模拟屏幕尺寸、devicePixelRatio 和 <meta viewport>

如果你看过以前的“设备指标”功能,现在可用的功能就是一次巨大的升级。该团队不遗余力地努力,使这个新的移动模拟功能能够让您在真实设备上看到的效果能够近乎逼真。例如,WebKit 浏览器维护着一种复杂的文本自动调整算法,实际上,每部设备都有一个特定的“软硬件系数”来自动调整文本大小,该系数会发生变化,以确保文本清晰可辨。在模拟模式下,您可以确认是否正在应用此行为并查看结果。

设备像素比

到目前为止,我们几乎不可能看到高 DPI 设备在低 DPI 设备上显示的内容。现在,开发者工具中的 dPR 模拟会调整您的视图,让您放大到更深的 DPI 场景。此外,window.devicePixelRatio@media (-webkit-min-device-pixel-ratio: 2)image-set( url(pic2x.jpg) 2x, …) 等会反映您的设置,让您可以查看应用的调整情况,包括加载不同的 dpi 专用资源。

设备像素比较小。

设备模拟并不仅限于浏览器功能或 bug。因此,在模拟 iOS 时,WebGL 仍会正常运行,您不会遇到 iOS 5 屏幕方向缩放 bug。要体验这种变化,请使用设备。

正确模拟 <meta viewport>(和 @viewport

以前,测试 width=device-widthminimum-scale:1.0 的行为一直是仅限设备的游戏。现在,您可以快速试用不同的视口并观察它们的渲染效果。

触摸事件模拟

模拟触摸屏设置可确保系统将您的点击解读为 touchstart 等。此外,可使用缩放、滚动和平移等合成事件。要通过双指张合进行缩放,只需shift+拖动或shift+滚动即可放大内容。您可以很清楚地看到内容在超出视口时缩放。

滚动模拟。

最后,利用用户代理欺骗(在请求标头和 window.navigator 级别)、地理定位和屏幕方向模拟等备用行为,您可以探索设备的全部功能。

设备预设

通过模拟预设,您可以选择手机或平板电脑,并获得针对该设备的正确屏幕尺寸、dPR、UA,以及模拟完全触摸事件和视口。你可以尝试特定的预设,也可以轻松逐个调整这些特性。

设备预设

请访问 devtools.chrome.com,查看有关使用开发者工具进行移动模拟的完整文档

演示

如需通过全面演示所有这些功能的实际运用,请观看我在 Chrome 开发者峰会上关于移动版开发者工具的演讲(时长 23 分钟):