Menu
In light of the recent controversy (Dec 2013) over the Chrome extension titled "Window Resizer", what are some alternative solutions to quickly resizing the Chrome browser for responsive development testing?
901
Window Resizer is an extension that lets you easily resize and reposition the current window to your desired values. Simply open toolbar popup UI and click on the desired layout set (size & position). Once you click a layout, the window will be positioned and resized to the chosen layout.
Click on the extensions icon next to your Google Chrome profile icon. Select the Resizing App extension and a pop-up screen will appear. Here, you will have to select the + icon to add an image. Select the resize option from the drop-down menu and add the dimensions.
Open Chrome Developer Tools. Click the Toggle Device Mode option near top left of the developer tools section. Choose Responsive from the dropdown menu at the top of the screen. Edit the dimensions, which are also at the top of screen, right next to the dropdown.
Another native solution to test responsive designs is to use the built-in Chrome Developer Tools. Choose Tools->Developer Tools, then click the gear icon in the bottom-right corner of the window that pops up. Click "Enable" then click "Device Metrics" and you can specify whatever resolution you'd like to replicate.
Also, by changing the "User Agent" on that screen, Chrome sets the device metrics for the chosen device, which may come in-handy when deciding where your responsive breakpoints should be for the more-popular devices.
This isn't as easy as a two-click extension, but it has the advantage of being an extension-less solution, and also using exact screen measurements of actual devices.
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
