diff options
Diffstat (limited to 'files/de/tools/web_console/index.html')
| -rw-r--r-- | files/de/tools/web_console/index.html | 582 |
1 files changed, 582 insertions, 0 deletions
diff --git a/files/de/tools/web_console/index.html b/files/de/tools/web_console/index.html new file mode 100644 index 0000000000..1616e7c9a7 --- /dev/null +++ b/files/de/tools/web_console/index.html @@ -0,0 +1,582 @@ +--- +title: Web-Konsole +slug: Tools/Web_Konsole +translation_of: Tools/Web_Console +--- +<div>{{ToolsSidebar}}</div> + +<p>Die Web-Konsole</p> + +<ol> + <li>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</li> + <li>erlaubt es Ihnen, mit einer Webseite zu interagieren, indem Sie JavaScript-Befehle auf einer Seite ausführen</li> +</ol> + +<p>Es ist ein Ersatz für die alte <a href="/en/Error_Console" title="en/Error Console">Fehlerkonsole</a>, 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.</p> + +<p>Der andere Teil der Fehlerkonsole ist die <a href="/en-US/docs/Tools/Browser_Console" title="/en-US/docs/Tools/Browser_Console">Browserkonsole</a>, die Fehler, Warnungen und Meldungen vom Browser-Code und von Add-ons anzeigt.</p> + +<p>{{EmbedYouTube("AlYMRAQnkX8")}}</p> + +<h2 id="Die_Web-Konsole_öffnen">Die Web-Konsole öffnen</h2> + +<p>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.</p> + +<p>https://developer.mozilla.org/de/docs/Tools/Web_Konsole$edit</p> + +<p>Die <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Browser-Werkzeuge</a> werden zusammen mit der Web-Konsole (sie wird in der <a href="/en-US/docs/Tools/DevTools_Window#Toolbar" title="/en-US/docs/Tools/DevTools_Window#Toolbar">DevTools Werkzeugleiste</a> nur "Konsole" genannt) am unteren Teil des Browser-Fensters angezeigt:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7529/web-console-de.png" style="display: block; height: 1053px; margin-left: auto; margin-right: auto; width: 945px;"></p> + +<p>Unter der <a href="/en-US/docs/Tools/DevTools_Window#Toolbar" title="/en-US/docs/Tools/DevTools_Window#Toolbar">Symbolleiste der Entwicklerwerkzeuge</a> ist die Oberfläche der Web-Konsole in drei Abschnitte eingeteilt:</p> + +<ul> + <li><a href="#filtering-and-searching" title="#filtering-and-searching">Symbolleiste</a>: oben ist eine Symbolleiste, die Schaltflächen mit Beschriftungen wie "Netz", "CSS" und "JS" beinhaltet. Diese Symbolleiste wird verwendet, um die Nachrichten zu filtern</li> + <li><a href="#command-line" title="#command-line">Kommandozeile</a>: unten ist eine Kommandozeile, in der Sie JavaScript-Befehle eingeben können</li> + <li><a href="#message-display-pane" title="#message-display-pane">Meldungsansicht</a>: zwischen der Symbolleiste und der Kommandozeile zeigt die Web-Konsole Meldungen im größten Teil des Fensters an</li> +</ul> + +<h2 id="Meldungsansicht"><a name="meldungsansicht">Meldungsansicht</a></h2> + +<p>Der Großteil der Web-Konsole wird von der Meldungsansicht genutzt:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7537/web-console-messages-highlighted-de.png" style="display: block; height: 431px; margin-left: auto; margin-right: auto; width: 945px;"></p> + +<p>Die Meldungsanzeige zeigt folgende Meldungen an:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Web_Console#HTTP_requests">HTTP-Anfragen</a></li> + <li><a href="/en-US/docs/Tools/Web_Console#JavaScript_errors_and_warnings">JavaScript-Warnungen und -Fehler</a></li> + <li><a href="/en-US/docs/Tools/Web_Console#CSS_errors.2C_warnings.2C_and_reflow_messages">CSS-Warnungen, Fehler und DOM-Neuberechnungen</a></li> + <li><a href="/en-US/docs/Tools/Web_Console#Security_warnings_and_errors">Sicherheitswarnungen und -fehler</a></li> + <li><a href="/en-US/docs/Tools/Web_Console#console_API_messages">console API-Aufrufe</a></li> + <li><a href="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages">Eingabe/Ausgabe-Meldungen</a>: Befehle und Ergebnisse der Befehle, die dem Browser über die Kommandozeile der Web-Konsole geschickt wurden.</li> +</ul> + +<p>Jede Nachricht wird in einer neuen Zeile angezeigt:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7539/web-console-message-annotated-de.png" style="display: block; height: 170px; margin-left: auto; margin-right: auto; width: 929px;"></p> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <td><strong>Zeit</strong></td> + <td>Die Zeit, zu der die Meldung aufgezeichnet wurde. Ab Firefox 28 wird sie standardmäßig nicht angezeigt, jedoch können Sie Zeitstempel mit einer <a href="/en-US/docs/Tools_Toolbox#Settings">Einstellung in der Werkzeugleiste</a> anzeigen lassen.</td> + </tr> + <tr> + <td><strong>Kategorie</strong></td> + <td> + <p><strong>Kategorie</strong>: zeigt an, um welche Art von Meldung es sich handelt:</p> + + <ul style="margin-left: 40px;"> + <li><strong>Schwarz</strong>: HTTP-Anfrage</li> + <li><span style="color: #0099ff;"><strong>Blau</strong></span>: CSS-Warnung/Fehler/Meldung</li> + <li><strong><span style="color: #ff8c00;">Orange</span></strong>: JavaScript-Warnung/Fehler</li> + <li><span style="color: #ff0000;"><strong>Grün</strong></span>: Sicherheitswarnung/-fehler</li> + <li><span style="color: #a9a9a9;"><strong>Hellgrau</strong></span>: Meldungen, die explizit durch von der <a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">console</a>-API ausgeführtem JavaScript-Code stammen</li> + <li><span style="color: #696969;"><strong>Dunkelgrau</strong></span>: Eingaben/Ausgaben von der interaktiven <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter">Kommandozeile</a></li> + </ul> + </td> + </tr> + <tr> + <td><strong>Typ</strong></td> + <td>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.</td> + </tr> + <tr> + <td><strong>Meldung</strong></td> + <td>Die Meldung an sich.</td> + </tr> + <tr> + <td><strong>Anzahl der Meldungen</strong></td> + <td>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.</td> + </tr> + <tr> + <td><strong>Dateiname und Zeilennummer</strong></td> + <td>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.</td> + </tr> + </tbody> +</table> + +<h3 id="HTTP-Anfragen">HTTP-Anfragen</h3> + +<p>HTTP-Anfragen werden in einer Zeile dargestellt, die folgendermaßen aussieht:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7559/web-console-message-request-annotated-de.png" style="display: block; height: 164px; margin-left: auto; margin-right: auto; width: 810px;"></p> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <td><strong>Zeit</strong></td> + <td>Die Zeit, zu der die Meldung aufgezeichnet wurde.</td> + </tr> + <tr> + <td><strong>Kategorie</strong></td> + <td>Zeigt an, dass die Meldung eine HTTP-Anfrage ist.</td> + </tr> + <tr> + <td><strong>Methode</strong></td> + <td>Die Methode der HTTP-Anfrage</td> + </tr> + <tr> + <td><strong>URI</strong></td> + <td>Die Ziel-URI</td> + </tr> + <tr> + <td><strong>Zusammenfassung</strong></td> + <td>Die HTTP-Version, Status-Code und Laufzeit.</td> + </tr> + </tbody> +</table> + +<p>Wenn Sie auf eine Meldung klicken, sehen Sie so ein Fenster mit mehr Informationen über die Anfrage und Antwort:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7531/detailspanel-de.png" style="display: block; height: 636px; margin-left: auto; margin-right: auto; width: 463px;">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".</p> + +<p>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.</p> + +<div class="geckoVersionNote"> +<p>Ab Firefox 30 werden Netzwerk-Meldungen standardmäßig nicht angezeigt.</p> +</div> + +<h3 id="JavaScript-Fehler_und_Warnungen">JavaScript-Fehler und Warnungen</h3> + +<p>JavaScript-Meldungen sehen folgendermaßen aus:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7541/js-error-annotated-de.png" style="display: block; height: 190px; margin-left: auto; margin-right: auto; width: 810px;"></p> + +<div class="geckoVersionNote"> +<p>Ab Firefox 30 werden JavaScript-Warnungen standardmäßig nicht angezeigt.</p> +</div> + +<h3 id="CSS-Fehler_-Warnungen_und_DOM-Neuberechnungen">CSS-Fehler, -Warnungen und DOM-Neuberechnungen</h3> + +<p>CSS-Meldungen sehen folgendermaßen aus:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7539/web-console-message-annotated-de.png" style="display: block; height: 170px; margin-left: auto; margin-right: auto; width: 929px;"></p> + +<p>Standardmäßig werden CSS-Warnungen und Meldungen nicht angezeigt.</p> + +<h4 id="DOM-Neuberechnungen">DOM-Neuberechnungen</h4> + +<p>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.</p> + +<p>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 <a href="#synchronous-and-asynchronous-reflows">synchrone Neuberechnungen</a> sind und von welchem JavaScript-Code sie erzwungen werden.</p> + +<p>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 <a href="#filtering-and-searching">Symbolleiste</a> klicken und "Logbuch" auswählen.</p> + +<p>Jede Meldung wird mit "reflow" markiert und zeigt die Zeit an, die für die Neuberechnung gebraucht wurde:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7547/web-console-reflow-asynch-de.png" style="display: block; height: 23px; margin-left: auto; margin-right: auto; width: 636px;">Wenn die Neuberechnung synchron ist und von JavaScript-Code erzwungen wurde, wird auch ein Link zur Codezeile angezeigt, die die Neuberechnung erzwungen hat.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7549/web-console-reflow-synch-de.png" style="display: block; height: 23px; margin-left: auto; margin-right: auto; width: 721px;">Klicken Sie auf den Link um die Datei im <a href="/en-US/docs/Tools/Debugger">Debugger</a> zu öffnen.</p> + +<h4 id="Synchrone_and_asynchrone_Neuberechnungen"><a name="synchrone-und-asynchrone-neuberechnungen">Synchrone and asynchrone Neuberechnungen</a></h4> + +<p>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.</p> + +<p>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 <code>window.getComputedStyle(thing).height</code> sofort eine synchrone Neuberechnung aus:</p> + +<pre class="brush: js">var thing = document.getElementById("the-thing"); +thing.style.display = "inline-block"; +var thingHeight = window.getComputedStyle(thing).height;</pre> + +<p>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.</p> + +<h3 id="Sicherheitswarnungen_und_-fehler">Sicherheitswarnungen und -fehler</h3> + +<p>Sicherheitswarnungen und -fehler sehen folgendermaßen aus:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7555/sec-error-annotated-de.png" style="display: block; height: 190px; margin-left: auto; margin-right: auto; width: 810px;">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.</p> + +<p>Die folgende Liste führt alle Sicherheitsmeldungen auf:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <th scope="col">Meldung</th> + <th scope="col">Details</th> + </tr> + <tr> + <td>Laden von gemischten aktiven Inhalten wurde blockiert.</td> + <td>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 <a href="/en-US/docs/Security/MixedContent">Gemischte Inhalte</a> für mehr Details.</td> + </tr> + <tr> + <td>Laden von gemischten Ansichtsinhalten wurde blockiert.</td> + <td>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 <a href="/en-US/docs/Security/MixedContent">Gemischte Inhalte</a> für mehr Details.</td> + </tr> + <tr> + <td>Lade gemischte (unsichere) aktive Inhalte auf einer sicheren Seite</td> + <td>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 <a href="/en-US/docs/Security/MixedContent">Gemischte Inhalte</a> für mehr Details.</td> + </tr> + <tr> + <td>Lade gemischte (unsichere) anzeige-Inhalte auf einer sicheren Seite</td> + <td>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 <a href="/en-US/docs/Security/MixedContent">Gemischte Inhalte</a> für mehr Details.</td> + </tr> + <tr> + <td>Diese Website hat Kopfzeilen sowohl mit <span class="highlight">X-Content-Security-Policy/Report-Only</span> als auch <span class="highlight">Content-Security-Policy/Report-Only</span> angegeben. Jene mit <span class="highlight">X-Content-Security-Policy/Report-Only</span> werden ignoriert.</td> + <td>Siehe <a href="/en-US/docs/Security/CSP">Content Security Policy</a> für mehr Details.</td> + </tr> + <tr> + <td>Die Kopfzeilen <span class="highlight">X-Content-Security-Policy</span> und <span class="highlight">X-Content-Security-Report-Only</span> werden in Zukunft nicht mehr unterstützt. Verwenden Sie bitte stattdessen die Kopfzeilen <span class="highlight">Content-Security-Policy</span> und <span class="highlight">Content-Security-Report-Only</span> mit <span class="highlight">CSP</span>-Spezifikations-kompatibler <span class="highlight">Syntax</span>.</td> + <td>Siehe <a href="/en-US/docs/Security/CSP">Content Security Policy</a> für mehr Details.</td> + </tr> + <tr> + <td>Passwort-Felder sind auf einer unsicheren <span class="highlight">(http://)</span> Seite vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden können.</td> + <td>Seiten mit Anmeldeformularen müssen über HTTPS, nicht HTTP, bereitgestellt werden.</td> + </tr> + <tr> + <td>Passwort-Felder sind in einem Formular mit einer unsicheren <span class="highlight">(http://)</span> Formular-aktion vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden können.</td> + <td>Formulare mit Passwortfeldern müssen diese über HTTPS, nicht HTTP, absenden.</td> + </tr> + <tr> + <td>Passwort-Felder sind in einem unsicheren <span class="highlight">(http://)</span> Iframe vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden können.</td> + <td>iframes, die Anmeldeformulare beinhalten, müssen über HTTPS, nicht HTTP, bereitgestellt werden.</td> + </tr> + <tr> + <td>Diese Website hat eine ungültige <span class="highlight">Strict-Transport-Security</span>-Kopfzeile angegeben.</td> + <td>Siehe <a href="/en-US/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> für mehr Details.</td> + </tr> + </tbody> +</table> + +<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</a> 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.</p> + +<h3 id="console_API-Meldungen">console API-Meldungen</h3> + +<p><br> + <img alt="" src="https://mdn.mozillademos.org/files/7557/console-api-message-annotated-de.png" style="display: block; height: 190px; margin-left: auto; margin-right: auto; width: 216px;"></p> + +<p>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 <a href="/en-US/docs/Web/API/console">Dokumentationsseite</a>.</p> + +<h4 id="Fehlermeldungen">Fehlermeldungen</h4> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">API</th> + <th scope="col">Meldungsinhalt</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>error()</code></td> + <td> + <p>Argument für <code>error()</code>.</p> + + <pre class="brush: js"> +console.error("an error");</pre> + <img alt="" src="https://mdn.mozillademos.org/files/7143/api-error.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + <tr> + <td><code>exception()</code></td> + <td>Alias für <code>error()</code>.</td> + </tr> + <tr> + <td><code>assert()</code></td> + <td> + <div class="geckoVersionNote"> + <p>Neu in Firefox 29.</p> + </div> + + <p>Wenn die Aussage erfolgreich ist, nichts. Wenn die Aussage fehlschlägt, Argument:</p> + + <pre class="brush: js"> +console.assert(false, "My assertion always fails");</pre> + <img alt="" src="https://mdn.mozillademos.org/files/7139/api-assert.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + </tbody> +</table> + +<h4 id="Warnmeldungen">Warnmeldungen</h4> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">API</th> + <th scope="col">Meldungsinhalt</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>warn()</code></td> + <td> + <p>Argument für <code>warn()</code>.</p> + + <pre class="brush: js"> +console.warn("a warning");</pre> + <img alt="" src="https://mdn.mozillademos.org/files/7155/api-warn.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + </tbody> +</table> + +<h4 id="Informationsmeldungen">Informationsmeldungen</h4> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">API</th> + <th scope="col">Meldungsinhalt</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>info()</code></td> + <td> + <p>Argument für <code>info()</code>.</p> + + <pre class="brush: js"> +console.info("some info");</pre> + <img alt="" src="https://mdn.mozillademos.org/files/7145/api-info.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + </tbody> +</table> + +<h4 id="Meldungen">Meldungen</h4> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">API</th> + <th scope="col">Meldungsinhalt</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>count()</code></td> + <td> + <div class="geckoVersionNote"> + <p>Diese Meldung ist neu in Firefox 30.</p> + </div> + + <p>Diese Beschreibung gibt an, ob und wie oft <code>count()</code> aufgerufen wurde mit der gegebenen Beschriftung:</p> + + <pre class="brush: js"> +console.count(user.value);</pre> + + <p><img alt="" src="https://mdn.mozillademos.org/files/7359/api-count.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + </td> + </tr> + <tr> + <td><code>log()</code></td> + <td> + <p>Argument für <code>log()</code>.</p> + + <pre class="brush: js"> +console.log("logged");</pre> + <img alt="" src="https://mdn.mozillademos.org/files/7147/api-log.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + <tr> + <td><code>trace()</code></td> + <td> + <p>Stack-Trace:</p> + + <pre class="brush: js"> +console.trace();</pre> + <img alt="" src="https://mdn.mozillademos.org/files/7159/api-trace.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + <tr> + <td><code>dir()</code></td> + <td> + <p>Auflisten der Objekteigenschaften:</p> + + <pre class="brush: js"> +var user = document.getElementById('user'); +console.dir(user);</pre> + <img alt="" src="https://mdn.mozillademos.org/files/7157/api-dir.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + <tr> + <td><code>time()</code></td> + <td> + <p>Benachrichtigung, dass der spezifische Timer gestartet wurde.</p> + + <pre class="brush: js"> +console.time("t");</pre> + <img alt="" src="https://mdn.mozillademos.org/files/7553/api-time-de.png" style="display: block; height: 16px; margin-left: auto; margin-right: auto; width: 586px;"></td> + </tr> + <tr> + <td><code>timeEnd()</code></td> + <td> + <p>Dauer für den spezifischen Timer.</p> + + <pre class="brush: js"> +console.timeEnd("t");</pre> + <img alt="" src="https://mdn.mozillademos.org/files/7151/api-timeEnd.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + </tbody> +</table> + +<h4 id="Gruppieren_von_Meldungen">Gruppieren von Meldungen</h4> + +<p>Sie können <code>console.group()</code> benutzen um eingerückte Gruppen in der Konsolenausgabe zu erstellen. Siehe <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">Gruppen in der Konsole benutzen</a> für mehr Informationen.</p> + +<h3 id="Eingabe-Ausgabemeldungen">Eingabe-/Ausgabemeldungen</h3> + +<p>Befehle, die dem Browser über die <a href="#command-line" title="#command-line">Kommandozeile der Web-Konsole</a> geschickt wurden und die dazugehörigen Antworten werden mit Zeilen wie diese aufgezeichnet:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">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.</p> + +<h3 id="Filtern_und_suchen"><a name="filtering-and-searching">Filtern und suchen</a></h3> + +<p>Sie können die Symbolleiste oben benutzen, um die angezeigten Ergebnisse zu verfeinern.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7561/web-console-toolbar-highlighted-de.png" style="display: block; height: 431px; margin-left: auto; margin-right: auto; width: 945px;">Sie können nur bestimmte Meldungen oder Meldungen, die einen bestimmten String enthalten, anzeigen lassen.</p> + +<p>Zuletzt können Sie diese Symbolleiste benutzen um die Aufzeichnungen zu löschen.</p> + +<dl> +</dl> + +<h2 id="Der_Kommandozeileninterpreter"><a name="command-line">Der Kommandozeileninterpreter</a></h2> + +<p>Sie können JavaScript-Ausdrücke mit der von der Web-Konsole bereitgestellten Kommandozeile in Echtzeit interpretieren.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7563/web-console-commandline-highlighted-de.png" style="display: block; height: 431px; margin-left: auto; margin-right: auto; width: 945px;"></p> + +<h3 id="Ausdrücke_eingeben">Ausdrücke eingeben</h3> + +<p>Um Ausdrücke einzugeben, tippen Sie sie in die Kommandozeile ein und drücken Sie die Eingabetaste.</p> + +<p>Die Eingabe, die Sie eintippen, wird in der Meldungsansicht zusammen mit dem Ergebnis angezeigt:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7377/commandline-executejs.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Auf_Variablen_zugreifen">Auf Variablen zugreifen</h3> + +<p>Sie können auf Variablen, die auf der Seite definiert werden, zugreifen, egal ob eingebaute Variablen wie <code>window</code> oder Variablen, die von JavaScript-Code erstellt wurden, wie <code>jQuery</code>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Automatische_Vervollständigung">Automatische Vervollständigung</h3> + +<p>Die Kommandozeile hat eine automatische Vervollständigung: geben Sie die ersten Buchstaben ein und ein Dialogfenster mit möglichen Vervollständigungen erscheint:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7567/commandline-autocomplete-de.png" style="display: block; height: 192px; margin-left: auto; margin-right: auto; width: 720px;">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.</p> + +<p>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.</p> + +<p>Ab Firefox 30 können auch Array-Elemente automatisch vervöllständigt werden:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7383/commandline-arrayautocomplete.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Elemente_untersuchen">Elemente untersuchen</h3> + +<p>Falls das Ergebnis ein Objekt ist, wird es kursiv dargestellt. Beim Anklicken erscheint eine Ansicht mit weiteren Informationen zum Objekt:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7551/commandline-inspecting-de.png" style="display: block; height: 373px; margin-left: auto; margin-right: auto; width: 720px;">Um diese Ansicht zu schließen, drücken Sie die Escape-Taste.</p> + +<div class="geckoVersionNote"> +<p>Vor Firefox 30 erscheinen untersuchbare Objekte in eckigen Klammern und sind unterstrichen, wie <code><u>[Objekt Funktion]</u></code>.</p> +</div> + +<h3 id="Variablen_festlegen">Variablen festlegen</h3> + +<p>Sie können Ihre eigenen Variablen festlegen und auf diese zugreifen:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7371/commandline-addingvariable1.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7373/commandline-addingvariable2.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Knoten_hervorheben_und_untersuchen">Knoten hervorheben und untersuchen</h3> + +<div class="geckoVersionNote"> +<p>Diese Funktion ist neu in Firefox 30.</p> +</div> + +<p>Wenn Sie mit dem Mauszeiger über ein DOM-Element in der Konsolenausgabe fahren, wird es auf der Seite hervorgehoben:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7533/commandline-highlightnode-de.png" style="display: block; height: 596px; margin-left: auto; margin-right: auto; width: 715px;">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 <a href="/en-US/docs/Tools/Page_Inspector">untersuchen</a>.</p> + +<h3 id="Befehlsverlauf">Befehlsverlauf</h3> + +<p>Die Kommandozeile merkt sich Ihre eingegebenen Befehle: um durch den Verlauf zu navigieren, benutzen Sie die Pfeiltasten.</p> + +<h3 id="Mit_iframes_arbeiten">Mit iframes arbeiten</h3> + +<div class="geckoVersionNote"> +<p>Diese Funktion ist neu in Firefox 30.</p> +</div> + +<p>Wenn eine Seite über eingebettete <a href="/en-US/docs/Web/HTML/Element/iframe">iframes</a> verfügt, können Sie den <code>cd()</code>-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 <code>cd()</code> auszuwählen:</p> + +<p>Sie können das iframe DOM-Element übergeben:</p> + +<pre class="brush: js">var frame = document.getElementById("frame1"); +cd(frame);</pre> + +<p>Sie können einen CSS-Selektor übergeben, der zum iframe gehört:</p> + +<pre class="brush: js">cd("#frame1");</pre> + +<p>Sie können den globalen Fensterobjekt des iframes übergeben:</p> + +<pre class="brush: js">var frame = document.getElementById("frame1"); +cd(frame.contentWindow); +</pre> + +<p>Um zum übergeordneten Fenster zu wechseln, rufen Sie <code>cd()</code> ohne Argumente auf:</p> + +<pre class="brush: js">cd();</pre> + +<p>Nehmen wir beispielsweise an, wir haben ein Dokument, das ein iframe einbettet:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + </head> + <body> + <iframe id="frame1" src="static/frame/my-frame1.html"></iframe> + </body> +</html></pre> + +<p>Der iframe definiert eine neue Funktion:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <script> + function whoAreYou() { + return "I'm frame1"; + } + </script> + </head> + <body> + </body> +</html></pre> + +<p>So können Sie den Umfang zum iframe wechseln:</p> + +<pre class="brush: js">cd("#frame1");</pre> + +<p>Nun werden Sie sehen, dass das Dokument des globalen Fensters der iframe ist:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png" style="display: block; height: 75px; margin-left: auto; margin-right: auto; width: 632px;">Sie können auch die Funktion, die in dem iframe definiert wird, aufrufen:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png" style="display: block; height: 77px; margin-left: auto; margin-right: auto; width: 632px;"></p> + +<h3 id="Hilfsbefehle">Hilfsbefehle</h3> + +<p>{{ page("/en/Using_the_Web_Console/Helpers", "Die Befehle") }}</p> + +<h2 id="Die_geteilte_Konsole">Die geteilte Konsole</h2> + +<div class="geckoVersionNote"> +<p>Die geteilte Konsole ist neu in Firefox 28.</p> +</div> + +<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p> + +<p>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 <a href="/en-US/docs/Tools_Toolbox#Toolbar">Werkzeugleiste</a>. Die Werkzeugkiste wird nun geteilt dargestellt, mit dem ursprünglichen Werkzeug über der Web-Konsole.</p> + +<p>Wie üblich funktioniert <code>$0</code> als Abkürzung für das in der Ansicht "Element unterschen" ausgewählte Element:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7535/web-console-split-inspector-de.png" style="display: block; height: 772px; margin-left: auto; margin-right: auto; width: 1006px;">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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6621/web-console-split-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Tastenkürzel">Tastenkürzel</h2> + +<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "web-console") }}</p> + +<h3 id="Allgemeine_Tastenkürzel">Allgemeine Tastenkürzel</h3> + +<h3 id="Page_(en-USdocstoolsKeyboard_shortcuts_all-toolbox-tools)">{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</h3> |