Debugging mobile website through user agents

The situation

While working on one of my projects, I encountered an issue to render a mobile website on my desktop for debugging purposes. The task was to restyle the mobile version of the site. To make it even more complicated, the requirement includes no html structure change – only CSS.

I found it difficult to debug the styling on mobile since instead of being a responsive template, I was working with an adaptive template. Minimising the browser to mobile size and using mobile emulator didn’t help either – it still shows the desktop version of the site. But if the site is viewed using a mobile device, it will render the mobile version.

The first thing that came into my mind was, “Wouldn’t it be good if we have ‘inspect element’ option on our mobile browser?”

Assuming the wish comes true – it might work on your mobile device, but not on others. Let’s not forget there is an abundance of mobile devices in the market nowadays. No developer will want to purchase every single mobile device just to debug the mobile issue.

The solution

There is this quote from Henry Louis Mencken of which he says, “For every complex problem, there is a solution that is simple, neat and wrong”.

Wrong is not how I would say my solution would be, but definitely better. It comes in the form of the browser’s user agent. By having the browser change its user agent to act as a mobile browser, we can proceed to safely debug mobile issues. We can also change browser user agents very easily too.

Taking Firefox for example, there are add-ons or extensions to switch between user agents. The Override User Agent extension is particularly useful.

Conclusion

In short, you may find that you are able to debug mobile sites using your favourite web developer tools that you have been using on a daily basis – which goes the very same for me.

Have you got any other solutions to debug the mobile issues? Always happy to hear your thoughts.