Chrome DevTools for Mobile: Emulate and Screencast

Tuesday, December 03, 2013

Modern web apps are expected to render and perform on mobile perfectly. That means considering responsive design, 60 fps and connectivity early in the development cycle. With the Beta channel of Chrome for Android and desktop, we’ve made it easier to develop and debug mobile web apps through an improved viewport emulation and zero-config, screencast-enabled remote debugging.

While designing your app, you want to make sure it looks great on multiple screens. DevTools now enables you to go through the popular device screens without leaving the development environment. Just select a device from the Console drawer’s Emulation tab1 and all the relevant viewport properties will be set for you. We'll run the page through the same mobile viewporting code used in mobile Chrome to get you accurate results. You also have full control of the emulation parameters, such as screen resolution, touch emulation, devicePixelRatio, user agent, sensors and many more.


But what if you need to test the actual web app's performance on a real device?

Chrome Beta – including ChromeOS – now supports native USB discovery of connected devices. Find them under Tools → Inspect Devices menu item, or visit the about:inspect page. There’s no configuration necessary and no need for the adb command line tool or extensions to see all instances of Chrome and WebView on the devices connected to your computer2.

While connected over USB, you can screencast the full viewport content from the device to DevTools. The corresponding icon will be shown next to the Elements tab if the inspected device is able to screencast.


Keyboard and mouse events are also sent from DevTools to your device, so you don't even need to touch it while you're testing your apps.



Improved mobile emulation, USB debugging and screencast make it easier to develop, inspect and debug your mobile applications with DevTools. Have a look at Paul Irish’s talk from the Chrome Dev Summit 2013 for a hands-on demo of these features.

Posted by Pavel Feldman, Software Engineer and Viewport Teleporter

1 You need to check “Show 'Emulation' view in console drawer” in DevTool’s Settings→ Overrides to enable the emulation features
2 Windows users need to install the USB device drivers to enable device communication

Post a Comment