Developer Toolbar, a quick tab order checker

The product my company provides uses tab index to control the order in which a user can tab through components on a form. This is often a pain to test manually when a page has lots of components displayed on it, something which I did when I first started out as a Software Tester.  I quickly found a very popular plug-in called “Developer Toolbar” which will no doubt ring a bell with most web developers & testers which allowed me to speed up the manual check by displaying the components which have a tab index set or not.  I’ve been using it for a long time now & find it a great time saver whenever I have to check the tab order of a form somewhere.

I’ll quickly demonstrate how easy this is to use in the video below using a very basic example page.

Click to view

Resized JPEG graphicYou can see how easy it is to identify if a component has a tab order or not, anything that doesn’t have this set would show up with a -1 beside it.

The application I test has a very complex layout with many levels of inheritance for tab index from parent forms.  Most pages have 20+ components with this set on them, so you can only imagine how much easier my life is using Developer Toolbar.

It’s available on most popular browsers such as Chrome, Internet Explorer & Firefox.  If you find your testing this manually save yourself some time and download a copy.

No related posts.