Debugging with Console

Connect your running app to dcupl Console for live inspection of lists, queries, and data flow.

Prerequisites

Install @dcupl/connect

npm install @dcupl/connect
yarn add @dcupl/connect
pnpm add @dcupl/connect

Connect Your App

Add the connect module to your dcupl instance:

app.ts
import { Dcupl } from '@dcupl/core';
import { DcuplConnect } from '@dcupl/connect';

const dcupl = new Dcupl();
// ... your model and data setup

await dcupl.init();

// Connect to Console
const connect = new DcuplConnect({ dcuplInstance: dcupl });
connect.init();

What You Can Inspect

Once connected, open Console to see:

  • Live list states – View all active lists and their current items
  • Query conditions – See applied filters, sorts, and pagination
  • Data flow – Monitor data loading and updates in real-time
  • Model structure – Inspect registered models and their properties

Development Only

Disable the connect module in production:

app.ts
if (import.meta.env.DEV) {
  const connect = new DcuplConnect({ dcuplInstance: dcupl });
  connect.init();
}

Next Steps