Developer tools for debugging

[fbwoolf]

What are the best tools people are using to debug our code? I don't have access to class names and/or components in the React dev tools. What am I missing here?

These images are taken from the explorer, but starting the discussion here bc I believe it is the same in the web wallet and would love help understanding the best dev tools to work with our UI library.

[aulneau]

These issues are not exactly due to our UI library, but our general practices (or lack thereof) when writing components.

For the CSS classnames, we might need to add the emotion babel plugin for better class names during dev in the UI library, we have it already in the explorer. https://emotion.sh/docs/@emotion/babel-plugin

For the Anonymous components in the react dev tools, this is due to how we make use of forwardRef or memo, and how the internal structure of the UI components are built. You can add filters to the dev tools to filter only the things you care about:

[aulneau]

Sometimes I don't understand why there is so much code to do such simple things.

I wonder about this too, but then I remember that even though it seems like they are "simple things", they are all actually pretty complex! and it's nice that all the complexity is hidden away and we can just do something like this:

const MyCoolButton = (props: BoxProps) => <Box as="button" size={[null, 'sm', 'lg']} display={['none', 'block']} color={[null, 'blue', 'red']} />

This will give us a <button> that will not be visible on mobile breakpoints, on tablet/mid sized screens the button will be small and the color will be blue, and on large screens button will be large and the color will be red!

[fbwoolf]

May I ask, what is it that you're hoping for as far as a dev experience goes for needing CSS class names? I personally have not thought of needing a className in years, and it might be because I'm thinking about the components/styles differently.

I typically look for class names or component names in the UI and then match them up in the code to know where I need to make changes. As someone new to the code base, I need a reference point. I just came from working with a pretty robust design system built purely in css, so we relied heavily on classNames ...not CSS in JS.

Definitely good component names and the ability to use the React dev tools replaces needing classNames, I agree.

[aulneau]

I typically look for class names or component names in the UI and then match them up in the code to know where I need to make changes. As someone new to the code base, I need a reference point. I just came from working with a pretty robust design system built purely in css, so we relied heavily on classNames ...not CSS in JS.

Definitely good component names and the ability to use the React dev tools replaces needing classNames, I agree.

Yeah, that makes total sense! coming from a world where more vanilla CSS is used, this would be a big jump and shift towards something different.

For me, and maybe this will help you, I typically rely pretty heavily on the select element tool in both the standard chrome dev tools and the react dev tools panel, which then helps me see the component tree a bit better and find the component I'm looking for.

Kapture.2021-06-23.at.15.44.02.mp4

I think using practices like these can really help with debugging, and I agree, I def think we should dig into how better to add component names to classes in dev mode if possible!

[fbwoolf]

Yep, that is what I use! 💯 Btw, thanks for the links!

[fbwoolf]

@aulneau filtering components is helping a lot! 👍