How to debug layout?

[spaghetti-software-inc]

Hello,

How can I debug a textual app layout at run-time? In HTML/CSS/JS, we can use borders around elements to visually debug. It would also be useful to be able to output the layout state (width/height/position) of each widget in the app at run-time; I'm not sure how to do this.

Thanks

[willmcgugan]

You can put borders around things in Textual as well.

You can do self.log(self.css_tree) from any widget to output the DOM to the textual console.

[lostwong]

I've found that the live editing feature of the textual command line application works really well. The short of it is:

• Install the textual-dev package
• Run your app with textual run --dev <script>
• Make changes to the .tcss file as needed

Ref: https://textual.textualize.io/guide/devtools/#live-editing