chrome 移动模拟工具

概述：用Google Chrome移动模拟工具做更好的响应式设计：我们的网站、应用程序要怎样才能在各式各样的移动设备中有更好的响应式设计呈现效果？我们是不是需要在每一台移动设备中测试？使用Google Chrome仿真移动模拟器，对每个移动设备进行模拟，可以达到事半功倍的效果。开发者们，还等什么呢，让我们一起体验Google Chrome移动模拟器的强大功能吧。

Google Chrome移动端模拟

Chrome 32 发布以后，开发者工具中新增了一个新工具——mobile emulation。这个工具绝对是为移动设备响应式设计测试而生的。

如果你还没有打开该工具,那么请跟随一下步骤：

• 按F12(或者Cmd+Alt+l on a Mac)
• 点击Developer Tools under View -> Developer
• 右键网页，点击Inspect Element

在开发者工具的最上面，会看到一个像手机的新按钮。点击它开启移动模拟模式。如下图：

你可以看到开发者工具正常工作，但是有附加选项，网站被渲染成移动设备模拟状态。

设备设置

在左上角，设备设置选项中有46个移动设备可供模拟，你可以设置以下内容：

• 屏幕分辨率
• 横向和纵向旋转
• 设置像素比
• 在可视化区域缩放、全屏操作

网络设置

接下来是旁边的蓝色字体部分，网络设置。我们可以设置网路速度offline 到 no throttling，可以帮助我们观察网站加载速度快慢。

network下，我们可以手动设置代理，可以观察网站反映速度。

断点

断点怎么办？工具会自动检查CSS设置中的断点，并给每一个断点提供链接。

你也可以模拟硬件感应装置，包括：触控输入、地理定位、加速计等。

Usersnap Extension

完成上面的步骤，可很轻松模拟移动设备。不过还未完。

在不同情况下网站渲染情况如何？需要我们继续模拟。然后，如何将信息分享给开发者和设计者呢？

Usersnap Chrome扩展和开发者工具良好融合，使用 Usersnap Widget ，你可以添加屏幕注释兼容性报告，并使用移动模拟插件，将他应用到设置区域。

如果你没有使用Usersnap，你可以在 Chrome Web Store中下载安装。安装后在工具栏中可以看到Usersnap图标。第一次使用，需要激活。

点击"OK"，然后登陆，就可以进入工具设置页面。在页面底部可以看到自己的项目。如图：

选择项目，点击Select Project，你就可以使用工具了。回到移动模拟工具插件，我发现但页面达到768px断点，就会停止渲染。

因此，我想让我的团队知道这个问题，然后我可以修复它。点击Usersnap按钮，出现对话框，添加评论、高亮、注释、规则等内容。

你可以在上图中看到，我向我的团队发送的信息，网站外观、网站在移动设备中正常工作所需要的修改。通过这些方法，你是不是觉得网站设计、开发、测试更灵活，更可控呢。

总结

在这篇文章中，你学到了两个很棒的工具帮助你测试网站、网站应用在多设备中的兼容性。

转载自：http://www.evget.com/article/2014/12/17/21955.html