As responsive design becomes more and more the way websites are built, so are new tools needed to test and debug our work for compatibility on all devices. I’ve seen too many where testing is done at the end, only to find out that your coding is not compatible and hacking through your code becomes cumbersome and inefficient. At the end you may get a finish product that looks good on the surface, while under the hood is a mishmash of patchwork and messy code.
Here is a collection of online tools for testing responsive websites as you are creating and coding so you can make the necessary changes as you go along.
The Responsinator helps website makers quickly get an indication of how their responsive site will look on the most popular devices.
This tool has been built to help with testing your responsive websites while you design and build them.
You can enter your website’s URL into the address bar at the top of this page (not your browser’s address bar) to test a specific page.
It’s a web-based tool where you enter the URL (local or online; both work) and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design.
ResponsiveTest is a simple tool allowing us to view a responsive web design in various resolutions.
Pixel Perfect Media Query Debugging Tool Test Responsive Designs Across 60+ Device Viewports.
A handy tool for responsive design testing. RWD Bookmarklet Drag the link above into your bookmarks bar
An easy to use tool for checking and testing your responsive design in various resolutions.
Responsive design allows a single Web page to be optimized for multiple devices: desktop, tablets, smart phones.
Last but not least, a great tool for testing and you can share with stakeholders for immediate feedback.