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.