Elemente untersuchen unter Windows und welches Bedienfeld welche Frage beantwortet

Unter Windows ist die Antwort F12, und damit ist es erledigt. Es gibt kein Menü zum Aktivieren, kein zweites Gerät, kein Kabel. Chrome, Edge und Firefox öffnen ihre Entwicklertools mit der gleichen Taste. Anders als auf einem Mac oder einem iPhone steht dir nichts im Weg.

Das bedeutet, dass die Anwendung selbst wahrscheinlich nicht das Problem ist. Das, woran Menschen einen ganzen Nachmittag hängen bleiben, kommt danach: Du wurdest nach etwas Bestimmtem gefragt, das Bedienfeld vor dir ist offensichtlich nicht das Richtige, und die Tools sagen dir nicht, auf welcher der acht Registerkarten du die Antwort findest.

Öffne es

Chrome und Edge, die die gleichen Tools sind, weil Edge auf Chromium basiert:

• F12 oder Ctrl+Shift+I öffnen das Bedienfeld, das du zuletzt verwendet hast.
• Ctrl+Shift+J öffnet direkt die Konsole.
• Ctrl+Shift+C öffnet Elemente und aktiviert gleichzeitig das Element-Auswahlwerkzeug.

Firefox unterscheidet sich bei einem der drei:

• F12 öffnet die Tools.
• Ctrl+Shift+K öffnet die Web-Konsole.
• Ctrl+Shift+C öffnet den Untersucher mit aktiviertem Auswahlwerkzeug, genau wie Chrome.

Über einen Rechtsklick auf ein Element auf der Seite und Auswahl von Untersuchen erreicht man dasselbe wie Ctrl+Shift+C und hat den Vorteil, dass das Element ausgewählt wird, auf das du geklickt hast. Auf einem Laptop, auf dem die obere Reihe auf Medientasten eingestellt ist, benötigt F12 möglicherweise Fn+F12. Die Ctrl+Shift-Tastenkombinationen vermeiden die Frage ganz.

Das Detail, das am meisten Zeit kostet

Lies die erste Tastenkombination erneut: F12 öffnet das Bedienfeld, das du zuletzt verwendet hast. Die eigene Dokumentation von Microsoft sagt genau das, und Chrome verhält sich genauso.

Der einzige Schlüssel, den jeder kennt, ist also der, der dir nicht verrät, wo du landen wirst. Jemand, der zuletzt die Registerkarte “Netzwerk” verwendet hat, drückt F12, sieht eine Fülle von Anfragen und kommt zu dem Ergebnis, dass die Konsole leer ist. Die Konsole ist nicht leer. Diese Person schaut nur nicht darauf.

Deshalb ist Ctrl+Shift+J wertvoller als F12. Es ist die Tastenkombination, die bedeutet, “das, was mein Kollege eigentlich von mir verlangt”.

Welches Bedienfeld beantwortet welche Frage

Die zwei Anfragen, die ähnlich klingen, aber es nicht sind:

“Elemente untersuchen” bedeutet das Bedienfeld Elemente. Die dahinter stehende Frage geht darum, was auf der Seite zu sehen ist: Warum hat dieser Button die falsche Farbe, warum wird der Text abgeschnitten, wie heißt dieses div. Du schaust dir das Live-HTML und das CSS an, das darauf angewendet wird.

“Öffne die Konsole und sag mir, was sie sagt” bedeutet das Bedienfeld Konsole. Die dahinter stehende Frage geht darum, was während des Seitenablaufs schiefgelaufen ist. Rote Zeilen hier sind JavaScript-Fehler, und einer davon ist sehr oft der Grund, warum der Button nichts getan hat.

Dies sind verschiedene Fragen mit verschiedenen Antworten. Deshalb hilft es niemandem, einen Screenshot des Bedienfelds Elemente jemandem zu schicken, der nach der Konsole gefragt hat.

Der dritte Fall, der weniger häufig gefordert wird, aber mehr Informationen liefert:

“Schicke mir die Registerkarte Netzwerk” bedeutet das Bedienfeld Netzwerk. Es geht darum, was die Seite angefordert hat und was zurückgekommen ist. Das Öffnen und was XHR bedeutet ist ein eigenes Kurzhandbuch, weil es eine Falle gibt: Es zeichnet nur auf, während es offen ist.

Schwach

"Ich habe die Elemente-Untersuchung geöffnet und sehe nichts, das falsch ist."

Besser

"Registerkarte Konsole, zwei rote Zeilen: Uncaught TypeError: Cannot read properties of null (reading 'value') at checkout.js:214. Passiert, wenn ich auf Zahlen klicke, sonst ändert sich nichts auf der Seite."

Was du kopieren solltest und was nicht

Wenn du die rote Zeile gefunden hast, ist der nützliche Teil der Text, keine Abbildung davon.

Mache einen Rechtsklick auf eine Konsolenmeldung und du erhältst Optionen zum Kopieren. Das Kopieren des Meldungstextes gibt derjenigen Person, die es angefordert hat, etwas, das sie in ihrem eigenen Code suchen kann. Ein Screenshot gibt ihr etwas, das sie neu eingeben muss, und Screenshots von Konsolen sind normalerweise genau oberhalb des Dateinamens und der Zeilennummer abgeschnitten, was genau der Teil ist, der es lokalisiert hätte.

Zwei Dinge, die es wert sind, einzubeziehen, und die Menschen auslassen:

• Erweitere den Fehler zunächst. Ein eingeklappter Fehler zeigt eine Zeile. Der Pfeil daneben öffnet den Stack, und der Stack ist das, was zeigt, wo es passiert ist.
• Sag, was du getan hast. Ein Konsolenfehler ohne Aktion daneben ist eine Tatsache ohne Ursache. “Es erscheint, wenn ich auf Zahlen klicke” macht es zu etwas Reproduzierbarem.

Zwei Windows-spezifische Dinge, die es wert sind, zu kennen

Eine Neuladung erzwingen ist Ctrl+F5 oder Ctrl+Shift+R. Wenn jemand sagt, “es funktioniert bei mir”, ist eine zwischengespeicherte alte Datei einer der häufigen Gründe. Eine erzwungene Neuladung ist die dreißigsekündige Methode, dies auszuschließen, bevor jemand anfängt, im Code nachzusehen.

Ctrl+Shift+P öffnet das Befehlsmenü, ein Suchfeld für jede Funktion in den Tools. Wenn du weißt, was du willst, aber nicht, wo es sich befindet, ist es schneller, es dort einzugeben, als durch Bedienfelder zu suchen. Es ist der schnellste Weg aus dem Problem “In welche Registerkarte war das nochmal?” in dem Moment, in dem du mehr als drei offene hast.

Was du daraus mitnehmen solltest

Unter Windows war das Öffnen der Tools nie der schwere Teil. Zu wissen, welche davon angefordert wurde, ist es.

Ctrl+Shift+J für die Konsole, Ctrl+Shift+C für das Element, und F12 nur, wenn du bereits weißt, wo du aufgehört hast. Kopiere dann den Text, anstatt ihn abzufotografieren, erweitere den Fehler, bevor du ihn kopierst, und sag, was du gerade getan hast, als er erschien. Das verwandelt “Ich habe mich umgesehen und es sieht in Ordnung aus” in einen Bericht, auf den jemand ohne ein zweites Gespräch reagieren kann.