The document provides a comprehensive guide on enabling device mode and mobile emulation in Google Chrome for testing responsive designs. It covers various methods to access devtools, configure emulation settings, inspect media queries, simulate touch events, manage geolocation overrides, and manipulate device orientation values. This enables developers to effectively debug and optimize web applications for different device environments.

1. Device Mode & Mobile Emulation
(Responsive and handheld device testing solution)
- Anshul Mehta

2. Enabling device mode: Method 1
 To access the DevTools, open a web page or web app in Google Chrome
 Press F12 or Select the Chrome menu at the top-right of your browser
window, then select Tools > Developer Tools.
 Or, Right-click on any page element and select Inspect Element.
 Turn on device mode by pressing the Toggle device mode icon as shown in
image . When device mode is enabled, the icon turns blue and the viewport
transforms into a device emulator.
 As shown in above image
 PS. If above mobile toggle icon is not there than check next slide for
alternative method

3. Enabling device mode : Method 2
 Open DevTools (Menu>View>Developer>Developer Tools – OR – CMD(CTRL)+ALT+I)
 Open DevTools Settings (Click on the Gear icon near the right-hand side of the DevTools
menu bar) As shown in image belowbelow
 Click on the “Overrides” tab
 If you’re using Chrome Canary, stay on the “General” tab and look under the heading
“Appearance”
 Tick the checkbox for “Show ‘Emulation’ view in console drawer”
 Close the settings
 For reference snapshot given below

4. Using the screen emulator
 To jump-start your debugging process, device mode has a variety of
emulation presets. Quickly emulate a particular device by selecting a
model from the preset dropdown.
Each preset automatically configures device emulation in the following ways:
 Specifies the UA(user agent) string for requests.
 Sets the device resolution and pixel ratio.
 Enables touch emulation (if applicable).
 Emulates mobile scrollbar overlays and meta viewport.
 Auto sizes (boosts) text for pages without a defined viewport.

5. Emulating Devices
 The Swap dimensions button in
between the Resolution values () will
swap the width and height.
 Shrink to fit ensures the emulated
device screen is completely visible within
your browser window. This setting does
not emulate the device differently.
 Device media queries (e.g. @media only
screen and (min-device-width:768px))
will be enabled according to the values
defined in the Resolution settings.
 You may want to undock DevTools or
dock it to the right while working with
emulated viewport settings.
 Device settings can be configured
independently of a device preset.

6. Inspecting media queries
 Media queries are an essential part of responsive web design. Device mode
makes media queries readily accessible and easy for you to inspect.
 To view the media query inspector, click the Media queries icon in the upper
left corner of the viewport. The DevTools detect media queries in your
stylesheets and display them as colored bars in the top ruler.
 Media queries are color-coded as follows:
 Blue Line : Queries targeting a maximum width.
 Green Line : Queries targeting widths within a range.
 Orange Line : Queries targeting a minimum width.

7. Preview styles for media types
 The media query inspector
targets styles intended for
screens. If you want to
preview styles for other media
types, such as print, you can
do so in the media pane of
the emulation drawer.
 Open the DevTools
emulation drawer by clicking
the More overrides icon in
the top right corner of the
browser viewport. Then,
select Media in the
emulation drawer.

8. Trigger touch events
 The touch screen emulator lets
you accurately test touch events
and sequences as if you were
using a touch-enabled device.
 Enable touch emulation by
selecting the Emulate touch
screen checkbox in the sensors
pane of the emulation drawer.
 When you interact with the
emulated viewport, the cursor
changes into a fingertip-sized
circle and touch events (such
as touchstart, touchmove,
and touchend) fire as they
would on a mobile device.
 To enable support for touch
event emulation:
 Open the Emulation panel in the
DevTools.
 Enable "Emulate touch screen" in
the Sensors pane.

9. 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 Sensors pane.
 Overriding geolocation positions
 In the DevTools, open up the Sensors pane within the
Emulation panel.
 Check "Emulate geolocation coordinates" and enter 41.4949819
in the Lat field and -0.1461206 in the Lon field.
 Refresh the page.

10. 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. Many web
browsers have access to that new
hardware, such as via 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
 Navigate to the Device
Orientation demo and notice the
standard HTML5 logo along with the
current orientation values listed above
it.
 Open the Emulation panel in the
DevTools and click the Sensors pane.
 Check "Accelerometer".
 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.
 γ: how much it's tilted front-to-back.
 Change the values to the following:
 α - 0
 β - 60
 γ - 60

11. For any queries reach me @
http://anshulmehta.branded.me/
http://google.com/+AnshulMehta