移动端优先开发：如何借助工具查看多设备显示效果？

无需额外安装的原生工具（首推） #

• Chrome开发者工具：按F12或右键选择「检查」打开，点击左上角的手机图标（Toggle Device Toolbar），就能切换预设的手机、平板设备尺寸，还支持自定义分辨率、模拟触控操作、限制网络速度，完全覆盖移动端预览需求；另外还能开启多设备同步预览，滚动、点击等操作会同步到所有预览窗口，方便对比不同设备的显示效果。
• Firefox开发者工具：功能和Chrome类似，设备模拟逻辑一致，适合用来对比页面在不同浏览器中的渲染差异。

Atom编辑器适配扩展 #

• atom-live-server：启动本地服务器后可实现页面实时刷新，配合Chrome设备工具栏使用，不用手动刷新浏览器就能看到代码修改后的效果。
• html-preview：能在Atom侧边栏打开页面预览窗口，适合快速查看代码效果，但无法模拟不同设备尺寸，需搭配浏览器工具使用。

实体设备测试方案 #

如果需要最真实的测试效果，可以用ngrok这类工具将本地项目转为公网链接，直接用手机、平板等实体设备访问链接，就能看到页面在真实设备上的显示和交互情况。

内容的提问来源于stack exchange，提问作者Daniel Platt