Alan Richardson's Blog

Subscribe to Alan Richardson's Blog feed
Updated: 12 hours 46 min ago

Review of Emmet Re-view Chrome extension

Fri, 15/03/2019 - 11:30

TLDR; Emmet Re:view is a useful Chrome extension for responsive layout testing

During my search for responsive testing tools I found Emmet Re:view, and reviewed it.

Emmet Re:View matches some of my requirements for responsive testing but mainly it offers a potential time saving time of showing many different sizes at the same time.

I wrote a crude tool many moons ago for responsive layout testing - it uses iframes and is a bit clunky.

Emmet Re:view runs as a chrome extension and can show a page as multiple sizes at the same time.

You can configure the set of renderings used.

And the page is scrolled at the same rate so you can see much of the same content in each view at the same time.

Unfortunately I couldn’t get the media query breakpoints view to work, but the multiple rendering view is useful enough to consider using this plugin for.

Free Video Inside

Watch on YouTube

If you found this useful then you might be interested in my Online Technical Web Testing 101 course.

Learn More About Technical Web Testing

Categories: Agile, Software Testing

Chrome functionality or extensions for responsive web testing?

Wed, 13/03/2019 - 11:30

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

In Chrome.

  • 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

Responsive testing in chrome

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.

Try Them

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.

Extend Them

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 content.js called getMedia

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.

Fix it

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

Free Video Inside

Watch on YouTube

If you found this useful then you might be interested in my Online Technical Web Testing 101 course.

Learn More About Technical Web Testing

Categories: Agile, Software Testing

Which is the best link checking tool?

Sat, 09/03/2019 - 10:30

I was asked “Which is the best link checking tool?”. And I don’t know. But I do know that I use Total Validator Pro and a Chrome Plugin called Check My Links.

Which is the best?

It might be useful to know if there is actually a ‘best’ tool in a particular category.

But I find that if you look for “The Best” then you end up continually hunting and are subconsciously unsatisfied with the tools you use.

I covered this topic in my podcast episode The Evil Tester Show - Tools Special.

I use the best I’ve found. And they meet my needs. So I stopped looking.

And I use two:

  • one for batch processing Total Validator Pro
  • one for supporting interactive investigation Check My Links
Total Validator Pro

Total Validator Pro

I’ve written about Total Validator Pro before

It spiders my site:

  • checks links
  • validates against w3c standard
  • and does a bunch of other stuff

I run it periodically and it helps general health of the site, it also gives me a back log of work.

Check My Links

Check My Links from is a Chrome Extension.

It runs against a specific page and visually shows me the state of the links.

I use it after I’ve made a change or am testing a specific page. It runs quickly and I can see any issues visually.

It was the second Chrome extension I tried. It worked for me. I kept using it.

Combination of tools

Rather than looking for “The Best”, look for a combination of tools that support your workflow and requirements.

I prefer cross platform tools where possible so I don’t have to keep too many different names in my memory.

You can see both tools in action in this YouTube video:

Watch on YouTube

If you found this useful then you might be interested in my Online Technical Web Testing 101 course.

Learn More About Technical Web Testing

Categories: Agile, Software Testing