Debug focus nodes

[Leffe108]

It would be useful if focusNodes was possible to see in the widget inspector tree and also see which one is currently focused.

The only solution I found to figure out which focusNode has foucs is to

1. stick in a shortcut in the three that grab the focused node from context,
2. put a break point on the print row
3. use TAB key in app to move focus to the node I have no idea where it is located
4. then tap R key
5. Try to figure out where in the tree it is located, which unfortunately is not that easy. The _debugLabel might give some clues and one can go into _parent and _children and read their _debugLabel to try to figure out where in the tree this focusNode is loocated

CallbackShortcuts(
  bindings: {
    const SingleActivator(LogicalKeyboardKey.keyR): () {
      print(FocusScope.of(context).focusedChild);
    },
  },
  child: ..
)

An alternative also helpful feature would be if I could do the following:

1. in a berakpoint with context in scope put eg FocusScope.of(context).focusedChild in the watch window
2. somehow highlight this widget in the widget inspector tree and/or in the app.

Use case

In the case I try to debug there is four buttons on the screen and when I tab from the third one, there is an invisible focus node somewhere that I think receives the focus as the fourth button does not receive focus when I have wrapped it in a Link widget. I did a simplified case that did not reproduce this bug, so in my big app I want to try to understand where this focus node is coming from.

[elliette]

Thanks for the suggestion! This is a feature we have been considering adding - glad to hear that it would be useful.

[jsiedentop]

While searching for a way to debug a similar focus problem as @Leffe108, I came across this issue. A DevTools feature that draws a frame around the currently focused element would be really helpful!

To everyone who comes by as long this feature request has not yet been implemented:

Try debugDumpFocusTree! It calls FocusManager.instance.toStringDeep(); and prints the current focus tree to the console.

[azizChebbi]

@jsiedentop it's not specified where to put it exactly in the code ? it's not specified.

[vanyasem]

Try debugDumpFocusTree!

See https://docs.flutter.dev/testing/code-debugging?%5C#print-the-focus-tree for more information on how to debug focus trees:

The debugDumpFocusTree() method returns the focus tree for the app.

The focus tree labels nodes in the following way:

• The focused node is labeled PRIMARY FOCUS.
• Ancestors of the focus nodes are labeled IN FOCUS PATH.

If your app uses the Focus widget, use the debugLabel property to simplify finding its focus node in the tree.

You can also use the debugFocusChanges boolean property to enable extensive logging when the focus changes.