Take the 2-minute tour ×
Software Recommendations Stack Exchange is a question and answer site for people seeking specific software recommendations. It's 100% free, no registration required.

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 ?

share|improve this question
    
PS: Would be amazing if it was a tool gratis –  Michel Mar 22 at 15:50
add comment

3 Answers 3

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).

share|improve this answer
    
Don't try to open a discussion. Go to the Chat to debate subjects. –  Michel Mar 22 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 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 at 20:18
add comment

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.

share|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 at 22:51
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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