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
- 🐛 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
npm install ngx-debug-console// 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 />// 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 />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)
})<!-- Override global config for this instance -->
<ngx-debug-console [enabled]="isDevMode" /><ngx-debug-console (logsChange)="onLogsChange($event)" />onLogsChange(logs: LogEntry[]) {
console.log('Total logs:', logs.length);
}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(); }
}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;
}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);
});Contributions are welcome! Please read CONTRIBUTING.md before submitting a PR.
git clone git@github.com:andrerds/ngx-debug-console.git
cd ngx-debug-console
npm install
npm run buildMIT © André Rds