Chrome 手机模拟器扩展和 Chrome DevTools 的设备模式，都能在桌面版 Chrome 里以手机尺寸显示网站。DevTools 更适合调试，因为检查器和控制台就在预览旁边。扩展程序更适合快速查看效果，一键开启，浏览时也一直保持。但在触控输入和 Safari 渲染方面，两者都替代不了真机。
下文会逐一拆解，帮你按任务而不是按习惯来选工具。
Chrome 里的“手机模拟器”指的是什么
在桌面版 Chrome 里运行的一切，模拟的都是手机的环境，而不是手机本身。好的工具会修改网站用来决定显示方式的那些信号：
- 视口的宽度和高度，它们决定 CSS 媒体查询是否生效
- user agent 字符串和
Sec-CH-UA-Mobile客户端提示，很多服务器和脚本会读取它们 - JavaScript 读取的
screen.width、screen.height和devicePixelRatio navigator.maxTouchPoints等触控支持标志
页面仍然由你电脑 CPU 上的 Chrome Blink 引擎绘制。所以这里的“模拟器”只是一个宽泛的说法。相比之下，苹果的 Xcode Simulator 运行的是真正的 iOS Safari。
两种方式对比
| DevTools 设备模式 | 手机视图扩展 | |
|---|---|---|
| 每次检查的准备 | 打开 DevTools，切换设备工具栏，选设备，刷新 | 点击工具栏图标，选设备 |
| 屏幕空间 | DevTools 面板占用部分窗口 | 只有页面和手机外框 |
| 浏览时是否保持 | 按标签页，仅在 DevTools 打开期间 | 按标签页，切换页面后保持（取决于扩展） |
| 设备预设 | 少数几款机型，自定义设备需手动添加 | 按名称列出的手机和平板预设 |
| User agent 和像素比 | 支持 | 支持（较好的扩展） |
| 触摸事件 | 支持，鼠标会触发触摸 | 通常不支持 |
| 网络和 CPU 限速 | 支持 | 不支持 |
| 检查器、控制台、网络日志 | 内置 | 需要另外打开 DevTools |
| 截图 | 可见区域或整页，可选设备外框 | 通常是带外框的视口 |
规律很清楚。设备模式是附带手机视图的调试器，扩展程序则是只有手机视图的工具。
什么时候用 DevTools 设备模式更好
当你需要弄清楚某处为什么显示不对时，就用设备模式。典型场景：
- 查看在 375 px 下哪条 CSS 规则生效
- 读取只在移动端出现的控制台错误
- 用模拟的触摸事件测试滑动或点按处理
- 限制 CPU，看脚本是否阻塞了首次渲染
具体设置步骤见 Chrome 手机模拟器使用指南。
什么时候用扩展程序更好
当你需要频繁、快速地看移动版长什么样时，就用扩展程序：
- 发布后逐页检查整个网站
- 在通话中向客户展示网站在手机上的样子
- 推送前检查
localhost上的页面（或在真机上检查，见在手机上访问 localhost） - 为工单或设计评审截取手机尺寸的截图
Mobile View Extension 就是为此打造的一个例子。它会在手机或平板外框中重新加载当前标签页，应用对应设备的 user agent、客户端提示、屏幕尺寸和像素比，并在你浏览时保持预览开启。你可以切换到横屏、输入自定义分辨率，并把带外框的画面保存为 PNG。所选设备等设置会被记住。
所有浏览器内模拟器的共同限制
对 Chrome 内的工具能显示什么，要有清醒的认识。Mobile View Extension 的商店页面坦白列出了它的限制，这些也是这类工具的通病：
- 预览运行在桌面版 Chrome 内的框架中，而不是原生设备模拟。
- 不会生成触摸事件，需要用鼠标操作。
- 针对像素比、
pointer和hover的媒体查询没有完全模拟。基于宽度的断点会跟随外框内的视口。
DevTools 也有类似的限制：它显示不了 Safari 特有的问题、真实的内存压力或屏幕键盘。这些需要在真实的 iPhone 或安卓手机上测试，或者使用 Xcode 和 Android Studio 的模拟器，详见没有 iPhone 如何测试网站和在电脑上测试安卓端网页。
安装手机模拟器扩展前要问的问题
会改变页面加载方式的扩展需要较大的权限，所以要谨慎选择：
- 它收集哪些数据？ 读一读隐私政策。手机预览工具没有理由把你的浏览记录发送到任何地方。Mobile View Extension 的隐私政策写明不收集个人数据或浏览记录。
- 它修改 user agent，还是只改宽度？ 只改宽度的工具，相当于调整窗口大小。参见为什么缩小窗口看不到手机版。
- 它能否用于 localhost 和需要登录的页面？ 很多在线“响应式检测”工具两者都访问不了。
- 是否还在维护？ 在 Chrome 应用商店查看最近更新日期。
两者结合的简单流程
每天检查移动端布局的人，大多最终会这样分工：用扩展程序先看一遍每个页面，用 DevTools 处理有问题的页面。对结账、注册等关键流程，最后再用真机过一遍。这样外观、调试和触控都能覆盖到，又不会拖慢每一次检查。
常见问题
手机模拟器扩展安全吗？
取决于具体的扩展。优先选择隐私政策清晰、扩展内没有统计分析或跟踪代码、并且最近有更新的。在 Chrome 应用商店检查它申请的权限。
Chrome 扩展能完全模拟 iPhone 吗？
不能。它可以匹配 iPhone 的视口、user agent 和像素比，但页面是由 Chrome 的引擎而不是 Safari 的引擎渲染的。针对 Safari 的检查，请使用 Xcode Simulator 或真实的 iPhone。
用了扩展还需要 DevTools 吗？
需要，用于调试。扩展告诉你布局坏了，DevTools 告诉你是哪条规则把它弄坏的。