Highlighter tool

As I first checked websites for problems, I found it the easiest to point at the mistakes right with my fingers. Later, although I was automating my checklist into a software tool, I wanted to keep the simplicity, hence the highlighter tool was born.

It has 2 modes of operation.

Eye mode

In Eye mode, 2 eyes appear and look at the target to be highlighted on the page. There is a slight problem with the eye. Sometimes, the highlighted element is not visible. It might be hidden behind a tab one could switch to, for example. For that scenario, you can use the next mode.

Close-up mode

The idea is that the layout of any website has a tree structure. In Close-up mode, we first highlight the entire page, then narrow the highlighted area down to the target. At some point, the highlighted area may disappear, but it often is helpful enough to navigate you to the target.

Let me admit, that none of the above tools will work 100% of the time. In such a case, you (or someone else) would have to look into the source code to locate it manually. Such is life. But 99% of the time, one of the tools will help.

Stepper

Sometimes, multiple elements will match the selection criteria. For example, you could have multiple links pointing to the same broken URL. In that case, a stepper will show up on the Highlighter Tool, which you can use, well, for stepping through all the targets, locating them one-by-one.

Move around

You can drag the Highlighter Tool around if you like. If you are like me, you will keep dragging it around for hours in eye mode..

Move around

Finally, you can load the original page by closing the Highlighter Tool.