如何模拟移动设备与设备模式在Chrome
网站测试变得越来越复杂。在几个浏览器中检查功能的时代已经一去不复返了。你的最新杰作必须在一系列具有不同操作系统、屏幕分辨率和功能的移动、平板和桌面设备上进行严格评估。在极端情况下，它可能需要与原始开发一样长的时间。
触摸屏、混合设备和高密度显示器使这一过程更加复杂。如果你在一台普通的电脑上编程，有鼠标和键盘，很难理解你的界面是如何操作的。鼠标悬停之类的功能不一定能工作，应用程序可能无法操作。但是如何在开发过程中在一系列操作系统上测试代码，并避免在多个设备之间管理和切换的痛苦呢?
幸运的是，所有的现代浏览器都提供了移动模拟工具，其中最好的一个就是Chrome浏览器。它可以帮助您在不离开舒适的PC和开发环境的情况下识别早期问题。
开发人员工具
启动Chrome浏览器，导航到要测试的网页并打开开发人员工具(菜单>工具>开发人员工具，Cmd+选择+我在macOS或F12/Ctrl+转变+我Windows和Linux)。
控件，现在可以启用浏览器模拟器切换设备工具栏左上角的图标:
现在将出现一个设备模拟:
虽然不完全是iOS或Android模拟器，但可以选择运行这两个平台的许多移动设备作为预设。模拟屏幕的尺寸可以改变时响应选择设备类型。
触屏模拟
将鼠标移动到设备上，会看到一个圆形的“触摸”光标。这将对基于触摸的JavaScript事件做出反应，例如touchstart，touchmove而且touchend．不应该发生特定于鼠标的事件和CSS效果。
按住转变然后单击并移动鼠标以模拟缩放。
移动模拟器设备工具栏
值得花一点时间熟悉Chrome模拟器上面的工具栏和菜单:
默认控件为:
- 设备类型(或响应）
- 当前分辨率
- 比例(屏幕可以放大或缩小以更好地适应模拟器窗格)
- 网速
- 纵向/横向切换按钮
三点菜单允许你显示或隐藏额外的控件:
- 设备框架(如果可用，可提供手机或平板电脑的图形)
- CSS媒体查询栏(参见下面）
- 像素尺
- 添加设备像素比
- 添加设备类型
- 捕捉屏幕截图(如果显示的话，包括设备帧)
- 捕获全页屏幕截图
CSS媒体查询栏
选择显示媒体查询从三点菜单查看CSS中设置的所有媒体查询的图形颜色编码表示。
- BLUE:目标最大宽度的查询
- 绿色:查询范围内的目标宽度
- ORANGE:以最小宽度为目标的查询
可以单击任何条来设置模拟器屏幕的宽度。
模拟设备选项
通过左侧下拉菜单，可以选择设备。许多流行的智能手机和平板电脑，包括iphone、ipad、kindle、Nexus平板电脑、三星Galaxy等，都提供了几十种预设。
并非所有设备都是同时呈现的。点击编辑……或单击“DevTools”设置齿轮图标，并选择设备标签:
您可以通过定义启用或禁用设备或输入您自己的设备:
- 一个名字
- 如“移动”或“平板”的分类
- 浏览器用户代理字符串
- 设备分辨率
- 像素比(例如iPhone Retina屏幕的像素密度是报告的视口分辨率的两倍)
所有浏览器都在每个HTTP报头上发送一个用户代理字符串来标识自己。这可以在客户端或服务器端进行检查，在web开发的黑暗时期，可以用来修改或提供不同的用户体验。在极端情况下，观看者会被引导到另一个站点。这种技术总是有缺陷的但由于响应式Web设计技术，它已经变得非常多余，而且考虑到市场上可用的设备数量，它是不可持续的。
带宽节流仿真
节流下拉菜单可以让你模拟通常在移动连接或不可靠的酒店和机场Wi-Fi上经历的慢速网络!您可以使用它来确保您的站点或应用程序在所有环境中快速加载并保持响应。
节流下拉菜单在网络tab和Chrome的设备工具栏。您可以通过单击DevTools设置自己的带宽配置设置齿轮图标和选择节流标签:
点击添加自定义配置文件然后输入:
- 配置文件名称
- 下载速度，单位是千比特每秒
- 上传速度，单位是千比特每秒
- 以毫秒为单位的延迟(发出网络请求时的典型延迟)
仿真移动传感器
智能手机和平板电脑通常都有GPS、陀螺仪和加速计等传感器，这些都是桌面设备通常不具备的。这些可以在Chrome中通过选择来模拟更多的工具,然后传感器从开发人员工具主菜单的三个点:
出现一个新窗格，允许你定义:
- 当前的经纬度或从下拉菜单中选择主要城市。您也可以选择位置不可用来模拟当设备无法获得可靠的GPS信号时应用程序的反应。
- 的取向。有几个预设可用，或者您可以通过单击和拖动移动设备图像。
- 触摸反应。
- 空闲状态，用于检查应用程序对锁定屏幕的反应。
远程实设备调试
最后，谷歌Chrome浏览器允许您通过USB连接一个真正的Android设备进行远程设备调试。在地址栏输入，确保发现USB设备检查，然后连接你的手机或平板电脑，并按照说明进行操作。
Chrome允许你设置端口转发，这样你就可以在设备上的本地服务器上导航到一个web地址。Chrome的预览窗格显示了设备屏幕的同步视图，你可以使用设备或Chrome本身进行交互。
所有的开发人员工具都可以使用，包括应用程序选项卡在离线模式下测试渐进式Web应用程序。请注意，与需要HTTPS的实际应用程序不同，Chrome允许PWAs通过HTTP连接从本地主机运行。
太棒了!我现在不需要任何设备!
Chrome的移动浏览器模拟器很有用，功能也很强大，但它不能替代在真实设备上与你的网站或应用程序交互，以评估完整的用户体验。
您还应该意识到，没有任何设备模拟器是完美的。例如，Chrome在iPhone或iPad上显示页面的表示，但不会尝试模拟标准支持或Safari的怪癖。
也就是说，对于快速和肮脏的移动测试来说，Chrome的设备模拟非常出色。这比在真正的智能手机之间切换要容易得多，而且你可以使用所有的开发工具。它节省了数小时的努力。
