How to emulate different screen resolutions in Chrome?
In the modern web world we all know the importance of a responsive web design. As a web developer, I have to test my application in different resolutions.
Most of us will use the different devices to test our applications, but we can get rid of this problem by using Emulation feature in Chrome browser. (You will find this option in Chrome 32 or latest version)
Here is how we can use the Emulation feature :-
Step 1 – Start Chrome
Step 2 – Go to navigation and open Developer tools (Menu > Tools > Developer Tools or press F12)
Step 3 – Click on setting icon on top-right side
Step 4 – Open Overrides section to enable Show ‘Emulation‘ view in console
Note: In case you do not find Overrides option in setting, you need to click on ‘Show Drawer’ option. It will open Emulation tab. (See the image below)
Select Device
Click on the device option as shown in the image below and select the device in which you want to test your application. It provides you latest mobile devices including iPhone, iPads, Nexus phone & tablets etc.
Custom Resolution
If you want to test your application in custom resolution, there is an option Resolution just below the Model option (see the image below). You can set your required width, height and retina display pixel ratio value there.
Now I don’t need any device !
It helps me a lot to check my application in one place. This is very useful but don’t take it as an alternate option for interacting with your application on a real device to evaluate the full UX experience.
Hope it helps !
