Skip to content

Devtools

Devtools

Cozy-client exposes a devtool that can be injected in an app for debug and better developer experience. It is inspired by the awesome devtools for react-query.

To activate it, just run in your browser console:

flag('debug', true)

Usage

Before using the devtools, you need to install cozy-ui and react-inspector.

yarn add cozy-ui # >= 48.0.0
yarn add react-inspector # >= 5.1.0

Next, you need to add it to your app, inside a CozyProvider.

import CozyClient, { CozyProvider } from 'cozy-client'
import CozyDevtools from 'cozy-client/dist/devtools'

const App = () => {
  return <CozyProvider client={client}>
     /* Your app is here */
     { process.env.NODE_ENV !== 'production' ? <CozyDevtools /> : null }
  </CozyProvider>
}

Panels

  • The devtools is made of several “panels”.
  • There are default panels and the app can also inject its own adhoc panels.

Queries

Shows current queries inside cozy-client cache. Allows to see the data of the query. The execution time is also shown, and is very valuable to track down performance issues. It uses the execution statistics collected from CouchDB.

Flags

Shows all the current flags and allow to modify them.

Libraries

Show library versions based on the global VERSIONS variable that should be injected by the app. If it is defined, the panel will be blank.

If you use the PouchLink to synchronize your data to PouchDB, you can use the optional devtool PouchLink devtool panel. Since PouchDB is optional, it is not available by default and you need to explicitly tell the Devtools to display it.

import PouchDevtools from 'cozy-client/dist/devtools/Pouch'

() => <CozyDevTools panels={{ id: 'pouch', Component: PouchDevtools}} />

Ideas for next features

  • Performance tips in query panels

    • Show index related tips
    • Show slow queries
    • Show repeating queries
    • Show queries downloading too much data

  • Actions on queries

    • Reset data inside query
    • Refetch
    • Set to error
    • Delete from store

If you have any other idea, please open an issue 👍