20

Are there any tools or plugins for web browser to debug tabindex functionality? It seems that tabindex attributes are correct but it behaves not as expected. Or do I do something wrong?

Cristophs0n
  • 1,246
  • 3
  • 19
  • 27
Artsiom Anisimau
  • 1,139
  • 3
  • 11
  • 26

3 Answers3

36

You can use the developer tools in Chrome, Firefox, and IE by pressing F12 and navigating to the console tab and then insert the following:

document.addEventListener('keyup', function() {console.log(document.activeElement)})

Now when you tab through the focusable items the activeElement including its tabindex, if you have one set, will be printed to the console.

Cristophs0n
  • 1,246
  • 3
  • 19
  • 27
14

If you use FireFox, get the Webdeveloper toolbar. You can display the tab index, this may help you debug.

And here's where to find that option:

enter image description here

Alex
  • 8,875
  • 2
  • 27
  • 44
4

In Chrome you can right-click an element and select "Inspect" from the context menu. Then switch to the Console and type $0.tabIndex.

Explanation: $0 - $4 refer to the last 4 elements you have inspected. tabIndex is a standard property of the DOM API's HTMLEelement.

See https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference

Jakub Holý
  • 6,019
  • 3
  • 33
  • 33