Debug Mode

Enable detailed logging to understand middleware execution.

Enabling Debug Mode

Enable debug mode in your configuration:

provideGatekeeper({
  middlewares: [authMiddleware],
  onFail: '/login',
  debug: true, // Enable debug logging
});

Debug Output

When debug mode is enabled, you'll see:

• Execution order and timing
• Pass/fail status for each middleware
• Route path and context information
• Lazy module chunk names (for CanLoad)
• Blocked chunk loading warnings

Example Output

Collapsed groups in the browser console:

> 🔒 auth
  Context: route
  Path: /dashboard
  Index: 0
  ✅ Passed in 2.3ms

> 🔒 role
  Context: route
  Path: /dashboard
  Index: 1
  ✅ Passed in 1.1ms

> 🛣️ Route Guard: /dashboard
  Context Type: route
  Path: /dashboard
  ✅ All middlewares passed in 3.4ms

Global Debug Hook

Access middleware execution data from browser console:

// In browser console
const hook = window.__NGXSMK_GATEKEEPER__;
if (hook) {
  const stats = hook.getStats();
  const latest = hook.getLatestChain();
  console.log('Stats:', stats);
  console.log('Latest chain:', latest);
}

Debug Hook API

getStats()

Get execution statistics:

const stats = hook.getStats();
// Returns: { totalChains, totalMiddleware, averageTime, ... }

getLatestChain()

Get the most recent chain execution:

const chain = hook.getLatestChain();
// Returns: ChainExecutionRecord | null

getMiddlewareExecutions()

Get all middleware executions:

const executions = hook.getMiddlewareExecutions();
// Returns: MiddlewareExecutionRecord[]

getChains()

Get all chain executions:

const chains = hook.getChains();
// Returns: ChainExecutionRecord[]

Production Considerations

Debug mode is automatically disabled in production builds:

// Automatically disabled when NODE_ENV === 'production'
debug: true;

Next Steps

• Performance - Monitor performance with benchmarking
• Configuration - Learn about all configuration options