适用于移动设备的 Chrome DevTools：截屏和仿真

Question

为移动设备开发应该和为桌面开发一样容易。我们一直在努力开发 Chrome DevTools 以使您的工作更轻松，现在是时候推出一些新功能，这些功能应该会极大地改善您的移动 Web 开发。首先，远程调试，然后我们将推出适当的移动仿真。

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

到目前为止，在进行远程调试时，您不得不在设备和开发工具之间来回移动视线。现在，Screencast 会在您的 devtools 旁边显示您设备的屏幕。看到它很好，但与它交互更好：

• 对截屏视频的点击转化为点击，并在设备上触发适当的触摸事件。
• 使用桌面指针检查设备上的元素
• 在桌面键盘上键入- 所有击键都发送到设备。用拇指打字可以节省大量时间。
• 通过用指针轻弹或在笔记本电脑触控板上滑动来滚动页面。

有关截屏 的完整文档记录了所有这些以及更多内容，例如发送捏缩放手势。需要Android 测试版（m32）上的 Chrome。

轻松远程调试

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

现在，我们很高兴地宣布您可以忘记这一切。Chrome 现在可以本地发现并与您的 USB 连接设备对话。我们已经 adb 在 Chrome 中直接通过 USB 实现了该协议，因此您可以轻松前往 Menu > Tools > Inspect Devices 并立即开始远程调试会话。

这适用于所有平台，包括 Chrome OS，但请注意，在 Windows 上，您需要先安装正确的 USB 驱动程序才能与设备通信。如果您之前从未尝试过，您还需要在设备上启用 USB 调试并确认您使用的是 Chrome for Android Beta。阅读完整的文档。;)

额外奖励：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 特定资产。

设备仿真不会一直延伸到浏览器功能或错误。因此，在模拟 iOS 时，WebGL 仍然可以工作，并且您不会遇到iOS 5 方向缩放错误。要体验这种可变性，请前往设备。

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

测试什么width=device-width和minimum-scale:1.0做什么的行为以前是一个仅限设备的游戏。现在您可以快速尝试不同的视口并观察它们的渲染方式。

提示：使用 shift-drag 或 shift-scroll 来模拟设备上的捏合缩放。

触摸事件模拟

模拟触摸屏设置将确保您的点击被解释为touchstart等等。此外，缩放、滚动和平移等合成事件也可以使用。要捏缩放，只需shift+ 拖动或shift+ 滚动即可放大内容。您将很好地了解视口之外的内容缩放。

最后，您的用户代理欺骗（在请求标头和window.navigator级别）、地理位置和方向模拟的备用状态让您可以探索设备的全部功能。

设备预设

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

跳转到 devtools.chrome.com 以获取 有关使用 DevTools 进行移动仿真的完整文档