You May Not Know This, But You Can Simulate Mobile Device with Chrome Browser!

Yep, Chrome is more than just an ordinary browser. It’s jam-packed with loads of other features that most of us ordinary folks wouldn’t be using it. The one that’s most useful in my line of work is Chrome’s ability to simulate mobile device right from the PC!

I’ve been using this particular feature to get more realistic mobile screenshots for my presentation. The best part is, I can even choose the type of mobile device, rotate the screen and even make a few text edits on-the-fly, perfect for screen mockups!

1.  Open Chrome and enter the URL of the page you want to simulate. Let’s enter www.perrinator.com, and you get to see the full page of the site.

chrome_mobile_device_1

2.  Click the three-dot menu icon and select More tools and Developer tools.

chrome_mobile_device_2

3.  You’re now in a device view mode. You may see different screenshots from the one below because that was my last chosen device view.

chrome_mobile_device_3

4.  To change the type of mobile device, select from the available device list. Not all of the mobile device comes with the mobile ‘skin’ or frame as you have seen in Step 3.

chrome_mobile_device_4

5.  To rotate the screen, click the Rotate icon.

chrome_mobile_device_5

Cool feature, huh? There’s also another useful trick where you can directly edit the text and see how it appears in mobile view. Don’t worry, you won’t mess up the actual site because the edited text is not saved. If you reload the site, the edited text will disappear.

It can be a little overwhelming, and I don’t know half of it, but here’s how I do it. Let’s just say I want to add “Hello World!” at the last sentence of the first post. At this point, I don’t know which html tags to edit. So, I’d right-click near the end of the sentence, and select Inspect.

chrome_mobile_device_6

This will automatically highlight the relevant tag in the Elements panel on your right, i.e. <h2 class=”title”>…</h2>.

chrome_mobile_device_7

Expand the <h2> tag. Then, right-click on the expanded <h2> block and select Edit as HTML.

chrome_mobile_device_8

Type “Hello World!” in the editable block.

chrome_mobile_device_9
When you’re done, click anywhere on the device screen to see the instant change!

 

chrome_mobile_device_10
Isn’t this awesome?! If you would like to know more functionalities of this amazing tool, visit https://developers.google.com/web/tools/chrome-devtools/device-mode/

 

Leave a Reply

Your email address will not be published. Required fields are marked *