Designer intentionally creates the best layout to help users to use perfect website and navigate it easily. So it’s really important to make sure that implemented page meets up the design. So there are some tools that could ease UI testing.
Perfect Pixel is an extension that will let you place a semi-transparent image overlay over the top of the developed HTML, allowing you to perform a per pixel comparison between them. It is a powerful tool to see the difference between mockup from the designer and website that front-end developer created.
Once you install the plugin from google chrome store, you are going to see the ‘Perfect Pixel Icon’ on the right navbar. When you click, the drop zone of an image will show up. You can simply load a .JPG or .PNG file with the design into PerfectPixel and it will add a semi-transparent overlay on top of your website – you can then manually adjust its position, size and opacity level.
2. Page Ruler
The second tool that could help to provide Perfect Pixel Development is Page Ruler. Once you enable the plugin, you will be able to measure website you want and then compare it with the mockup you are using. You can change the position of the ruler so it is easy to measure width, height and indents.
It has a small drawback – if you’re testing a site with a sticky header then PageRuler will take over the header and it could be tricky to measure the header right. My workaround for such situations is making a page screenshot and then measure header on the page screenshot.
Also, another similar tool is Dimensions – a simple, useful tool that will measure screen widths and heights for you. So if you want to measure distances between elements on a website this is could be helpful.
BrowserStack is a browser comparison tool to test your website layout with a browser that you don’t have. For example, it is hard to test in Internet Explorer if you use MacBook or to test in Safari if you’re on Windows. It’s also possible to test mobile environments such as iOS and Android. It’s a very convenient tool to check all environments.
Keep in mind that it is not free tool. But if you need a quick test for a short period of time, you can get a free trial.
ColorZilla is a plugin that adds a multitude of color tools, like an eyedropper, color picker, palette viewer and a gradient generator. Of course, you can get all this info in the DevTools, but this plugin could help to get information quicker.
Fontface Ninja is a handy extension that will identify any font, also giving you the size, color and line-spacing, from any web page. You can then compare the discovered fonts with the fonts from mockups. As a previous extension, you can grab all this data from the DevTools, but this plugin could help to get it more quickly.