Your mouse actions will now also trigger the relevant touch events: touchstart, touchmove and 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.

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.

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.

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

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.

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.

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

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.

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).

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: