Test how does a website looks on Mobile with Chrome Browser

Having a website which runs well on all platforms is ultra necessary in today’s era. There are many online tools to test a website in different resolutions. But, do you know you do not need any online or offline tool and you can test the website mobile version right inside your chrome browser. Here are the steps for doing this.

Step 1 – First of all Open any website in Chrome browser.

Step 2 – Now press CTRL + Shift + I to open console.



You can also open on three dots at top right and then click on More Tools – > Developer tools.

Developer Console Chrome

 

 

Step 3 – Now, press CTRL + Shift + M . You can also click on toggle icon as shown.

Mobile Resolution Chrome

 

 

Your website will now be shown in mobile resolution in chrome browser.

Here is a mobile version of my website Merabheja.comMobile Version Site Chrome Developer Tools

 

 

Step 4 – Just click on the mobile model name to change the mobile model with different resolutions.

Step 5 – To see your website in a custom resolution or devices, not in the list, click on edit.

Add Custom Resolution

 

 



 

Step 6 – Choose your device from a long list of different mobiles. Or if you want a custom resolution (Or Your phone is not in the list), just click on Add custom device.

Add Custom Device Resolution

 

Thus in this way you can test mobile version of sites using chrome and without any extension.