Debugging a render tree of an application (Documentation)

[Arunoday]

Hello Flutter Dev

How do I debug or view a render tree of a flutter application.

For instance if I ran the hello_world example I need to be able to debug the files under the package rendering.

I did look at the Contributing.md and I didn't quite find what I was looking for unless I totally overlooked.

Any pointers appreciated.

Thank you

[Eric Seidel]

Several ways.  Two I'd start with:

https://flutter.io/inspector/

If you'd like to work from the command line, its' also possible to dump the current rendering tree in a text format by pressing the "t" key while `flutter run` is running.  (At least I think that's the key, you can always press '?' to see the available options.)

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Eric Seidel]

Here is the output from `?`

> flutter run

Running "flutter packages get" in hello_world...             4.1s

Launching lib/main.dart on iPhone X in debug mode...

Starting Xcode build...                                          

 ├─Assembling Flutter resources...                    1.1s

 └─Compiling, linking and signing...                  9.5s

Xcode build done.                                           20.7s

Syncing files to device iPhone X...                          2.5s

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".

An Observatory debugger and profiler on iPhone X is available at: http://127.0.0.1:61275/

You can dump the widget hierarchy of the app (debugDumpApp) by pressing "w".

To dump the rendering tree of the app (debugDumpRenderTree), press "t".

For layers (debugDumpLayerTree), use "L"; for accessibility (debugDumpSemantics), use "S" (for traversal order) or "U" (for inverse hit test order).

To toggle the widget inspector (WidgetsApp.showWidgetInspectorOverride), press "i".

To toggle the display of construction lines (debugPaintSizeEnabled), press "p".

To simulate different operating systems, (defaultTargetPlatform), press "o".

To display the performance overlay (WidgetsApp.showPerformanceOverlay), press "P".

To save a screenshot to flutter.png, press "s".

To repeat this help message, press "h". To quit, press "q".

[Arunoday]

That helped. What if I wanted to step through the Paint / Renderer code, would be just sufficient to add a breakpoint and run one of the example apps ? or is there are different process for that ?

Thanks

[Arunoday]

NM. I was able to step through with ease.

thanks

[Eric Seidel]

Flutter's framework (as you've discovered) is written in all the same language as your App, with the intention that you be able to read, debug and step through it (and even fork and edit it if needed).

Glad it's working!