Enhanced Google Chrome Emulation Tools

You are probably already aware that the current Chrome DevTools have a decent set of mobile emulation tools. Thankfully for us, the tools are getting even better! If you are using the Canary version of Chrome the emulation tools look much different than they do on the stable branch.

When you pull up the DevTools you’ll now see a “mobile icon” next to the magnifying glass. Clicking on the “mobile icon” brings up a new user interface that reminds me a little bit of Firefox’s Responsive Design View.

You can still access the older “emulation tab” as seen on the right bottom of the screenshot, but the new stuff can be seen on the left side of the screen.

Other than the Look & Feel, the newest features to notice are…

1. The “Media queries” view. This will analize the stylesheets included on the page and then let you visualize and interact with them. This feature reminds me of the Responsive Inspector Chrome Extension.
2. The dropdown to throttle various “Network” speeds such as 3G, Edge, DSL, offline, etc… This can come in handy if you want to see how your page responds and unfolds under varied internet speeds.

These changes are very exciting and I look forward to more innovation in the emulation tools. If you don’t already have Canary, why don’t you grab a copy and play around with it yourself. You are able to install canary side-by-side with another version of Chrome.