ngx-debug-console

A floating debug console overlay for Angular 14+ applications.

Captures console.log/info/warn/error output and HTTP traffic in a collapsible panel — inspect runtime behavior without opening browser DevTools.

Author: André Rds — github.com/andrerds

Features

• 🐛 Floating FAB button with log count badge
• 📋 Filter logs by level: log, info, warn, error, http
• 🔍 Full-text search across messages and URLs
• 🌐 Auto HTTP interception via HttpInterceptor
• ⚠️ Dedicated HTTP Error Modal for failed API calls
• 💾 Export logs as .json
• 📌 Persistent show/hide preference via localStorage
• 🎨 Zero external UI dependencies — plain HTML + CSS
• ✅ Works with standalone components and NgModule

Install

npm install ngx-debug-console

Quick Start

Standalone (Angular 14+)

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { provideDebugConsole } from 'ngx-debug-console';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withInterceptorsFromDi()),
    provideDebugConsole({ enabled: !environment.production })
  ]
});

<!-- app.component.html -->
<router-outlet />
<ngx-debug-console />

NgModule (Angular 14)

// app.module.ts
import { HttpClientModule } from '@angular/common/http';
import { DebugConsoleModule, provideDebugConsole } from 'ngx-debug-console';
import { environment } from '../environments/environment';

@NgModule({
  imports: [HttpClientModule, DebugConsoleModule],
  providers: [provideDebugConsole({ enabled: !environment.production })]
})
export class AppModule {}

<!-- app.component.html -->
<ngx-debug-console />

Configuration

provideDebugConsole({
  enabled: true,                        // required — show/hide globally
  maxLogs: 500,                         // optional — max entries in memory (default: 500)
  storageKey: 'my_app_debug_console',   // optional — localStorage key (default: 'ngx_debug_console_enabled')
  interceptHttp: true                   // optional — auto-capture HTTP calls (default: true)
})

Per-Instance Override

<!-- Override global config for this instance -->
<ngx-debug-console [enabled]="isDevMode" />

Outputs

<ngx-debug-console (logsChange)="onLogsChange($event)" />

onLogsChange(logs: LogEntry[]) {
  console.log('Total logs:', logs.length);
}

Service API

Inject DebugConsoleService to interact programmatically:

import { DebugConsoleService } from 'ngx-debug-console';

@Component({ ... })
export class MyComponent {
  constructor(private debug: DebugConsoleService) {}

  // Subscribe to log stream
  ngOnInit() {
    this.debug.logs$.subscribe(logs => console.log(logs));
  }

  // Manually log an HTTP call (when interceptHttp: false)
  logHttp() {
    this.debug.addHttpLog('GET', '/api/users', 200, 142, null, { users: [] });
  }

  // Clear all logs
  clear() { this.debug.clearLogs(); }

  // Get snapshot
  snapshot() { return this.debug.getLogs(); }

  // Export as JSON string
  export() { return this.debug.exportLogs(); }
}

Types

export type LogLevel = 'log' | 'info' | 'warn' | 'error' | 'http';

export interface LogEntry {
  id: string;
  timestamp: Date;
  level: LogLevel;
  message: string;
  data?: any;
  stack?: string;
  url?: string;
  method?: string;
  status?: number;
  duration?: number;
}

export interface DebugConsoleConfig {
  enabled: boolean;
  maxLogs?: number;
  storageKey?: string;
  interceptHttp?: boolean;
}

Keyboard / Gesture Tip

You can wire up a secret gesture to toggle the console in your app:

// 5 rapid clicks anywhere to toggle
let count = 0;
document.addEventListener('click', () => {
  if (++count === 5) {
    count = 0;
    const key = 'ngx_debug_console_enabled';
    const next = localStorage.getItem(key) === 'false' ? 'true' : 'false';
    localStorage.setItem(key, next);
    window.location.reload();
  }
  setTimeout(() => count = 0, 1000);
});

Contributing

Contributions are welcome! Please read CONTRIBUTING.md before submitting a PR.

git clone [email protected]:andrerds/ngx-debug-console.git
cd ngx-debug-console
npm install
npm run build

License

MIT © André Rds