Debug Context

DebugContext provides a developer debug panel that overlays the current page state — API payloads, form values, context state, and metadata — for debugging during development.

Import


import { DebugContext } from "@phpcreation/frontend-crud-react-nextjs-bundle/contexts/DebugContext";

Usage

Wrap the debug panel trigger in DebugContext:


import { DebugContext } from "...";
 
<DebugContext>
  {/* Debug panel toggle is rendered automatically */}
  <YourPageContent />
</DebugContext>

Enabling Debug Mode

The debug panel is only available when the NEXT_PUBLIC_DEBUG_MODE environment variable is set:


NEXT_PUBLIC_DEBUG_MODE=1

Never enable debug mode in production. The panel may expose sensitive API payloads and form data.

What It Shows

Current entity config
API request/response payloads
Form field values and validation errors
Active filters and sort state
Entity metadata (columns, types)

Listing Context
Detail Show Context