How do I Debug Data In UI?

User Interface is full of button, text, color, positioning, and data. it’s not only about how to represent the data, but also we should make sure it’s show the correct data. I’m focusing UI in web development that using HTML and javascript.

Data in another hand is bit information change overtime, manage by user, stored in database and managed by backend API (Application Programming Interface). Sometimes, frontend only show user-needed-data only and hide from UI data like id data, we should verify it shown the correct data.

So, recently I’m working on heavy data structure and small-thing matters because related to financial applications. I found hard to debug if I only use console.log in javascript to show behaviour of the applications also it’s spend so much time to find the correct console.log and remove it in production phase. For example, fetch data and show it into UI will require checking on raw result of API which is JSON formatted data. It will hard to debug if single page have multiple fetch of data. So, I should find a way to show debugged value IN THE UI too, and it should removed in production phase automatically.

I’m using Vite and React.js as frontend tools. Run code in development mode are easy, we can use env variable and Vite have constant value to show development mode in code, import.meta.env.DEV. This is perfect. I can create single component to show debugged value and hide it whenever it goes to production.

The idea is a component that show information ONLY in development, so we can create like this

const DebugMode = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & Props
>(({ className, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "div"

  if (import.meta.env.DEV == false || !props.children) {
    return null;
  }

  return (
    <Comp
      ref={ref}
      className={cn(className, 'outline outline-1 outline-red-500 debug-mode text-muted-foreground bg-muted hover:text-black')}
      {...props}
    ></Comp>
  )
});

I also add some style using tailwind to make it looks like debugging-mode. I also use Redis Slot to make it a slot-like, you may require install it into your project if using this code.

Usually I use this to debug id in data

  <DebugMode className='text-xs inline'>
    {item.id}
  </DebugMode>

or debug some object

  <DebugMode>
      <pre className="text-xs">{JSON.stringify({ data }, null, 2)}</pre>
  </DebugMode>

By doing this, we can override NODE_ENV to choose what env should we use.

# Run as development
$ npm run dev

# Override env to set production
$ NODE_ENV=production npm run dev

For example, this is how it looks.

So, now I can debug the data directly from UI without bothering check on console.

In summary, using this method we can easily debug any data as alternative debug tools beside console.log. I use this in most of my project to make it easy and fast in development.

So, that’s it. I hope this help you on building your project. Thank you for your reading!