Debug view

[saitonakamura]

What is the best way to debug why Boxes/children ended in places where they ended. I'm trying yo understand what gone wrong in my markup and having wireframe of flex container/highlight of the margins would be very helpful. But I don't understand how to do this properly (because of center anchor, for instance you can't set this on a flex). Is there any example I can look up?

For instance I can do this, but I can't really figure out whether it mesh inside flex positioned incorrectly or items themselves
https://codesandbox.io/s/eager-elgamal-hbqz3?file=/src/index.tsx

[saitonakamura]

Ok, I think I got, I needed centerAnchor on a box (since it uses native three geometries). But it will still be nice to have this built-in

[ChrisCrossCrash]

I was going to make a new issue for exactly this! It would be very helpful if you could just put a debug prop in the root Flex element. Something like this:

<Flex debug>
   ...
</Flex>

Then it would put wireframes around all the elements and flex containers. It could also show the anchors.

I've been trying to learn this library all day today, but it has been very difficult because there isn't an easy way to visualize the flex layout.

[proelf98]

Yes would love it. Would it be possible to set a material to the Container?