移动版 Chrome 开发者工具

针对移动设备的开发应像针对桌面设备的开发一样简单。我们一直致力于开发 Chrome 开发者工具,以便您能更轻松地使用这些工具。现在,我们要公布一些可大幅改进您的移动网络开发的新功能。首先介绍远程调试,然后介绍适当的移动模拟

将您的设备屏幕抓屏到桌面

直到现在,进行远程调试时,您还是得在设备和开发者工具之间来回切换。现在,抓屏会在开发者工具旁边显示您设备的屏幕。看到它固然很好,但与它互动更棒:

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

有关抓屏的完整文档介绍了所有这些信息以及更多其他信息,例如发送双指张合缩放手势。需要使用 Chrome on Android 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 设备上显示的内容。现在,DevTools 中的 dPR 模拟将调整您的视图,使您能够放大到较深的 DPI 场景中。此外,window.devicePixelRatio@media (-webkit-min-device-pixel-ratio: 2)image-set( url(pic2x.jpg) 2x, …) 等应反映您的设置,以便您查看应用如何适应,包括加载不同的 dpi 特定资源。

设备像素比较小。

设备模拟不会全面扩展到浏览器功能或 bug。因此,在模拟 iOS 时,WebGL 仍会正常运行,并且您不会遇到 iOS 5 屏幕方向缩放错误。如要体验这种变化,请前往设备。

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

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

触摸事件模拟

模拟触摸屏设置可确保您的点击被解读为 touchstart 等。此外,缩放、滚动和平移等合成事件也可使用。要进行双指张合缩放,只需按住 shift 并拖动或滚动 shift 即可放大内容。您可以清楚查看超出视口范围的内容。

滚动模拟。

最后,您的备用用户代理欺骗(请求标头和 window.navigator 级别)、地理位置模拟和屏幕方向模拟可让您探索设备的完整功能。

设备预设

借助模拟预设,您可以选择手机或平板电脑,并获得正确的屏幕尺寸、应用于该设备的 dPR、UA,以及模拟的全触摸事件和视口。您可以尝试使用特定的预设,也可以轻松逐一调整这些特性。

设备预设

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

演示

如需全面了解所有这些功能的实际运用,请观看我在 Chrome 开发者峰会上针对移动设备的开发者工具发起的 23 分钟演讲: