mozilla
Ihre Suchergebnisse

    Web-Konsole

    Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

    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:

    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:

    • Schwarz: HTTP-Anfrage
    • Blau: CSS-Warnung/Fehler/Meldung
    • Orange: JavaScript-Warnung/Fehler
    • Grün: Sicherheitswarnung/-fehler
    • Hellgrau: Meldungen, die explizit durch von der console-API ausgeführtem JavaScript-Code stammen
    • Dunkelgrau: Eingaben/Ausgaben von der interaktiven Kommandozeile
    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

    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-Fehler und Warnungen

    JavaScript-Meldungen sehen folgendermaßen aus:

    Ab Firefox 30 werden JavaScript-Warnungen standardmäßig nicht angezeigt.

    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:

    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.

    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.

    Vor Firefox 30 erscheinen untersuchbare Objekte in eckigen Klammern und sind unterstrichen, wie [Objekt Funktion].

    Variablen festlegen

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

    Knoten hervorheben und untersuchen

    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.

    Befehlsverlauf

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

    Mit iframes arbeiten

    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:

    Hilfsbefehle

    Die geteilte Konsole

    Die geteilte Konsole ist neu in Firefox 28.

    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

      Windows OS X Linux
    Open the Web Console Ctrl + Shift + K Cmd + Opt + K Ctrl + Shift + K
    Search in the message display pane Ctrl + F Cmd + F Ctrl + F
    Clear the object inspector pane Escape Escape Escape
    Focus on the command line Ctrl + Shift + K Cmd + Opt + K Ctrl + Shift + K

    Command line interpreter

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

      Windows OS X Linux
    Scroll up through console output Page up Page up Page up
    Scroll down through console output Page down Page down Page down
    Go backwards through command history Up arrow Up arrow Up arrow
    Go forward through command history Down arrow Down arrow Down arrow
    Move to the beginning of the line Home Ctrl + A Ctrl + A
    Move to the end of the line End Ctrl + E Ctrl + E
    Execute the current expression Return Return Return
    Add a new line, for entering multiline expressions Shift + Return Shift + Return Shift + Return

    Autocomplete popup

    These shortcuts apply while the autocomplete popup is open:

      Windows OS X Linux
    Choose the current autocomplete suggestion Tab Tab Tab
    Cancel the autocomplete popup Escape Escape Escape
    Move to the previous autocomplete suggestion Up arrow Up arrow Up arrow
    Move to the next autocomplete suggestion Down arrow Down arrow Down arrow
    Scroll up through autocomplete suggestions Page up Page up Page up
    Scroll down through autocomplete suggestions Page down Page down Page down

    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

    Schlagwörter des Dokuments und Mitwirkende

    Mitwirkende an dieser Seite: wbamberg, mozjan, PsychoMg
    Zuletzt aktualisiert von: PsychoMg,