面向移动设备开发应用应该与面向桌面设备开发应用一样简单。我们一直在努力改进 Chrome 开发者工具，让您更轻松地完成工作。现在，我们推出了一些新功能，这些功能应该能显著提升您的移动 Web 开发效率。首先，我们将介绍远程调试，然后再介绍适当的移动设备模拟。
将设备屏幕投屏到桌面
到目前为止，在进行远程调试时，您必须在设备和开发者工具之间来回切换视线。现在，屏幕录制功能会将设备的屏幕显示在您的开发者工具旁边。看到它固然不错，但与它互动会更好：
- 屏幕录制中的点击会转换为点按，并且系统会在设备上触发适当的触控事件。
- 使用桌面指针在设备上检查元素
- 在桌面键盘上输入内容 - 所有按键操作都会发送到设备。与用拇指打字相比，可以节省大量时间。
- 使用指针快速滑动或在笔记本电脑触控板上滑动，即可滚动页面。
有关屏幕投放的完整文档介绍了所有这些内容，以及更多内容，例如发送双指张合缩放手势。需要 Android 版 Chrome 测试版 (m32)。
轻松进行远程调试
18 个月前，Chrome 为 WebKit 浏览器引入了适当的远程调试功能，但如果您当时尝试过，就必须处理 400MB 的 Android SDK 下载，并将 adb 二进制文件添加到 $PATH 和一些神奇的命令行咒语。
现在，我们很高兴地宣布，您可以忘记这些问题了。Chrome 现在可以原生发现和与 USB 连接的设备通信。我们在 Chrome 中直接通过 USB 实现了 adb 协议，因此您可以轻松前往 Menu > Tools > Inspect Devices 并立即开始远程调试会话。
此方法在所有平台（包括 ChromeOS）中都非常适用，但请注意，在 Windows 上，您需要先安装适当的 USB 驱动程序才能与设备通信。如果您之前从未尝试过，还需要在设备上启用 USB 调试，并确认您使用的是 Android 版 Chrome Beta 版。阅读完整文档。
为本地项目转发端口
您在 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 屏幕方向缩放 bug。如需体验这种变化，请前往相应设备。
正确模拟 <meta viewport>（和 @viewport）
以前，测试 width=device-width 和 minimum-scale:1.0 的行为只能在设备上进行。现在，您可以快速试用不同的视口，并观察它们的呈现方式。
触摸事件模拟
模拟触摸屏设置可确保系统将您的点击解读为 touchstart 等。此外，缩放、滚动和平移等合成事件也适用。如需双指张合缩放，只需按 shift 键并拖动或按 shift 键并滚动即可放大内容。您可以清晰地查看内容在视口之外的放大效果。
最后，您可以使用用户代理欺骗（在请求标头和 window.navigator 级别）、地理定位和屏幕方向模拟等常用功能，探索设备的全部功能。
设备预设
借助模拟预设，您可以选择手机或平板电脑，并获得适用于该设备的正确屏幕尺寸、dPR、UA，以及模拟的完整触摸事件和视口。您可以尝试特定的预设，也可以轻松逐个调整这些特征。
请访问 devtools.chrome.com，查看有关使用开发者工具进行移动设备模拟的完整文档
演示
如需观看所有这些功能的实际演示，请观看我在 Chrome 开发者大会上关于移动版开发者工具的 23 分钟演讲：