Web-Konsole

Die Web-Konsole

1. zeichnet Informationen auf, die mit einer Webseite verknüpft sind: alle Netzwerkanfragen, JavaScript, CSS und Sicherheitsfehler, sowie Fehler-, Warn- und Informationsmeldungen, die speziell von JavaScript-Code auf einer Seite verursacht werden
2. erlaubt es Ihnen, mit einer Webseite zu interagieren, indem Sie JavaScript-Befehle auf einer Seite ausführen

Es ist ein Ersatz für die alte Fehlerkonsole, die in Firefox eingebaut war: sie hat Fehler, Warnungen und Nachrichten von allen Internetseiten, vom Browser-Code und Add-ons angezeigt. Das machte es viel schwerer zu sehen, welche Nachrichten zu welcher Internetseite gehören. Die Web-Konsole ist immer mit einer spezifischen Internetseite verknüpft und zeigt Informationen an, die mit dieser Seite zusammenhängen.

Der andere Teil der Fehlerkonsole ist die Browserkonsole, die Fehler, Warnungen und Meldungen vom Browser-Code und von Add-ons anzeigt.

Die Web-Konsole öffnen

Um die Web-Konsole zu öffnen, wählen Sie "Web-Konsole" vom Web-Entwickler Untermenü im Firefox-Menü (oder Extras-Menü, wenn Sie die Menüleiste aktiviert haben oder Mac OS X benutzen) aus, oder halten Sie die Tasten Steuerung-Umschalt-K (Befehl-Wahl-K auf einem Mac) gedrückt.

Die Browser-Werkzeuge werden zusammen mit der Web-Konsole (sie wird in der DevTools Werkzeugleiste nur "Konsole" genannt) am unteren Teil des Browser-Fensters angezeigt:

Unter der Symbolleiste der Entwicklerwerkzeuge ist die Oberfläche der Web-Konsole in drei Abschnitte eingeteilt:

• Symbolleiste: oben ist eine Symbolleiste, die Schaltflächen mit Beschriftungen wie "Netz", "CSS" und "JS" beinhaltet. Diese Symbolleiste wird verwendet, um die Nachrichten zu filtern
• Kommandozeile: unten ist eine Kommandozeile, in der Sie JavaScript-Befehle eingeben können
• Meldungsansicht: zwischen der Symbolleiste und der Kommandozeile zeigt die Web-Konsole Meldungen im größten Teil des Fensters an

Meldungsansicht

Der Großteil der Web-Konsole wird von der Meldungsansicht genutzt:

Die Meldungsanzeige zeigt folgende Meldungen an:

• HTTP-Anfragen
• JavaScript-Warnungen und -Fehler
• CSS-Warnungen, Fehler und DOM-Neuberechnungen
• Sicherheitswarnungen und -fehler
• console API-Aufrufe
• Eingabe/Ausgabe-Meldungen: Befehle und Ergebnisse der Befehle, die dem Browser über die Kommandozeile der Web-Konsole geschickt wurden.

Jede Nachricht wird in einer neuen Zeile angezeigt:

HTTP-Anfragen

HTTP-Anfragen werden in einer Zeile dargestellt, die folgendermaßen aussieht:

Wenn Sie auf eine Meldung klicken, sehen Sie so ein Fenster mit mehr Informationen über die Anfrage und Antwort:

Durch Herunterscrollen sehen Sie die Antwort-Zeilen. Standardmäßig werden Anfrage- und Antwort-Inhalte nicht aufgezeichnet: um dies zu tun, wählen Sie im Auswahlmenü der Web-Konsole "Anfrage- und Antwort-Inhalte aufzeichnen" aus, laden Sie die Seite neu und öffnen Sie das Fenster "Netzwerk-Request untersuchen".

Nur das erste Megabyte an Daten wird für alle Anfrage- und Antwort-Inhalte aufgezeichnet, weshalb sehr große Anfragen und Antworten gekürzt werden.

JavaScript-Fehler und Warnungen

JavaScript-Meldungen sehen folgendermaßen aus:

CSS-Fehler, -Warnungen und DOM-Neuberechnungen

CSS-Meldungen sehen folgendermaßen aus:

Standardmäßig werden CSS-Warnungen und Meldungen nicht angezeigt.

DOM-Neuberechnungen

Die Web-Konsole zeichnet auch DOM-Neuberechnungen unter der CSS-Kategorie auf. Eine Neuberechnung bezeichnet der Vorgang, bei dem der Browser das Layout von der ganzen Seite oder von Teilen berechnet. Neuberechnungen treten auf, wenn Änderungen auf einer Seite aufgetreten sind, von denen der Browser denkt, dass das Layout der Seite beeinflusst wurde. Viele Ereignisse können Neuberechnungen auslösen, inklusive: Skalieren des Browser-Fensters, Aktivieren von Pseudoklassen wie :hover oder Manipulieren des DOM in JavaScript.

Da Neuberechnungen manchmal Rechenaufwendig sind und die Benutzeroberfläche direkt beeinflussen, können sie einen großen Einfluss auf die responsiveness einer Webseite oder Web-App haben. Indem Neuberechnungen in der Web-Konsole aufgezeichnet werden, können Sie sehen, wann Neuberechnungen erzwungen werden, wie lange es dauert, sie auszuführen, ob die Neuberechnungen synchrone Neuberechnungen sind und von welchem JavaScript-Code sie erzwungen werden.

Neuberechnungen werden als "Logbuch"-Meldungen angezeigt, im Gegensatz zu CSS-Fehlern oder Warnungen. Standardmäßig sind sie deaktiviert. Sie können sie aktivieren, indem Sie auf die "CSS"-Schaltfläche in der Symbolleiste klicken und "Logbuch" auswählen.

Jede Meldung wird mit "reflow" markiert und zeigt die Zeit an, die für die Neuberechnung gebraucht wurde:

Wenn die Neuberechnung synchron ist und von JavaScript-Code erzwungen wurde, wird auch ein Link zur Codezeile angezeigt, die die Neuberechnung erzwungen hat.

Klicken Sie auf den Link um die Datei im Debugger zu öffnen.

Synchrone and asynchrone Neuberechnungen

Wenn eine Änderung das aktuelle Layout ungültig macht - zum Beispiel, wenn der Browser-Fenster skaliert wird oder JavaScript-Code das CSS eines Elements ändert - wird das Layout nicht augenblicklich neu berechnet. Stattdessen geschieht die Neuberechnung asynchron, sobald der Browser entscheidet, dass es notwendig ist (üblicherweise, wenn das Aussehen des Browser-Fensters neu gezeichnet wird). So kann der Browser mehrere ungültig machende Änderungen sammeln und alle auf einmal neuberechnen.

Wenn ein JavaScript-Code jedoch CSS ausliest, das geändert wurde, muss der Browser eine synchrone Neuberechnung durchführen um das berechnete Aussehen zurückzugeben. Folgender Code-Beispiel löst beim Aufruf von window.getComputedStyle(thing).height sofort eine synchrone Neuberechnung aus:

var thing = document.getElementById("the-thing");
thing.style.display = "inline-block";
var thingHeight = window.getComputedStyle(thing).height;

Deshalb ist es eine gute Idee, Verschachtelungen von Schreib- und Leseanfragen zu vermeiden, da bei jedem Lesen eines durch eine vorangegangene Schreibanfrage ungültig gemachten Stils eine synchrone Neuberechnung erzwungen wird.

Sicherheitswarnungen und -fehler

Sicherheitswarnungen und -fehler sehen folgendermaßen aus:

Die Sicherheitsmeldungen in der Web-Konsole helfen Ihnen dabei, (potentielle) Sicherheitslücken in Ihren Seiten zu finden. Außerdem helfen diese Meldungen Entwickler dabei, zu lernen, da sie mit einem Link "Weitere Informationen" enden, womit Sie zu einer Seite mit Hintergrundinformationen und Hilfestellungen zur Problemlösung geführt werden.

Die folgende Liste führt alle Sicherheitsmeldungen auf:

Bug 863874 ist ein Problembericht um für Sicherheit relevante Meldungen in der Web-Konsole zu sammeln. Wenn Sie mehr Ideen für nützliche Funktionen wie diese haben, oder einfach nur mitmachen wollen, schauen Sie sich den Fehlerbericht und die davon abhängigen an.

console API-Meldungen

Dieser Abschnitt beschreibt die Ausgaben der Web-Konsole für die console API-Aufrufe, die Ausgaben erzeugen. Für mehr oberflächliche Informationen über die console API, siehe folgende Dokumentationsseite.

Fehlermeldungen

API	Meldungsinhalt
error()	Argument für error(). console.error("an error");
exception()	Alias für error().
assert()	Neu in Firefox 29. Wenn die Aussage erfolgreich ist, nichts. Wenn die Aussage fehlschlägt, Argument: console.assert(false, "My assertion always fails");

Warnmeldungen

API	Meldungsinhalt
warn()	Argument für warn(). console.warn("a warning");

Informationsmeldungen

API	Meldungsinhalt
info()	Argument für info(). console.info("some info");

Meldungen

API	Meldungsinhalt
count()	Diese Meldung ist neu in Firefox 30. Diese Beschreibung gibt an, ob und wie oft  count() aufgerufen wurde mit der gegebenen Beschriftung: console.count(user.value);
log()	Argument für log(). console.log("logged");
trace()	Stack-Trace: console.trace();
dir()	Auflisten der Objekteigenschaften: var user = document.getElementById('user'); console.dir(user);
time()	Benachrichtigung, dass der spezifische Timer gestartet wurde. console.time("t");
timeEnd()	Dauer für den spezifischen Timer. console.timeEnd("t");

Gruppieren von Meldungen

Sie können console.group() benutzen um eingerückte Gruppen in der Konsolenausgabe zu erstellen. Siehe Gruppen in der Konsole benutzen für mehr Informationen.

Eingabe-/Ausgabemeldungen

Befehle, die dem Browser über die Kommandozeile der Web-Konsole geschickt wurden und die dazugehörigen Antworten werden mit Zeilen wie diese aufgezeichnet:

Die dunkelgraue Leiste gibt an, dass es sich um Eingabe-/Ausgabemeldungen handelt, während die Richtung, in die die Pfeile zeigen, zwischen Eingabe und Ausgabe unterscheidet.

Filtern und suchen

Sie können die Symbolleiste oben benutzen, um die angezeigten Ergebnisse zu verfeinern.

Sie können nur bestimmte Meldungen oder Meldungen, die einen bestimmten String enthalten, anzeigen lassen.

Zuletzt können Sie diese Symbolleiste benutzen um die Aufzeichnungen zu löschen.

Der Kommandozeileninterpreter

Sie können JavaScript-Ausdrücke mit der von der Web-Konsole bereitgestellten Kommandozeile in Echtzeit interpretieren.

Ausdrücke eingeben

Um Ausdrücke einzugeben, tippen Sie sie in die Kommandozeile ein und drücken Sie die Eingabetaste.

Die Eingabe, die Sie eintippen, wird in der Meldungsansicht zusammen mit dem Ergebnis angezeigt:

Auf Variablen zugreifen

Sie können auf Variablen, die auf der Seite definiert werden, zugreifen, egal ob eingebaute Variablen wie window oder Variablen, die von JavaScript-Code erstellt wurden, wie jQuery:

Automatische Vervollständigung

Die Kommandozeile hat eine automatische Vervollständigung: geben Sie die ersten Buchstaben ein und ein Dialogfenster mit möglichen Vervollständigungen erscheint:

Drücken Sie die Eingabe- oder Tabulatortaste um den Vorschlag zu übernehmen, benutzen Sie die Pfeiltasten um zu einem anderen Vorschlag zu gelangen, oder tippen Sie einfach weiter, wenn Ihnen keines der Vorschläge gefällt.

Die Konsole schlägt Vervollständigungen im Umfang des momentan ausgeführten Stack-Frames vor. Das heißt, wenn Sie ein Haltepunkt erreichen, bekommen Sie Vervollständigungen für für die Funktion lokale Objekte.

Ab Firefox 30 können auch Array-Elemente automatisch vervöllständigt werden:

Elemente untersuchen

Falls das Ergebnis ein Objekt ist, wird es kursiv dargestellt. Beim Anklicken erscheint eine Ansicht mit weiteren Informationen zum Objekt:

Um diese Ansicht zu schließen, drücken Sie die Escape-Taste.

Variablen festlegen

Sie können Ihre eigenen Variablen festlegen und auf diese zugreifen:

Knoten hervorheben und untersuchen

Wenn Sie mit dem Mauszeiger über ein DOM-Element in der Konsolenausgabe fahren, wird es auf der Seite hervorgehoben:

In dem oberen Bildschirmfoto können Sie auch ein "Ziel"-Symbol in blau neben dem Knoten in der Konsolenausgabe sehen: klicken Sie darauf um den Knoten zu untersuchen.

Befehlsverlauf

Die Kommandozeile merkt sich Ihre eingegebenen Befehle: um durch den Verlauf zu navigieren, benutzen Sie die Pfeiltasten.

Mit iframes arbeiten

Wenn eine Seite über eingebettete iframes verfügt, können Sie den cd()-Befehl benutzen um den Umfang der Konsole auf einen spezifischen iframe zu setzen und Funktionen, die im iframe-Dokument definiert werden, auszuführen. Es gibt drei Wege um ein iframe mit cd() auszuwählen:

Sie können das iframe DOM-Element übergeben:

var frame = document.getElementById("frame1");
cd(frame);

Sie können einen CSS-Selektor übergeben, der zum iframe gehört:

cd("#frame1");

Sie können den globalen Fensterobjekt des iframes übergeben:

var frame = document.getElementById("frame1");
cd(frame.contentWindow);

Um zum übergeordneten Fenster zu wechseln, rufen Sie cd() ohne Argumente auf:

cd();

Nehmen wir beispielsweise an, wir haben ein Dokument, das ein iframe einbettet:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
  </body>
</html>

Der iframe definiert eine neue Funktion:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script>
      function whoAreYou() {
        return "I'm frame1";
      }
   </script>
  </head>
  <body>
  </body>
</html>

So können Sie den Umfang zum iframe wechseln:

cd("#frame1");

Nun werden Sie sehen, dass das Dokument des globalen Fensters der iframe ist:

Sie können auch die Funktion, die in dem iframe definiert wird, aufrufen:

Hilfsbefehle

Die geteilte Konsole

Ab Firefox 28 können Sie die Konsole zusammen mit anderen Werkzeugen benutzen. Während Sie in einem anderen Werkzeug in der Werkzeugkiste sind, drücken Sie die Escape-Taste oder die Schaltfläche "Erzwingen der Anzeige der Konsole umschalten, gegebenenfalls zusätzlich zum aktuellen Entwicklerwerkzeug" in der Werkzeugleiste. Die Werkzeugkiste wird nun geteilt dargestellt, mit dem ursprünglichen Werkzeug über der Web-Konsole.

Wie üblich funktioniert $0 als Abkürzung für das in der Ansicht "Element unterschen" ausgewählte Element:

Wenn Sie die geteilte Konsole zusammen mit dem Debugger benutzen, wird der Umfang der Konsole auf den momentan ausgeführten Stack-Frame beschränkt. Wenn Sie einen Haltepunkt einer Funktion erreichen, wird der Umfang auf diese Funktion beschränkt. Sie können in der Funktion definierte Objekte automatisch vervollständigen und spontan ändern:

Tastenkürzel

Command line interpreter

These shortcuts apply when you're in the command line interpreter.

Autocomplete popup

These shortcuts apply while the autocomplete popup is open:

Allgemeine Tastenkürzel

These shortcuts work in all tools that are hosted in the toolbox.

	Windows	OS X	Linux
Increase font size	Ctrl + +	Cmd + +	Ctrl + +
Decrease font size	Ctrl + -	Cmd + -	Ctrl + -
Reset font size	Ctrl + 0	Cmd + 0	Ctrl + 0