Der Konsolen-Logger erfasst alle Konsolenausgaben (console.log, console.warn, console.error, console.info) und zeigt sie in einem Floating-Panel direkt auf der Seite an. Sehen Sie JavaScript-Fehler, Debug-Nachrichten und Warnungen in Echtzeit, ohne Browser-DevTools zu öffnen. Nachrichten sind nach Typ farbkodiert und enthalten Zeitstempel und Stack-Traces für Fehler.
Browser-DevTools nur zum Prüfen der Konsolenausgabe zu öffnen, nimmt wertvollen Bildschirmplatz in Anspruch — besonders auf kleineren Bildschirmen oder wenn Sie die vollständige Seite sehen müssen, während Sie Protokolle überwachen. Der Konsolen-Logger bietet eine leichtgewichtige Alternative: ein Floating-Panel, das alle Konsolenausgaben zeigt, während sie auf der Seite anfallen. Das Panel erfasst console.log, console.warn, console.error, console.info und nicht abgefangene Ausnahmen mit vollständigen Stack-Traces. Nachrichten sind farbkodiert (Fehler in Rot, Warnungen in Gelb, Info in Blau, Logs in Weiß/Grau) und enthalten Zeitstempel. Filter-Buttons ermöglichen es Ihnen, nur bestimmte Nachrichtentypen anzuzeigen. Das Panel ist verschiebbar, vergrößerbar und halbtransparent.
Konsolennachrichten erscheinen in Echtzeit, während sie protokolliert werden. Sehen Sie Seiteninitialisierungsprotokolle, API-Antwortbehandlung, Nutzerinteraktionsereignisse und Fehlermeldungen — alle live streamend im Floating-Panel.
Fehler in Rot, Warnungen in Bernstein/Gelb, Info in Blau und Standard-Logs in Weiß/Grau. Unterscheiden Sie sofort zwischen einem kritischen Fehler und einer Routine-Log-Nachricht nur durch die Farbe.
JavaScript-Fehler enthalten den vollständigen Stack-Trace mit Dateinamen, Funktionsnamen und Zeilennummern. Klicken Sie auf die Dateireferenz, um genau zu identifizieren, wo der Fehler entstanden ist, ohne DevTools zu öffnen.
Filter-Buttons oben ermöglichen das Ein-/Ausblenden bestimmter Nachrichtentypen: Alle, Nur Fehler, Nur Warnungen, Nur Info, Nur Logs. Der Zähler-Badge auf jedem Filter zeigt, wie viele Nachrichten dieses Typs existieren.
Jede Nachricht zeigt die Zeit, zu der sie protokolliert wurde (HH:MM:SS-Format). Verfolgen Sie die Abfolge von Ereignissen, identifizieren Sie Performance-Probleme und korrelieren Sie Nachrichten mit Nutzeraktionen.
Löschen Sie alle Nachrichten, um neu zu beginnen, oder lassen Sie sie sich während der Seiteninteraktion ansammeln. Das Panel zeigt die Gesamtanzahl der Nachrichten und kann minimiert werden, wenn es nicht benötigt wird.
Müssen Sie Konsolenausgaben sehen, während die vollständige Seite sichtbar bleibt? Der Konsolen-Logger ermöglicht die Überwachung von Protokollen, ohne dass das DevTools-Panel Bildschirmplatz belegt. Perfekt auf kleineren Bildschirmen oder während Präsentationen.
Wenn Ihr JavaScript API-Antworten protokolliert, zeigt der Konsolen-Logger sie in Echtzeit. Sehen Sie Anfrage-/Antwortdaten ohne zwischen Seite und DevTools zu wechseln.
Einige JavaScript-Fehler scheitern still — keine sichtbare UI-Änderung, aber ein Fehler in der Konsole. Der Konsolen-Logger macht diese auf der Seite sichtbar, damit Sie sie beim normalen Surfen bemerken.
Halten Sie während einer Live-Demo das Konsolen-Logger-Panel in einer Ecke sichtbar. Wenn etwas schiefgeht, können Sie die Fehlermeldung sofort sehen, ohne die Demo zu unterbrechen, um DevTools zu öffnen.
Drittanbieter-Scripts (Analytics, Chat-Widgets, Werbenetzwerke) werfen oft Fehler oder Warnungen. Der Konsolen-Logger erfasst diese, damit Sie den Zustand externer Abhängigkeiten überwachen können.
Öffnen Sie das DevSuite Pro Floating Dock und klicken Sie auf das Symbol des Konsolen-Loggers. Ein Floating-Panel erscheint und beginnt sofort, Konsolenausgaben zu erfassen.
Verwenden Sie die Seite normal — klicken Sie auf Buttons, navigieren Sie, senden Sie Formulare. Konsolennachrichten erscheinen im Panel, während sie vom JavaScript der Seite protokolliert werden.
Verwenden Sie die Filter-Buttons, um nur Fehler, Warnungen oder Logs anzuzeigen. Die Zähler-Badges zeigen, wie viele Nachrichten für jeden Typ existieren.
Für Fehlermeldungen erweitern Sie den Stack-Trace, um die Datei und Zeilennummer zu sehen, wo der Fehler aufgetreten ist. Nutzen Sie dies, um die Quelle des Fehlers zu identifizieren.
Klicken Sie auf Löschen, um das Panel zurückzusetzen, oder deaktivieren Sie das Tool, um es zu schließen. Kein Überrest verbleibt auf der Seite.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 39+ Entwickler-Tools für Ihren Browser frei.
