Add a built-in egui debugger

[emilk]

Debugging layout problems and similar in egui is painful.

I'd like to have a mode where egui records events to an event stream containing:

• Shapes being painted
• Ui creation
• Widget placements
• changes to min_rect and max_rect
• custom text log events
• drag/click begin/end
• …

This would then be paired with a viewer of these events, where the user can step through them at their own pace and figure out exactly what happened when.

For instance: you hit a special key-combo, and the next egui frame is recorded as an event stream, and a new egui::Window or viewport pops up that shows this recording, with controls for stepping through the events one at the time. Each event would be visualized as rectangles and shapes in a canvas area.

[TheRedXD]

I think one thing that would be useful on top of this is a way to inspect elements easily (similar to the inspect element in browsers), something like that could definitely help locating elements that are being sized incorrectly

[juancampa]

I've been working on an "inspector" plugin that let's you jump from the UI to the code (which is technically going a step further than the browser). Currently it only works on web but it would be pretty easy to extend it for all platforms. Web was actually the hardest since it doesn't provide good call stacks but we work around it by using the DWARF data.

Not sure if there are other efforts on this front but if @emilk is on board I can clean it up and push a draft PR this week. This can be in its own crate since it's entirely implemented as a plugin, and can be extended to replace the current "Debug on hover"/hold-all-modifiers functionality.

https://github.com/user-attachments/assets/8475f0e0-9541-45e2-8df2-5e83c6af44ea

[emilk]

Wow, that looks AMAZING!

Did you see @lucasmerlin's accessibility inspector plugin, https://github.com/emilk/egui/pull/7368 ? There is a lot overlap here, though yours is obviously more feature complete. Are you also using the accessibility labels If so, this PR could also be of interest to you:

• https://github.com/emilk/egui/pull/7386

I'm happy to hear that this can be a standalone crate! Does it belong in the main egui repo is the question? 🤔 Probably! That way we can easily test it with egui_demo_app and deploy it to egui.rs

[juancampa]

Wow, that looks AMAZING!

Thanks!

Are you also using the accessibility labels?

Not at all but wondering if it would make sense to do so 🤔. The inspect UI could show additional information about each widget (including accessibility stuff).

Left some notes in #7652 and a live demo. It'd be nice to merge that before the next egui release so we can publish it as a crate and have others try it out. It'd be nice to get some feedback.