How can I easily test responsive web design?

I am currently developing a web page and want to test and debug the site for responsive web design. For example, on smaller displays, I want to display items that are usually displayed side by side on the page to instead be displayed beneath each other. Are there any other ways to achieve this other than simply resizing the browser window?


For Relevance I wanted to vote 3 starts, but only one is shown and I cannot change it, maybe this can be a new challenge .. (sorry!!)
Anna Lackinger - Wed, 12/15/2021 - 08:17 :::
Anna Lackinger - Wed, 12/15/2021 - 08:19 :::
1 answer

Firefox and all Chromium browsers (Google Chrome, Edge, …) all have great tools to help you with that. First and foremost, both have a developer tools bar (activated by pressing either Ctrl+Shift+I, F12 or by going into the browser menu and under the section “More tools”) where you can highlight certain elements and further inspect them. You will see all the applied style rules on the right-hand side in the standard interface. This way you can check whether certain rules are active or not and where they come from.
Furthermore, these developer tools include a device toolbar or responsive design mode, activated by either clicking the small phone and tablet icon on the developer toolbar or by pressing Ctrl+Shift+M. When activated, your actual browser window is sectioned off from the rest of the browser and can be either set to some of the preset phone display sizes, which include some of the latest phone models, or be resized manually in the responsive mode like any normal window. The benefit from doing resizing this way is that the toolbar shows you how big the “display” is regarding pixel size, which helps immensely with implementing rules for different screen sizes.
If you want to test the look and feel on an actual device, you can have some your personal mobile phones or tablets connect to them via the local network. I assume you are already running some kind of local web server like XAMPP. Then you can easily figure out your local IP with some simple commands for the command line tools/terminals (e.g. ipconfig on Windows, nettop on MacOS, ifconfig on Linux).


Thanks for the detailed answer, I knew there were tools for this but I have only tested it manually so far, will help me with my next project for sure!

Anna Lackinger - Wed, 12/15/2021 - 08:16 :::

the developer tools are also usable if you want to pretend that you are connecting from a different device. I used it once to upload a picture to instagram from my PC, because it only allowed to upload pictures from phones

Ondrej Brichta - Mon, 12/20/2021 - 11:54 :::

Thanks for this information.

I have currently only tested my frontend using selenium. This page [1] describes, how responsive pages can be tested using selenium.


Thomas Stoiber - Mon, 12/20/2021 - 16:00 :::