Die Web-Konsole
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.
{{EmbedYouTube("AlYMRAQnkX8")}}
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.
https://developer.mozilla.org/de/docs/Tools/Web_Konsole$edit
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:
Der Großteil der Web-Konsole wird von der Meldungsansicht genutzt:
Die Meldungsanzeige zeigt folgende Meldungen an:
Jede Nachricht wird in einer neuen Zeile angezeigt:
| Zeit | Die Zeit, zu der die Meldung aufgezeichnet wurde. Ab Firefox 28 wird sie standardmäßig nicht angezeigt, jedoch können Sie Zeitstempel mit einer Einstellung in der Werkzeugleiste anzeigen lassen. |
| Kategorie |
Kategorie: zeigt an, um welche Art von Meldung es sich handelt:
|
| Typ | Für alle Meldungen außer HTTP-Anfragen und interaktiven Eingaben/Ausgaben, ein Symbol das anzeigt, ob es sich um ein Fehler(X), eine Warnung(!) oder eine Meldung (i) handelt. |
| Meldung | Die Meldung an sich. |
| Anzahl der Meldungen | Wenn eine Zeile, die eine Warnung oder ein Fehler erzeugt, mehrmals ausgeführt wird, wird sie nur einmal aufgezeichnet und der Zähler zeigt die Anzahl an Meldungen an. |
| Dateiname und Zeilennummer | JavaScript-, CSS- und console API-Meldungen können zu einer spezifischen Codezeile zurückverfolgt werden. Die Konsole gibt den Dateinamen und Zeilennummer des Codeabschnitts an, das die Meldung erzeugt hat. |
HTTP-Anfragen werden in einer Zeile dargestellt, die folgendermaßen aussieht:
| Zeit | Die Zeit, zu der die Meldung aufgezeichnet wurde. |
| Kategorie | Zeigt an, dass die Meldung eine HTTP-Anfrage ist. |
| Methode | Die Methode der HTTP-Anfrage |
| URI | Die Ziel-URI |
| Zusammenfassung | Die HTTP-Version, Status-Code und Laufzeit. |
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.
Ab Firefox 30 werden Netzwerk-Meldungen standardmäßig nicht angezeigt.
JavaScript-Meldungen sehen folgendermaßen aus:
Ab Firefox 30 werden JavaScript-Warnungen standardmäßig nicht angezeigt.
CSS-Meldungen sehen folgendermaßen aus:
Standardmäßig werden CSS-Warnungen und Meldungen nicht angezeigt.
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.
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 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:
| Meldung | Details |
|---|---|
| Laden von gemischten aktiven Inhalten wurde blockiert. | Die Seite besitzt gemischte aktive Inhalte: die Hauptseite wurde über HTTPS bereitgestellt, hat den Browser aber gebeten, "aktive Inhalte" wie Skripte über HTTP zu laden. Der Browser hat diesen aktiven Inhalt blockiert. Siehe Gemischte Inhalte für mehr Details. |
| Laden von gemischten Ansichtsinhalten wurde blockiert. | Die Seite besitzt gemischte Ansichtsinhalte: die Hauptseite wurde über HTTPS bereitgestellt, hat den Browser aber gebeten, "Ansichtsinhalte" wie Bilder über HTTP zu laden. Der Browser hat diesen aktiven Inhalt blockiert. Siehe Gemischte Inhalte für mehr Details. |
| Lade gemischte (unsichere) aktive Inhalte auf einer sicheren Seite | Die Seite besitzt gemischte aktive Inhalte: die Hauptseite wurde über HTTPS bereitgestellt, hat den Browser aber gebeten, "aktive Inhalte" wie Skripte über HTTP zu laden. Der Browser hat diesen aktiven Inhalt geladen. Siehe Gemischte Inhalte für mehr Details. |
| Lade gemischte (unsichere) anzeige-Inhalte auf einer sicheren Seite | Die Seite besitzt gemischte Ansichtsinhalte: die Hauptseite wurde über HTTPS bereitgestellt, hat den Browser aber gebeten, "Ansichtsinhalte" wie Bilder über HTTP zu laden. Der Browser hat diesen aktiven Inhalt geladen. Siehe Gemischte Inhalte für mehr Details. |
| Diese Website hat Kopfzeilen sowohl mit X-Content-Security-Policy/Report-Only als auch Content-Security-Policy/Report-Only angegeben. Jene mit X-Content-Security-Policy/Report-Only werden ignoriert. | Siehe Content Security Policy für mehr Details. |
| Die Kopfzeilen X-Content-Security-Policy und X-Content-Security-Report-Only werden in Zukunft nicht mehr unterstützt. Verwenden Sie bitte stattdessen die Kopfzeilen Content-Security-Policy und Content-Security-Report-Only mit CSP-Spezifikations-kompatibler Syntax. | Siehe Content Security Policy für mehr Details. |
| Passwort-Felder sind auf einer unsicheren (http://) Seite vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden können. | Seiten mit Anmeldeformularen müssen über HTTPS, nicht HTTP, bereitgestellt werden. |
| Passwort-Felder sind in einem Formular mit einer unsicheren (http://) Formular-aktion vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden können. | Formulare mit Passwortfeldern müssen diese über HTTPS, nicht HTTP, absenden. |
| Passwort-Felder sind in einem unsicheren (http://) Iframe vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden können. | iframes, die Anmeldeformulare beinhalten, müssen über HTTPS, nicht HTTP, bereitgestellt werden. |
| Diese Website hat eine ungültige Strict-Transport-Security-Kopfzeile angegeben. | Siehe HTTP Strict Transport Security für mehr Details. |
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.
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.
| API | Meldungsinhalt |
|---|---|
error() |
Argument für
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");  |
| API | Meldungsinhalt |
|---|---|
warn() |
Argument für
console.warn("a warning");
 |
| API | Meldungsinhalt |
|---|---|
info() |
Argument für
console.info("some info");
 |
| API | Meldungsinhalt |
|---|---|
count() |
Diese Meldung ist neu in Firefox 30. Diese Beschreibung gibt an, ob und wie oft console.count(user.value);
|
log() |
Argument für
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");
 |
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.
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.
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.
Sie können JavaScript-Ausdrücke mit der von der Web-Konsole bereitgestellten Kommandozeile in Echtzeit interpretieren.
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:
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:
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:
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.
Vor Firefox 30 erscheinen untersuchbare Objekte in eckigen Klammern und sind unterstrichen, wie [Objekt Funktion].
Sie können Ihre eigenen Variablen festlegen und auf diese zugreifen:
Diese Funktion ist neu in Firefox 30.
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.
Die Kommandozeile merkt sich Ihre eingegebenen Befehle: um durch den Verlauf zu navigieren, benutzen Sie die Pfeiltasten.
Diese Funktion ist neu in Firefox 30.
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:
{{ page("/en/Using_the_Web_Console/Helpers", "Die Befehle") }}
Die geteilte Konsole ist neu in Firefox 28.
{{EmbedYouTube("G2hyxhPHyXo")}}
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:
{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "web-console") }}