Front End Web Development Tools For Responsive Testing

In this post there are 2 tools that we fully recommend for front-end web development testing, let's find out.

Responsively App

One of the most important things for a front-end developer is to focus on how a website can be mobile-responsive and ensure that it fits the right size across different screen sizes. In this post, we'll be looking at Responsively App which is essentially a web browser that is built with electron and has a feature specifically to display the website on multiple screen sizes.

This application is free and open-source and upon installation, it comes with the default commonly used screen sizes for mobile, tablet, and desktop. How it works is basically like a normal web browser but it will render the website in different device resolution. Essentially this application allows us to see a bird-eye-view of how responsive is the website and look at the breakpoints if necessary. Each device can be inspected and check the element and properties whenever needed.

TailwindCSS Playground

The next on the list is TailwindCSS Playground and it's powerful REPL for writing HTML and CSS styling and also testing the responsive breakpoints of the user interface. The panel is divided into the left and the right sections where we code on the left and the result will be displayed on the right side. If there are any custom CSS class, we can define them in the CSS section and it happens instantly without needing a browser reload. Finally, configuration for the default tailwind config is also present on the last tab where we can define an override of the default TailwindCSS config.

Do give it a try and if you have a recommendation, comment below and we'll add it to the list.