Chrome DevTools —— Mobile Emulation

Contents

• Emulating Touch Events  （模拟触摸事件）
• Emulating Device Viewports  （模拟设备窗口）
• Device Geolocation Overrides  （重写设备地理位置）
• Device Orientation Overrides  （重写设备定位）
• CSS Media Type Emulation  （模拟css样式）

The mobile web has evolved to enable increasingly sophisticated applications, which we often wish to debug during development on the desktop. The DevTools include support for a number of features that can help with this which we will walk through in this section.

（移动互联网已经发展到使日益复杂的应用程序,我们通常希望在桌面上开发调试。我们将在这一节中通过DevTools支持的一些特性为我们提供帮助）

Note: Some of our documentation may be ahead of the stable version of Chrome. If you are unable to locate a feature listed, we recommend trying Chrome Canary which contains the latest version of the DevTools.

（注意:我们的一些文档可能领先于稳定版Chrome。如果你无法找到一个功能列表,我们建议尝试 Chrome Canary中包含最新版本的DevTools）

Emulating Touch Events（模拟触摸事件）

Touch is an input method that's difficult to test on the desktop, since most desktops don't have touch input. Having to test on mobile can lengthen your development cycle, since every change you make needs to be pushed out to a server and then loaded on the device.

（触摸是一种输入方法,很难在桌面上测试,因为大多数台式机没有触摸输入。要在移动端测试会延长您的开发周期,因为每次更改需要推送到一个服务器,然后在设备上加载）

A solution to this problem is to simulate touch events on your development machine. For single-touches, the Chrome DevTools supports single touch event emulation to make it easier to debug mobile applications on the desktop.

（一个解决这个问题的方法是在您的开发机上模拟触摸事件在您的开发机。对于单一的触摸,Chrome DevTools支持单触摸事件仿真,它更容易调试移动桌面应用）

To enable support for touch event emulation:（使chrome支持触摸事件仿真）

1. Click on the Settings cog  and open up the Overrides panel （在DevTools中点击并且打开Overrides面板）
2. Scroll down and check "Enable touch events"  （向下滚动并勾选"Enable touch events"）
3. Reload your page （重新加载你的页面）
4. 

Your mouse actions will now also trigger the relevant touch events: touchstart, touchmove and touchend. 

（你的鼠标动作现在还能触发相关的触摸事件:touchstart,touchmove和touchend）

Notes:

• Enabling "Emulate touch events" does not disable mouse events, it only adds touch as another option we can debug with.
  （启用“模仿触摸事件“没有禁用鼠标事件,它只会增加接触另一个选项我们可以调试用）
• Feature detects such as Modernizr.touch will now succeed on page refresh.
  （功能如:Modernizr检测。触摸现在将成功在页面刷新）
• This feature, like many other overrides, will only work while the DevTools are open.
  （这个特性,像许多其他覆盖,只会工作而DevTools是开放的）

Debugging touch events（调试触摸事件）

1. Open up the Canvas Fingerpaint Demo 
2. Navigate to the Sources panel（打开Sources面板）
3. Expand the "Event Listener Breakpoints" sub-panel （展开“事件侦听程序断点”子面板）
4. Check the "touchstart" and "touchmove" events under "Touch" （在Touch中勾选"touchstart" 和 "touchmove"）
5. Move your cursor over the paint area （移动你的鼠标到描述区）
6. The debugger should successfully pause on the draw() method （调试工具应该成功的停在断点处）

Multi-touch

Multi-touch events can be simulated if you have a device with touch input, such as a modern Apple MacBook. For further assistance with multi-touch event simulation, see Multi-touch web development.

（如果你有一个触摸输入装置，多点触摸事件可以被模拟,如流行的苹果MacBook。为进一步帮助用多点触控事件模拟,看多点触控web开发）

Back to top

Emulating Device Viewports（模拟设备窗口）

It's often easier to start prototyping on the desktop and then tackle the mobile-specific parts on the devices you intend to support. Device emulation can make this process more straightforward.

（它常常很容易在桌面上启动原型,然后你打算解决支持特定移动部件的设备。设备模拟可以使这个过程更简单）

The DevTools support for device emulation includes native User Agent and dimension overriding. This allows developers to debug mobile browsers on different devices and operating systems via the Overrides menu.

（DevTools设备模拟支持本地用户代理和维度覆盖。这允许开发人员通过覆盖菜单在不同的设备和操作系统调试移动浏览器）

Now you can emulate the exact device metrics of devices like the Galaxy Nexus and the iPhone to test your media query-driven design.

（现在你可以精确的模仿像Galaxy Nexus手机和iPhone这样的设备，并且测试你的多媒体查询驱动的设计）

Emulating The User Agent

1. Navigate to the Chrome for mobile homepage（打开Chrome for mobile页面）
2. Open up the Overrides menu in the DevTools（在DevTools中点击并且打开Overrides面板）
3. Check "User Agent"（勾选"User Agent"）
4. Select "Android 2.3 - Nexus S"（选择"Android 2.3 - Nexus S"）

The result is that first, the User Agent string for the current page changes to Android 2.3. Next, the Device Metrics option has been automatically enabled and theScreen resolution and Font scale factor fields set to those emulating the chosen device.

（结果是,首先用户代理字符串修改当前页面Android 2.3。接下来,该设备指标选项已经被自动启用并且屏幕分辨率和字体比例等参数被设置为那些模拟设备的参数）

This allows you to emulate and debug CSS media query breakpoints for devices with ease.

（这允许你打断点，轻松模拟和调试CSS媒体查询设备）

Before:

After:

, the last button under Screen resolution allows us to swap the values of dimensions currently set, should you wish to change the width for the height.

（最后的按钮在是切换你最近一次设置的宽度和高度）

Should you require further customization, Device metrics can be changed at will, with or without the use of a User Agent set.

（你应该需要进一步定制，使用或者不使用一个用户代理设置，设备参数可任意改变）

Additionally, the Fit in window option will rescale the area available to the page to exclude the area occupied by the DevTools.

（此外,Fit in window option将重新调节页面中可用的区域来排除DevTools所占用的区域）

Notes:

• At present, Font scale factor will only set the text zoom. There are however plans to change this in the future to better emulate mobile devices using text autosizing and real device pixel ratio emulation. Until then, the current state will never be 100% accurate and may exhibit some visual artifacts and unexpected behavior when scaling the page.
  （目前,字体比例因子只会设置文本变焦。然而,也有打算改变这个在未来更好的模拟移动设备使用文本自动尺寸监控和真实设备像素比仿真。在那之前,目前的状态永远是100%的准确,当缩放页面时可能出现一些视觉工件和意想不到的行为）
• Device media queries (e.g @media only screen and (min-device-width:768px){}) will also be enabled according to the values defined here. There is presently no other way those can be mimicked.
  （设备媒体查询(e.g @media只有屏幕(设备最小宽度:768 px))可以自行设置宽度）
• The DevTools window must be kept open in order for the touch events to occur. If you close the window you will go back to normal mouse events.
  （为了触发触摸事件DevTools窗口必须一直是打开的。如果你关上窗户你将回到正常的鼠标事件）
• If you would like to contribute patches to support new devices, please see our contribution docs.
  （如果您要提交补丁去支持新设备,请参阅我们的贡献文档）

Back to top

Device Geolocation Overrides（重写设备地理位置）

When working with HTML5 geolocation support in an application, it can be useful to debug the output received when using different values for longitude and latitude.

（当使用HTML5的一个支持地理位置信息的应用程序时,它可以用不同经度和纬度调试输出）

The DevTools support both overriding position values for navigator.geolocation and simulating geolocation not being available via the Overrides menu.

（DevTools同时支持覆盖位置值导航仪。地理位置和模拟地理位置不能通过菜单同时生效）

Overriding geolocation positions

1. Navigate to the Geolocation demo（演示Geolocation导航）
2. Allow the page access to your position. This should hopefully be accurate.（允许页面访问你的位置，这应该能准确）
3. Open up the Overrides menu in the DevTools（在DevTools中打开Overrides菜单）
4. Check "Override Geolocation" then enter in Lat = 41.4949819 and Lat = -0.1461206（勾选"Override Geolocation"并输入 Lat = 41.4949819 ， Lat = -0.1461206）

1. Refresh the page. The demo will now use your overridden positions for geolocation（刷新页面。这个演示将定位你设置的地理位置）

1. Now check the "Emulate position unavailable" option（现在检查“模仿位置不可用”选项）
2. Refresh the page. The demo will now inform you that finding your location failed（刷新页面，这个演示将通知您,查找你的位置失败）

Back to top

Device Orientation Overrides

Many new mobile devices are now shipping with accelerometers, gyroscopes, compasses and other hardware designed to determine capture motion and orientation data.

（许多新的移动设备如航运加速度计、陀螺仪、指南针等硬件有计划的来确定捕获运动和定位数据）

Web browsers are providing increasingly more access to that new hardware, including such examples as the HTML5 DeviceOrientation events. These events provide developers with information about the orientation, motion and acceleration of the device.

（Web浏览器融合越来越多的新的硬件,包括像HTML5 DeviceOrientation事件这样的例子。这些事件都为开发人员提供相关的定位信息、运动和加速度的装置）

If your application is taking advantage of device orientation events, it can also be useful to override the values received by these events during debugging to avoid the need to test them on a physical mobile device.

（如果您的应用程序是利用装置定位事件,它还可以覆盖值收到这些事件在调试过程中避免了需要测试他们在一个物理的移动设备）

Overriding orientation values(重写定位参数)

1. Navigate to the Device Orientation demo（演示Device Orientation导航）
2. You should see a standard HTML5 logo along with the current orientation values listed above it（您应该看到一个标准的HTML5标志随着电流取向价值观上面列出）
3. Open up the Overrides menu in the DevTools（在DevTools中打开Overrides菜单）
4. Check "Override Device Orientation"（勾选"Override Device Orientation"）
5. You will see three fields α - how much the device has been rotated around the z-axis, β - how much the device is tilted left-to-right and γ - how much its tilted front-to-back.（你会看到三个字段α-设备绕z轴旋转的数值,β-设备从左到右倾斜的数值，γ-设备前后倾斜的数值）
6. Change the values to the following:（根据下面改变值）
   1. α - 0
   2. β - 60
   3. γ - 60

We have altered the left/right tilt and front/back tilt, in this case resulting in our application being emulated as rotating in a clockwise direction.

（我们已经改变了左/右倾斜和前后倾斜,在这种情况下导致我们的应用程序以顺时针方向被模拟旋转）

Back to top

CSS Media Type Emulation

CSS media types allow us to apply different styles to a page depending on the medium it is being used through (e.g print, screen, tv, braille and so on).

（CSS媒体类型允许我们应用不同的样式页面根据媒介正在使用它通过(e.g打印、屏幕、电视、盲文等等)）

Emulating media types

1. Navigate to HTML5 Rocks
   （打开HTML5 Rocks）
2. Open up the Overrides menu in the DevTools（在DevTools中打开Overrides菜单）
3. Enable "Emulate CSS media" and select the "print" media type option from the drop-down box.（勾选"Emulate CSS media"并从下拉框中选择“print”媒体类型。）
4. The page will adjust to using a stylesheet for the chosen CSS media type if one is available（如果有一个可用的媒体，页面会适应选择的CSS媒体类型）

Before:

After: