Irgendjemand hat Sie vermutlich schon gebeten, “die Entwicklertools zu öffnen und zu sagen, was in der Konsole steht”. Hier steht, wie das auf einem Mac geht, in beiden Browsern - und bei Safari muss zuerst eine Einstellung gesetzt werden, weshalb diese Frage zweimal gestellt wird.

Chrome

Drei Wege, und der erste ist der, den man sich merkt.

  • Rechtsklick auf das, was falsch aussieht, dann Untersuchen wählen. Das Panel öffnet sich mit genau diesem Element ausgewählt, und darum geht es: Sie haben nach diesem Button gefragt, nicht nach der Seite.
  • ⌥⌘I öffnet das Panel von überall aus.
  • ⌥⌘J öffnet es direkt auf dem Tab Konsole, und das ist meistens gemeint, wenn jemand sagt “schau mal nach Fehlern”.

Das Panel öffnet sich neben oder unter der Seite. Ziehen Sie an seinem Rand, wenn es zu schmal ist, und verschieben Sie es über das Dreipunktmenü oben rechts nach unten, was auf einem Laptopbildschirm angenehmer ist.

Safari

Safari versteckt das alles, bis man danach fragt, und genau diesen Schritt überspringen die meisten.

  1. Öffnen Sie Safari → Einstellungen (⌘ Komma).
  2. Wählen Sie den Tab Erweitert.
  3. Setzen Sie das Häkchen bei Funktionen für Webentwickler anzeigen.

In der Menüleiste erscheint ein Menü Entwickler, und erst danach funktioniert der Rest:

  • Rechtsklick → Element-Informationen auf einem beliebigen Teil der Seite.
  • ⌥⌘I öffnet den Web-Inspektor.
  • ⌥⌘C öffnet ihn direkt auf der Konsole.

Auf älteren macOS-Versionen heißt das Häkchen an derselben Stelle stattdessen “Menü Entwickler in der Menüleiste anzeigen”. Wenn Sie keines von beiden finden, sehen Sie auf die Einstellungen eines anderen Programms - Safari muss das vorderste Fenster sein.

Die Konsole lesen, worum es meistens eigentlich ging

Die Konsole ist der Tab, der die Frage “ist etwas kaputt” beantwortet. Sie enthält Meldungen, die die Seite geschrieben hat, während Sie sie benutzt haben, und davon gibt es drei Sorten, die man auseinanderhalten sollte.

Meist nicht das Problem
Gelbe Warnungen und Meldungen von Analytics, Chat-Widgets, Werbeskripten oder Browser-Erweiterungen. Lang, laut und größtenteils die von jemand anderem
Meldenswert
Rote Fehler, und vor allem der erste. Ein Fehler, der eine Datei von der Adresse der Seite selbst nennt, ist weit eher der Bug als die zwölf, die einen Dritten nennen

Zwei praktische Hinweise. Fehler stehen oft schon da, bevor Sie irgendetwas tun, übrig geblieben vom Laden der Seite - laden Sie die Seite neu und machen Sie dann das, was schiefgeht: Der Fehler, den Sie wollen, ist der, der genau in diesem Moment auftaucht. Und die Konsole hat ein Filterfeld: Ein Wortteil eingetippt macht aus hundert Zeilen die eine, die Sie brauchen.

Um einen Fehler weiterzugeben, klicken Sie mit der rechten Maustaste auf die rote Zeile und kopieren sie, oder markieren sie und drücken ⌘C. Ein Screenshot davon geht auch, solange die ganze Zeile zu sehen ist.

Der Tab Netzwerk, für den Fall, dass gar nichts lädt

Wenn die Seite eher leer als falsch aussieht, sagt die Konsole vielleicht nichts und der Tab Netzwerk alles. Öffnen Sie ihn, laden Sie neu und sehen Sie sich die Spalte Status an: Zahlen im 400er- und 500er-Bereich sind fehlgeschlagene Anfragen, und die URL daneben sagt, was die Seite zu laden versucht hat. Das ist der Unterschied zwischen “die Seite ist kaputt” und “eine Anfrage an eine Adresse kam mit 503 zurück”.

Eine Seite untersuchen, die auf Ihrem iPhone liegt

Nicht auf dem Telefon. Safaris Web-Inspektor läuft auf dem Mac und hängt sich über ein Kabel an das Telefon: Aktivieren Sie den Web-Inspektor auf dem Telefon unter Einstellungen → Apps → Safari → Erweitert, schließen Sie es an, und das Gerät erscheint im Menü Entwickler des Macs. Die vollständige Anleitung, und was ohne Mac zu tun ist, ist ein eigener Artikel.

Es ist das richtige Werkzeug für einen Bug, der nur mobil auftritt, und das falsche für jemanden, der nicht neben einem Mac sitzt - also für die meisten, die gerade auf einen solchen Bug gestoßen sind.

Session Replay

Kostenlose Chrome-Erweiterung. Ein Klick auf der Seite, die sich falsch verhält, erfasst den Screenshot, die Konsole und das Netzwerkprotokoll und gibt Ihnen einen Link, den Sie ins Ticket einfügen können.

Erweiterung holen

Wenn Sie derjenige sind, der jemand anderen darum bittet

Das gehört deutlich gesagt, denn diesen Artikel gibt es vor allem, weil genau diese Bitte ausgesprochen wird.

Eine Kollegin, einen Tester oder einen Kunden zu bitten, die Entwicklertools zu öffnen, den richtigen Tab zu finden, zu beurteilen, welche roten Zeilen zählen, und sie korrekt zu kopieren, verlangt mehrere Fähigkeiten auf einmal. Die meisten schicken die erste rote Zeile, die sie sehen, und das ist üblicherweise eine Analytics-Warnung, und der Austausch kostet zwei Nachrichten und einen Tag.

Die Anweisung, die funktioniert, falls Sie überhaupt fragen: Neu laden, das machen, was kaputt geht, mit ⌥⌘J die Konsole öffnen und mir alles Rote schicken. Präzise, und sie legt das Urteil auf Sie statt auf den anderen.

Die Alternative ist, nicht zu fragen. Wenn die technische Hälfte eines Berichts von der Person erfasst werden kann, die einen Knopf drückt, dann ist es keine Voraussetzung mehr für das Melden eines Fehlers, zu wissen, wo die Konsole wohnt - und der Fehlerbericht kommt mit dem an, was passiert ist, was erwartet wurde, und den Konsolen- und Netzwerkprotokollen bereits im Anhang.

Kurzübersicht

  • Chrome: Rechtsklick → Untersuchen, oder ⌥⌘I, oder ⌥⌘J für die Konsole.
  • Safari: Einstellungen → Erweitert → Funktionen für Webentwickler anzeigen, dann ⌥⌘I oder ⌥⌘C.
  • Vor dem Reproduzieren neu laden, damit die Fehler, die Sie sehen, zum Fehlschlag gehören.
  • Rote Zeilen, die die Adresse der Seite selbst nennen, zählen am meisten; die erste mehr als der Rest.