"Was ist die Browser-Konsole, warum benötige ich sie und wie öffne ich sie?"
Motivation
Einige Tests erfordern das Öffnen der Konsole. Die Web-Konsole ist ein Teil der Entwicklertools, die dein Browser bereitstellt. Sie zeigt Fehlerinformationen an, die von den Entwicklern einer Website selbst implementiert wurden, oder Informationen, die dein Browser gesammelt hat, wenn das Problem beispielsweise mit JavaScript zusammenhängt. Sie hilft dem Kunden, insbesondere den Entwicklern, bei der Identifikation der Fehlerursache.
Wie du die Konsole öffnen kannst, wird in dem folgenden Artikel für verschiedene Browser und Betriebssysteme Schritt für Schritt erläutert.
Beachte, dass viele der Schritte zur Einrichtung deines Systems nur einmal durchgeführt werden müssen und dass bei jeder weiteren Verwendung weniger Schritte erforderlich sind.
Abrufen von Browser-Konsolen-Logs auf Windows und macOS
Microsoft Edge, Chrome, Firefox, Opera, Brave
Öffne die zu testende Website.
Drücke auf deiner Tastatur CTRL + Shift + I (Windows) oder alt + cmd + I (macOS).
Klicke auf den Konsolen-Tab (sofern dieser nicht bereits im Fokus ist).
Safari
Voraussetzung:
Öffne den Safari-Browser auf deinem macOS-Computer.
Öffne das Menü "Einstellungen..." (drücke auf deiner Tastatur cmd + , oder öffne Safari in der Menüleiste --> "Einstellungen...").
Navigiere zum Tab "Erweitert".
Aktiviere das Kontrollkästchen "Entwicklermenü in der Menüleiste anzeigen". Danach sollte das Entwicklermenü in der Menüleiste angezeigt werden.
Nachdem du das Entwicklermenü aktiviert hast:
Öffne die zu testende Website.
Drücke auf deiner Tastatur alt + cmd + C (macOS).
Klicke auf den Konsolen-Tab (sofern dieser nicht bereits im Fokus ist).
In allen oben genannten Fällen solltest du die geöffnete Konsole sehen. Wenn aus irgendeinem Grund die Konsole nicht gestartet wird, gibt es einen schnellen Workaround: Klicke mit der rechten Maustaste auf die Website und wähle im geöffneten Menü "Untersuchen" oder "Element untersuchen" und wechsle zum Tab "Konsole".
Wenn du die Position des Overlays für Entwicklertools ändern möchtest, klicke auf den Button mit den "drei Punkten" oben rechts im Overlay. Dort kannst du die Dock-Seite auswählen.
Abrufen von Browser-Konsolen-Logs auf Android
Chrome
Es ist nicht möglich, die Konsole auf deinem mobilen Gerät selbst zu öffnen, aber es ist möglich, sie auf einem angeschlossenen Computer anzuzeigen. Um dies zu tun, müssen die Entwickleroptionen und das USB-Debugging auf deinem Android-Gerät aktiviert sein. Wenn dies bereits erledigt ist, kannst du zum Teil 2 übergehen.
Teil 1: Bereite dein Android-Telefon auf das USB-Debugging vor
Öffne die Einstellungs-App.
Suche die Build-Nummer (normalerweise unter "Softwareinformationen" im Abschnitt "Über das Telefon").
Tippe wiederholt auf die Build-Nummer, bis du die Meldung "Sie sind jetzt ein Entwickler!" siehst.
Suche nun in den Einstellungen die Entwickleroptionen und öffne diese.
Wenn die Entwickleroptionen noch nicht aktiviert sind, aktiviere sie, indem du auf den entsprechenden Toggle-Button tippst.
Finde die Option "USB-Debugging" und aktiviere sie, indem du auf den zugehörigen Toggle-Button tippst.
Teil 2: Verbinde Chrome auf deinem Computer mit deinem Android-Gerät
Öffne auf deinem Android-Telefon die zu testende Website.
Öffne Google Chrome auf deinem Windows- oder macOS-Computer.
Gib in der URL-Leiste "chrome://inspect" ein und wechsle zu dieser Seite.
Stelle sicher, dass das Kontrollkästchen "USB-Geräte entdecken" aktiviert ist.
Verbinde dein Android-Telefon über ein USB-Kabel mit deinem Computer.
Wenn du zuvor kein USB-Debugging verwendet hast, solltest du auf deinem Android-Telefon eine Aufforderung "USB-Debugging zulassen?" sehen. Tippe auf OK. Du kannst auch "Immer von diesem Computer zulassen" auswählen und auf OK tippen, um sicherzustellen, dass du nicht immer wieder danach gefragt wirst, wenn du Browser-Protokolle abrufen möchtest.
Jetzt solltest du dein Gerät im Abschnitt "Remote Target" sehen. Außerdem werden Registerkarten, welche im Browser auf deinem Telefon geöffnet sind, angezeigt. Um mit dem Testen zu beginnen, musst du auf den Button "Untersuchen" unter der Registerkarte klicken, die du testen möchtest. Es wird ein neues Fenster mit dem Bildschirm deines Geräts und den Entwicklertools geöffnet (stelle sicher, dass der Konsolen-Tab in den Entwicklertools im Fokus steht).
Fehlersuche: Wenn das Gerät nicht erkannt wird, versuche die folgenden Lösungen:
Trenne dein Telefon vom USB-Kabel und schließe es erneut an.
Versuche, die USB-Ports an deinem Computer zu ändern.
Verwende ein anderes USB-Kabel.
Wenn die oben genannten Lösungen nicht helfen, kannst du Tipps zur Fehlerbehebung in diesem Google-Entwicklerforum-Beitrag finden.
Abrufen von Browser-Konsolen-Logs von iOS-Geräten auf macOS
Safari
Um Browser-Konsolen-Logs von Safari auf einem iOS-Gerät zu erhalten, benötigst du einen macOS-Computer. Um Browser-Logs von Safari auf deinem iOS-Gerät zu erhalten, musst du das Entwicklermenü in Safari auf deinem macOS aktivieren und in den Safari-Einstellungen auf deinem iOS-Gerät den Web Inspector aktivieren. Wenn dies bereits erledigt ist, kannst du zum Teil 2 übergehen.
Teil 1: Bereite deinen Safari-Browser auf macOS und iOS-Geräten für das Debugging vor
Öffne den Safari-Browser auf deinem macOS-Computer.
Öffne das Menü "Einstellungen..." (drücke auf deiner Tastatur cmd + , oder öffne Safari in der Menüleiste --> "Einstellungen...")
Navigiere zum Tab "Erweitert".
Aktiviere das Kontrollkästchen "Entwicklermenü in der Menüleiste anzeigen". Danach sollte das Entwicklermenü in der Menüleiste angezeigt werden.
Öffne auf deinem iOS-Gerät die Einstellungen.
Suche und öffne die Safari-App.
Scrolle nach unten und tippe auf die Option "Erweitert".
Aktiviere den Web Inspector, indem du auf den entsprechenden Toggle-Button tippst.
Teil 2: Abrufen von Konsolen-Logs
Öffne die Safari-App auf deinem iOS-Gerät und rufe die Website auf, die getestet werden soll.
Verbinde dein iOS-Gerät über ein USB-Kabel mit deinem macOS.
2a. Wenn die Aufforderung "Diesem Computer vertrauen?" auf deinem Gerät angezeigt wird, tippe auf "Vertrauen" und gib ggf. dein Gerätekennwort ein.
Öffne die Safari-App auf deinem macOS.
Klicke in der Menüleiste auf das "Entwickler"-Menü.
Bewege die Maus über den Namen deines iOS-Geräts und klicke auf den Namen der Website, die getestet werden soll.
Du solltest jetzt den Web Inspector sehen und mit dem Testen beginnen können (stelle sicher, dass der Konsolen-Tab im Web Inspector im Fokus steht).