Chrome's Dev Tools Can Emulate Any Mobile Device, Get Rendering Performance Profiling

For a long, long time, the dev tools in Chrome have been the gold standard, they provided web developers with everything they needed, source inspection plus on-the-fly modifications, a JS console, even a networking performance module.

But Firefox has been getting plenty of improvements on that front for the past year or so. Chrome's dev tools are still the most comprehensive, but Firefox does a few things better already and the dev tools in Firefox look a lot slicker.

So Chrome's dev tools are getting an update as well. A bunch of features have been improved or added and Google is highlighting them all at once.

One major addition is on the mobile front. It was already possible to remotely debug a page running on your Android device, but Google is now making it possible to emulate mobile devices in Chrome.

In addition to the user agent switch, which was already there, you can now set the screen dimensions of the page being rendered to get an even more accurate view of what you'd get on a mobile device.

"This allows developers to debug mobile browsers on different devices and operating systems via the Settings Menu. So, now, you can emulate the exact device metrics of devices like the Galaxy Nexus and the iPhone to test your media query-driven design," Google explained.

"Chrome Developer Tools also supports single touch event emulation to make it easier to debug mobile applications on the desktop," it added.

Another addition is "Profile rendering performance." What it does is allow devs to see how fast Chrome is rendering their apps and games. This is important for media or UI heavy apps and crucial for games.

Also new is the ability to view a snapshot of any object that's being logged to the console. This makes it possible to see what changes over time inside an object and check whether everything is going as you'd expect.

Finally, if all of this is not enough, you can enable several more experimental features. You first have to enable them in chrome://flags, after that you'll see a new Experiments tab in the dev tools settings page.