DebugCart

If you ever need to quickly see the properties and values that useShoppingCart() has at a given moment, you can use the DebugCart component. It will display a table of all of the properties — not methods — and let you log any objects to the console.

When using this component, you still must have <CartProvider> wrapped around your application. See the documentation for CartProvider if you don't know how to do that.

This is an example of what the DebugCart component looks like.

Copy
import { DebugCart } from 'use-shopping-cart'
export function App() {
  return (
    <>
      <p>This is an example of what the DebugCart component looks like.</p>
      <DebugCart />
    </>
  )
}

Without any style modifications, <DebugCart /> will present more like it does in the following screenshot. It uses fixed positioning by default.

Debugging Tips

If you don't want to drop this component into your code or you're just more fond of the React DevTools extension, as of version 2.5.0 use-shopping-cart now uses React's useDebugValue hook to allow you to easily inspect all of the values that useShoppingCart() returns. In order to find the debug value, open React DevTools and inspect a component that calls useShoppingCart(). Under "Hooks" you will see "ShoppingCart", if you look inside it you will find the "DebugValue".