TLDR; Chrome has built in functionality for visualising media queries
Are there any good tools for helping me with responsive testing so I can see what media queries are used in a page and then resizing to that resolution for testing?
At UKStar I was speaking to Angie Jones and the topic of responsive testing came up, being able to see your site at multiple resolutions for different devices would be a very useful tool to have.
Also, when I think about this, I want to have very specific application view i.e. what resolutions have I actually coded for, to make sure I trigger the different combinations - not just the general device rendering.
Where would I find this functionality?
- What do I believe I need? To see and easily resize browser to the media query breakpoints.
- Why? Because I want to cut down the amount of device testing and for CSS the different breakpoints can introduce different CSS via media queries.
- How would I use this?
- easily review media queries and see if they match device sizes
- check the query split does it make sense
- are there any missing break points that could be added to make rendering better on different resolutions
- Where do I think I will find this?
What if the browser did this already?
My initial thought was that I should look for a Chrome extension. And indeed that is what I did. The rest of the blog post covers that investigation.
After having performed this investigation, found an extension, fixed a bug in the extension, I realised…
“I wonder if the browser does this already?”
I should have started here.
Given my existing tool set, can they meet my needs?
Chrome Media Query View
- Toggle the Device bar
- Show Media Queries
- Use media query rendering bars
Toggle The Device Bar
This will show the responsive view
Show Media Queries
Click the “Show Media Queries” menu:
This will show a rendering of the Media Queries on the site
Use Media Query Rendering Bars
This shows me the media queries that are active on the page and I can:
- click on these to resize screen to see the effect
- right click to see where the css breakpoint for the media query was defined
But I didn’t look there first, I looked for extensions
I would have had a more productive morning if I had performed this step first, but I didn’t, I did it after I looked for Chrome Extensions, Evaluated Extensions, Fixed a Chrome Extension… as you will see.
How do I think I will find an Extension to do this?
Extensions are generally released to Chrome Store
- view media queries
- responsive css breakpoints
But I’m also aware (since I have tried to submit two extensions to the store, but only one has been accepted) that there are other extensions available as source that might be better, but I won’t know about.
But I’ll try the search and the “Related” suggestions from the store first.
What came back?
A few products came back and after reviewing the descriptions I reduced the list to:
Responsive Inspector looked like it matched my requirements pretty well.
Emmet Re:View matches some of my requirements but looked like it might offer a potential time saving time of showing all the different sizes at the same time.
SeeResponsive looked like a light weight version that might support fast switching.
I revisited each of the extension pages to check the “related” list at the bottom of each extension page to see if that helped me find additional tools.
There were a few tools that seemed interesting but because they used ‘hard coded’ sizes they didn’t quite match my need of targeted risk assessment for the current system. They were more suited for generic web development support and I could achieve much the same result with the in built chrome responsive view and its predefined device list.
Interestingly the ‘related’ view found “Responsive Inspector Reloaded” which is a forked version of Responsive Inspector which hasn’t been updated since 2013 and the comments on Responsive Inspector Reloaded suggest that Responsive Inspector doesn’t work on modern browsers.
- Responsive Inspector Reloaded on chrome store
I tried Responsive Inspector Reloaded and it didn’t work as I expected, perhaps this doesn’t work on ‘modern browsers’ since it hasn’t been updated since 2017.
I tried Responsive Inspector and as the comments on the Reloaded version suggested, it didn’t work on my up to date browsers, failed with the same user experience as Reloaded.
I tried SeeResponsive, and that gave an error loading the CSS on my page. I tried it on another page and it functioned. It didn’t give the user experience I was expecting so it isn’t suitable for my needs.
I tried Emmet Re:View and the Device Wall is interesting but not as configurable as I expected. And the Breakpoints view doesn’t show me the breakpoints in the page. I might still use this for exploratory testing because it shows me a range of sizes and I can interact with them at the same time.
Danger: if you know how to code you might fall into the trap of trying to write something that already exists without fully exploring all current options. I almost did.
I had a quick look at the Responsive Inspector Reloaded code.
Now that I’ve built Chrome Extensions I have some familiarity with looking at the code.
Rather than ‘try to make it work. I decided to pull out the essence and see if I could get it to work. The main code was a single method in the
I found an exception was thrown in the code.
A web search later and I found a suggested try catch block fix.
This is because various security measures have been added to Chrome since the extension was written and now, when a trying to access details of a stylesheet from a different domain, an exception is thrown.
Wrapped try catch and the code worked.
I downloaded the source from the original github repo to run as an unpacked extension.
I added the Try Catch in the
getMedia method in the extension and it worked.
Well, almost. The screenshot functionality didn’t work but the at least the pop up menu now showed the media queries.
Someone had raised an issue on the main project for this defect:
So I added a comment with my fix.
The next step would really be to add a pull request with the fix.
But I’m not going to do that, because… while I think the extension is useful, I will probably just use the built in browser functionality.
If I was going to fix it I would start here to learn about forking, fixing and pull requests