Using Google Chrome Canary as Mobile Simulator

Using Google Chrome Canary as the Mobile Simulator

Lately I had an issue with one of the website I was working on specifically on an iPad. I did tried different services, but none worked for me. The case was weird especially the website working on didn’t displayed a single block of html and code on the iPad.

Then with some research I was able to find the solution for the simulation. Google Chrome Canary came to my rescue. And hereby I am sharing how to use the Google Chrome Canary  as the mobile simulator.

Step 1:

Download Google Chrome Canary  here.

Step 2:

Complete the installation.

Step 3:

Upon installation and opening the browser hit F12.

Step 4:

On the option panel, at the right footer find the “Show Drawer” icon and click it.

image-1

Step 5:

On the new option panel Click on the Emulation Tab and the under the Device Menu Select any device and then click on the emulate button to test your website on that particular device.

emulate

This was my real case scenario where I used Cranary to solve my problem. Being a web developer and involved in responsive web design everyday,  a good set of tools is always handy. And Google Chrome Canary is definitely one of my favourite at the moment.

 


About Author

I am Robin - WordPress Developer based in Sydney. I work as Digital Developer. I do some projects now and then, and love blogging about WordPress and Web Design.