So öffnen Sie die Browserkonsole in Chrome, Safari, Firefox und Edge

Der häufigste Grund, warum Benutzer ihre Browserkonsole öffnen möchten, besteht darin, Probleme bei der Seitenbearbeitung, defekte Oberflächenelemente, fehlerhafte Blöcke und andere Arten von JavaScript-Fehlern und Konflikten zu erkennen. Jeder Browser verfügt jedoch über eigene Verknüpfungen und Schritte, mit denen Sie letztendlich die Konsole öffnen und das Back-End einer von Ihnen besuchten Webseite anzeigen können.

Da es nur vier verschiedene Browser mit über 5% Marktanteil gibt (Chrome, Safari, Edge und Firefox), zeigen wir Ihnen mehrere Möglichkeiten, die Konsole auf jedem von ihnen zu öffnen. Beachten Sie jedoch, dass bei jedem Browser die Elemente und Fehler im Allgemeinen farblich gekennzeichnet und anders gekennzeichnet sind.

So öffnen Sie die Konsole in Google Chrome

In Chrome gibt es drei verschiedene Möglichkeiten, mit denen Sie die integrierte Konsole öffnen können.

Unabhängig vom verwendeten Chrome-Build können Sie die integrierte Konsole mit einer dieser Verknüpfungen öffnen und schließen:

• F12
• Strg + Umschalt + J (Befehlstaste + Wahltaste + J auf dem Mac)

Beachten Sie, dass die gleichen Verknüpfungen auch zum Ausblenden der Konsole verwendet werden können. Standardmäßig nimmt die Konsole von Google Chrome genau die Hälfte des Bildschirms ein, aber Sie können das Verhältnis einfach über den Schieberegler in der Mitte anpassen und der Browser merkt sich die Änderung beim nächsten Öffnen der Konsole.

Wenn Sie sich auf ein bestimmtes Element konzentrieren möchten, können Sie es einfach mit der Maus markieren und dann mit der rechten Maustaste darauf klicken > Prüfen. Dies öffnet die Elemente Registerkarte und Stile Registerkarte der Konsole, sodass Sie sich auf das jeweilige Element konzentrieren können.

Sie können jedoch auch über das GUI-Menü von Google Chrome auf die Konsole zugreifen. Klicken Sie dazu einfach auf die Aktionsschaltfläche in der oberen rechten Ecke und gehen Sie zu Weitere Tools > Entwicklertools.

Wenn Sie so effizient wie möglich arbeiten möchten, finden Sie hier eine Liste der Chrome Console-Verknüpfungen, die Sie verwenden können.

So öffnen Sie die Konsole auf Google Microsoft Edge

Wie jeder andere Browser verfügt auch Microsoft Edge über ein Konsolentool für Entwickler, die interaktives Debugging oder Ad-hoc-Tests durchführen.

Dieses Tool protokolliert Informationen, die mit der besuchten Webseite verbunden sind. Sie finden Informationen zu Javascript, Netzwerkanforderungen und Sicherheitsfehlern.

Die einfache Möglichkeit, das Konsolentool auf Microsoft Edge zu öffnen, ist die Verwendung der vordefinierten Verknüpfung (F12-Taste).

Sie können dies aber auch über das GUI-Menü tun, indem Sie auf das Aktionsschaltfläche (obere linke Ecke)> Weitere Tools> Entwicklertools.

Und ähnlich wie bei den anderen Browsern können Sie mit Microsoft Edge auch bestimmte Elemente mithilfe der integrierten Konsole überprüfen. Wählen Sie dazu einfach ein Element aus, klicken Sie mit der rechten Maustaste darauf und wählen Sie Element prüfen.

Hier ist eine Liste mit einigen nützlichen Verknüpfungen, die Sie in der integrierten Konsole von Microsoft Edge verwenden können:

So öffnen Sie die Konsole in Mozilla Firefox

Die integrierte Konsole von Mozilla Firefox funktioniert ein wenig anders als die anderen Äquivalente, die wir bisher analysiert haben. Damit meine ich, dass es automatisch in einem eigenständigen Fenster geöffnet wird, anstatt Ihren Browserbildschirm in zwei Hälften zu teilen.

Dies ermöglicht einen produktiveren Ansatz für Personen mit einem zweiten Bildschirm, kann jedoch Benutzern im Weg stehen, die mit einem kleinen Bildschirm arbeiten müssen. (Wenn Sie sich in diesem Szenario befinden, können Sie die Tastenkombination Alt + Tab verwenden, um zwischen Firefox und der zugehörigen Browserkonsole hin und her zu wechseln.

Um die integrierte Browserkonsole in Mozilla Firefox zu öffnen, haben Sie drei Möglichkeiten:

• Sie können entweder die universelle Verknüpfung verwenden – Strg + Umschalt + J (oder Befehlstaste + Umschalttaste + J auf einem Mac)
• Sie können es über das Aktionsmenü öffnen – Durch Klicken auf das Aktionsmenü > Webentwickler > Browserkonsole.

• Oder Sie können das direkte Öffnen der Browser-Konsole erzwingen, indem Sie Firefox über die Befehlszeile starten und das Argument ‚-jsconsole‘ übergeben:

  /Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole

Hinweis: Firefox enthält auch eine Webkonsole, die der Browserkonsole sehr ähnlich ist, jedoch auf eine einzelne Inhaltsregisterkarte und nicht auf den gesamten Browser angewendet wird.

So öffnen Sie die Konsole in Google Safari

Im Gegensatz zu allen anderen Browsern, die wir uns bisher angesehen haben, ist die Fehlerkonsole in Safari standardmäßig deaktiviert. Aus diesem Grund müssen Sie einen zusätzlichen Schritt ausführen, um es in Ihrem Browser zu aktivieren.

Öffnen Sie dazu Safari und klicken Sie auf das Einstellungen Tab. Sobald Sie im Einstellungen Klicken Sie auf der Registerkarte Erweitert auf die Registerkarte Erweitert und aktivieren Sie das Kontrollkästchen für Entwickeln anzeigen Menü in der Menüleiste.

Nachdem Sie die Konsole nun sichtbar gemacht haben, können Sie sie öffnen, indem Sie auf das Entwickeln Tab oben und klicken auf Fehlerkonsole anzeigen.

Beachten Sie, dass Safari die Fehlerkonsole dynamisch anzeigen kann. Wenn das Fenster beim Öffnen der Konsole klein ist, sehen Sie es in einem ganz anderen Fenster.

Falls Sie die Konsole im selben Fenster wie Ihre Seite öffnen möchten, müssen Sie sicherstellen, dass das Browserfenster die volle Größe hat, bevor Sie die Fehlerkonsole öffnen.