Focus DevTools — Browser Developer Tools for Focus Debugging

In this tutorial, you will learn about Focus DevTools. We cover key concepts, practical examples, and best practices to help you master this topic.

Browser developer tools help debug focus management by inspecting tab order, focusable elements, and focus styles, with Chrome, Firefox, and Edge providing specialized Accessibility panels.

In this tutorial, you'll learn Focus Management debugging tools.

What You'll Learn

By the end of this lesson, you'll know how to use Chrome DevTools, Firefox Accessibility Inspector, and Edge DevTools for focus debugging.

Why It Matters

Focus bugs are hard to catch during development. DevTools make focus behavior visible and debuggable.

Real-World Use

DodaTech's developers use Chrome DevTools Accessibility panel daily to verify focus order and tabindex values.

Focus Debugging Tools

flowchart TD
  A[Focus Debugging] --> B[Chrome DevTools]
  A --> C[Firefox Inspector]
  A --> D[Edge DevTools]
  B --> E[Accessibility panel]
  B --> F[Inspect tab order]
  C --> G[Accessibility Inspector]
  C --> H[Check tab order]
  D --> I[Similar to Chrome]
  E --> J[Source order viewer]
  E --> K[Accessibility tree]
  G --> L[Check focusable elements]

Chrome DevTools

1. Open Chrome DevTools (F12)
2. Go to Elements panel
3. Select Accessibility tab
4. View computed accessibility properties
5. Check "Source Order Viewer" in Elements panel
6. Check the "Focusable" badge on elements

// In the Console, find focusable elements
$$('*').filter(el => el.matches(':focus'));
$$('[tabindex]').map(el => ({ tag: el.tagName, tabindex: el.getAttribute('tabindex') }));

Firefox Accessibility Inspector

1. Open Firefox DevTools (F12)
2. Go to Accessibility panel
3. Enable "Check for issues"
4. Use "Tab order" display
5. Inspect accessibility tree
6. Check "Focusable" property on nodes

Edge DevTools

Edge uses the same DevTools as Chrome. Additionally:

1. Open Edge DevTools (F12)
2. Elements > Accessibility
3. Check "Automatically show focus ring after keyboard navigation"

Programmatic Focus Debugging

// Log focus changes
document.addEventListener('focusin', (event) => {
  const el = event.target;
  console.log('Focus moved to:', {
    tag: el.tagName,
    id: el.id,
    class: el.className,
    text: el.textContent?.trim().slice(0, 50),
    tabindex: el.getAttribute('tabindex'),
    role: el.getAttribute('role'),
    rect: el.getBoundingClientRect()
  });
});

// Highlight focused element
document.addEventListener('focusin', (event) => {
  document.querySelectorAll('.focus-debug').forEach(el => el.remove());
  const debug = document.createElement('div');
  debug.className = 'focus-debug';
  debug.style.cssText = 'position:fixed;top:0;left:0;right:0;background:red;color:white;z-index:99999;padding:4px;';
  debug.textContent = `Focused: ${event.target.tagName}${event.target.id ? '#' + event.target.id : ''} ${event.target.textContent?.trim().slice(0, 50)}`;
  document.body.appendChild(debug);
});

Common Mistakes

• Not checking the accessibility tree: The visual DOM may differ from the accessibility tree.
• Forgetting to test with actual keyboard: DevTools show structure but not behavior.
• Only checking the first focus target: Verify the full tab order sequence.
• Ignoring computed roles and properties: The actual accessibility behavior may differ from the HTML.
• Not using source order viewer: Visual order may differ from source order.

Practice and Challenge

1. Which panel in Chrome DevTools shows accessibility properties? The Accessibility tab in the Elements panel.

2. How do you find all focusable elements in the Console? $$('*').filter(el => el.matches(':focus')).

3. What does Firefox's "Tab order" display show? The order in which elements receive focus when pressing Tab.

4. How can you log focus changes programmatically? Listen for focusin events and log the target.

5. Challenge: Use Chrome DevTools to inspect the focus order on a complex page. Verify the tab order matches the expected sequence.

FAQ

Mini Project

Create a debug script that logs every focus change on the page. Use it to trace the focus order through a complex form or application.

What's Next

Continue to Focus Project to build an accessible dialog with full focus management.