12

Testing a responsive webdesign is sometimes a challenge: test different resolutions, keep dev/tools open to see what's going on … well, you get my point.

I'm looking for something I can add on to Chrome that lets me deal with this without too much trouble. Something like the Ctrl+Shift+m on Firefox.

Firefox Responsive Design

With the feature to drag the window to change the resolution and also the dropdown with some predefined resolutions

Pre-defined Resolution

  • Works on Chrome (extension)
  • Have predefined resolutions OR a box to inform a specific resolution
  • Be able to drag to create resolutions (like a window)
  • Be able to open and use Chrome dev-tools

Is there an extension that does this, and can help me make simply test responsive layouts ?

|improve this question
  • PS: Would be amazing if it was a tool gratis – Michel Mar 22 '14 at 15:50
12

Chrome has a decent UI-faker as well as some preset screen dimensions that include DPI.

To get to these great tools:

  1. Open the Developer Tools in Chrome by pressing F12.

  2. Open the "drawer" by clicking the icon located top-right of the Developer Tools (it's a greater-than symbol next to three horizontal lines stacked on top of each other). Or by clicking esc in the Developer Tool

    drawer

  3. Click on the "Emulation" tab.

  4. Go nuts. You can emulate touch events, geolocation coordinates, accelerometer data, screen resolution, user agents, etc.

Note that right around version 30 of Chrome these options were moved to the "drawer" described above however in older versions it was found in the Developer Tools Settings (gear cog icon).

|improve this answer
  • Don't try to open a discussion. Go to the Chat to debate subjects. – Michel Mar 22 '14 at 15:52
  • Doesn't have resolutions like 1900x1200 and it's not able to be resized. (It's great for mobile) – Michel Mar 25 '14 at 12:37
  • @Michel By "not able to be resized" do you mean that other tools allow you to view a viewport larger than your screen's resolution? – Jasper Apr 9 '14 at 20:18
4

I would suggest you try out the Window Resizer extension.

It gives you a list of predefined resolutions that the browser window will shrink/grow to when you select them. It also gives the current display size of the window so you can adjust is manually if you need to. And since it is merely changing the size of the window to specific resolutions, you still are able to access the Developer Tools inside of Chrome.

|improve this answer
  • 3
    Big flag on the Window Resizer extension. I used to use it but the people who developed it decided they weren't getting enough money via donations so they incorporated some code that adds advertising links to pages. This was not documented by the creators and I believe I has been removed but I see no way to trust the developers. Also this functionality exists in Chrome already. – Jasper Mar 21 '14 at 22:51
3

I would suggest you to use Web Developer Extension for Chrome, the cool thing about this extension is that it lets you add custom resolutions for resizing the browser window.

enter image description here

Not only that, it also allows you to add custom resolutions to the Responsive collections...

enter image description here

You can see all those responsive layouts on a single screen where each version is collapsible/expandable

enter image description here

Apart from these, there are variety of features like disabling images, JavaScript, Cookie Handling, CSS Disabling, and many more, which will help you make websites faster and cleaner.

|improve this answer
1

Chrome has a built-in function to do this for you. The tool gives you a list of popular phone dimensions to test with and gives you the option to enter your own in. It also changes your browser's user agent to match the phone you want to use.

To get to the phone based viewer

  1. Press your F12 key or open developer tools
  2. Click on the phone/tablet icon
  3. Click from the drop down the dimensions you would like to use

screenshot

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.