1 files changed, 296 insertions, 0 deletions
diff --git a/files/de/web/api/console/index.html b/files/de/web/api/console/index.html
new file mode 100644
index 0000000000..4f045815f1
--- /dev/null
+++ b/files/de/web/api/console/index.html
@@ -0,0 +1,296 @@
+---
+title: Console
+slug: Web/API/Console
+tags:
+  - API
+  - DOM
+  - Debugging
+  - Reference
+  - web console
+translation_of: Web/API/Console
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Das <strong><code>Console</code></strong> Objekt bietet Zurgiff auf die Debugging-Konsole des Browsers (z. B. die <a href="/de/docs/Tools/Web_Console">Web-Konsole</a> in Firefox). Die Einzelheiten der Funktionsweise sind von Browser zu Browser unterschiedlich, es gibt jedoch <em>de facto</em> eine Reihe von Funktionen, die normalerweise bereitgestellt werden.</p>
+
+<p>Auf das <code>Console</code> Objekt kann von jedem globalen Objekt aus zugegriffen werden. {{domxref("Window")}} im Browser und {{domxref("WorkerGlobalScope")}} als spezifische Varianten in Workern über die Property-Konsole. Es wird unter {{domxref("Window.console")}} zur Verfügung gestellt und kann als einfache Konsole referenziert werden. Zum Beispiel:</p>
+
+<pre class="brush: js">console.log("Failed to open the specified link")</pre>
+
+<p>Diese Seite dokumentiert die {{anch("Methods", "Methoden")}}, die für das <code>Console</code> Objekt verfügbar sind und enthält einige {{anch("Usage", "Anwendungsbeispiele")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{domxref("Console.assert()")}}</dt>
+ <dd>Protokolliert eine Nachricht und eine Stack-Ablaufverfolgung in der Konsole, wenn das erste Argument <code>false</code> ist.</dd>
+ <dt>{{domxref("Console.clear()")}}</dt>
+ <dd>Leert die Konsole.</dd>
+ <dt>{{domxref("Console.count()")}}</dt>
+ <dd>Protokolliert, wie oft diese Zeile mit dem angegebenen Label aufgerufen wurde.</dd>
+ <dt>{{domxref("Console.countReset()")}}</dt>
+ <dd>Setzt den Wert des Zählers mit der angegebenen Bezeichnung zurück.</dd>
+ <dt>{{domxref("Console.debug()")}}</dt>
+ <dd>Gibt eine Nachricht mit der Protokollebene <code>"debug"</code> in der Konsole aus.
+ <div class="note"><strong>Hinweis:</strong> Ab Chromium 58 wird diese Methode nur in Chromium-Browserkonsolen angezeigt, wenn die Stufe "Verbose" ausgewählt ist.</div>
+ </dd>
+ <dt>{{domxref("Console.dir()")}}</dt>
+ <dd>Zeigt eine interaktive Auflistung der Eigenschaften eines angegebenen JavaScript-Objekts an. In dieser Auflistung können Sie Offenlegungsdreiecke verwenden, um den Inhalt untergeordneter Objekte zu untersuchen.</dd>
+ <dt>{{domxref("Console.dirxml()")}}</dt>
+ <dd>
+ <p>Zeigt eine XML/HTML-Elementdarstellung des angegebenen Objekts an, falls möglich, oder die JavaScript-Objektansicht, falls dies nicht möglich ist.</p>
+ </dd>
+ <dt>{{domxref("Console.error()")}}</dt>
+ <dd>Gibt eine Fehlermeldung aus. Sie können <a href="/de/docs/Web/API/console#Using_string_substitutions">Stringersetzung</a> und zusätzliche Argumente mit dieser Methode verwenden.</dd>
+ <dt>{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Ein Alias für <code>error()</code>.</dd>
+ <dt>{{domxref("Console.group()")}}</dt>
+ <dd>Erstellt eine neue Inline-<a href="/de/docs/Web/API/console#Using_groups_in_the_console">Gruppe</a>, in der alle folgenden Ausgaben von einer anderen Ebene eingerückt werden. Um eine Ebene wieder zu verlassen, rufen Sie <code>groupEnd()</code> auf.</dd>
+ <dt>{{domxref("Console.groupCollapsed()")}}</dt>
+ <dd>Erstellt eine neue Inline-<a href="/de/docs/Web/API/console#Using_groups_in_the_console">Gruppe</a>, in der alle folgenden Ausgaben von einer anderen Ebene eingerückt werden. Anders als bei <code>group()</code> beginnt die Inline-Gruppe eingeklappt und muss über einen Button erst aufgeklappt werden. Um eine Ebene wieder zu verlassen, rufen Sie <code>groupEnd()</code> auf.</dd>
+ <dt>{{domxref("Console.groupEnd()")}}</dt>
+ <dd>Verlässt die aktuelle Inline-<a href="/de/docs/Web/API/console#Using_groups_in_the_console">Gruppe</a>.</dd>
+ <dt>{{domxref("Console.info()")}}</dt>
+ <dd>Informative Protokollierung von Informationen. Sie können <a href="/de/docs/Web/API/console#Using_string_substitutions">Stringersetzung</a> und zusätzliche Argumente mit dieser Methode verwenden.</dd>
+ <dt>{{domxref("Console.log()")}}</dt>
+ <dd>Zur allgemeinen Ausgabe von Protokollinformationen. Sie können <a href="/de/docs/Web/API/console#Using_string_substitutions">Stringersetzung</a> und zusätzliche Argumente mit dieser Methode verwenden.</dd>
+ <dt>{{domxref("Console.profile()")}} {{Non-standard_inline}}</dt>
+ <dd>Startet den integrierten Profiler des Browsers (z. B. das <a href="/de/docs/Tools/Performance">Firefox-Leistungstool</a>). Sie können einen optionalen Namen für das Profil angeben.</dd>
+ <dt>{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}</dt>
+ <dd>Stoppt den Profiler. Das resultierende Profil wird im Leistungstool des Browsers angezeigt (z. B. im <a href="/de/docs/Tools/Performance">Firefox-Leistungstool</a>).</dd>
+ <dt>{{domxref("Console.table()")}}</dt>
+ <dd>Zeigt tabellarische Daten als Tabelle an.</dd>
+ <dt>{{domxref("Console.time()")}}</dt>
+ <dd>Startet einen <a href="/de/docs/Web/API/console#Timers">Timer</a> mit einem als Eingabeparameter angegebenen Namen. Auf einer Seite können bis zu 10.000 gleichzeitige Timer ausgeführt werden.</dd>
+ <dt>{{domxref("Console.timeEnd()")}}</dt>
+ <dd>Stoppt den angegebenen <a href="/de/docs/Web/API/console#Timers">Timer</a> und protokolliert die abgelaufene Zeit in Sekunden seit dem Start.</dd>
+ <dt>{{domxref("Console.timeLog()")}}</dt>
+ <dd>Protokolliert den Wert des angegebenen <a href="/de/docs/Web/API/console#Timers">Timers</a> in der Konsole.</dd>
+ <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt>
+ <dd>Fügt der <a href="https://developer.chrome.com/devtools/docs/timeline">Zeitleiste</a> oder dem <a href="/de/docs/Tools/Performance/Waterfall">Wasserfallwerkzeug</a> des Browsers eine Markierung hinzu.</dd>
+ <dt>{{domxref("Console.trace()")}}</dt>
+ <dd>Gibt eine <a href="/de/docs/Web/API/console#Stack_traces">Stapelablaufverfolgung</a> (stack trace) aus.</dd>
+ <dt>{{domxref("Console.warn()")}}</dt>
+ <dd>Gibt eine Warnmeldung aus. Sie können <a href="/de/docs/Web/API/console#Using_string_substitutions">Stringersetzung</a> und zusätzliche Argumente mit dieser Methode verwenden.</dd>
+</dl>
+
+<h2 id="Usage" name="Usage">Benutzung</h2>
+
+<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Text auf der Konsole ausgeben</h3>
+
+<p>Die am häufigsten verwendete Funktion der Konsole ist das Protokollieren von Text und anderen Daten. Sie können vier Ausgabekategorien erstellen, die Sie mit den Methoden {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}} und {{domxref("console.error()")}} generieren können. Jedes dieser Ergebnisse hat eine unterschiedliche Ausgabe im Protokoll. Sie können die von Ihrem Browser bereitgestellten Filtersteuerelemente verwenden, um nur die Arten von Ausgaben anzuzeigen, die Sie interessieren.</p>
+
+<p>Es gibt zwei Möglichkeiten, jede der Ausgabemethoden zu verwenden. Sie können einfach eine Liste von Objekten übergeben, deren Stringdarstellungen zu einem String verkettet werden, dann an die Konsole ausgegeben werden, oder Sie können einen String übergeben, der keine oder mehrere Ersatzstrings enthält, gefolgt von einer Liste von Objekten, um diese zu ersetzen.</p>
+
+<h4 id="Ein_einzelnes_Objekt_ausgeben">Ein einzelnes Objekt ausgeben</h4>
+
+<p>Die einfachsten Methoden zur Verwendung der Protokollierungsmethoden sind die Ausgabe eines einzelnen Objekts:</p>
+
+<pre class="brush: js">var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+</pre>
+
+<p>Die Ausgabe sieht ungefähr so aus:</p>
+
+<pre>[09:27:13.475] ({str:"Some text", id:5})</pre>
+
+<h4 id="Mehrere_Objekte_ausgeben">Mehrere Objekte ausgeben</h4>
+
+<p>Sie können auch mehrere Objekte ausgeben, indem Sie sie beim Aufrufen der Protokollierungsmethode einfach nacheinander auflisten:</p>
+
+<pre class="brush: js">var car = "Dodge Charger";
+var someObject = { str: "Some text", id: 5 };
+console.info("My first car was a", car, ". The object is:", someObject);</pre>
+
+<p>Diese Ausgabe sieht folgendermaßen aus:</p>
+
+<pre>[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5})
+</pre>
+
+<h4 id="String-Ersetzungen_verwenden">String-Ersetzungen verwenden</h4>
+
+<p>Wenn Sie einen String an eine der Methoden des Konsolenobjekts übergeben, die einen String akzeptiert (z. B. <code>log()</code>), können Sie folgende Ersatzstrings verwenden:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Ersatzstring</td>
+   <td class="header">Beschreibung</td>
+  </tr>
+  <tr>
+   <td>%o ode %O</td>
+   <td>Gibt ein JavaScript-Objekt aus. Durch Klicken auf den Objektnamen werden weitere Informationen dazu im Inspektor geöffnet.</td>
+  </tr>
+  <tr>
+   <td>%d oder %i</td>
+   <td>
+    <p>Gibt eine Ganzzahl aus. Zahlenformatierung wird unterstützt, z. B. gibt <code>console.log("Foo %.2d", 1.1)</code> die Zahl als zwei signifikante Ziffern mit einer führenden 0 aus: <code>Foo 01</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td>%s</td>
+   <td>Gibt einen String aus.</td>
+  </tr>
+  <tr>
+   <td>%f</td>
+   <td>
+    <p>Gibt einen Gleitkommawert aus. Die Formatierung wird unterstützt, zum Beispiel gibt <code>console.log("Foo %.2f", 1.1)</code> die Zahl mit 2 Dezimalstellen aus: <code>Foo 1.10</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Die Präzisionsformatierung funktioniert in Chrome nicht</p>
+</div>
+
+<p>Jedes dieser Elemente zieht das nächste Argument nach dem Formatstring aus der Parameterliste. Zum Beispiel:</p>
+
+<pre>for (var i=0; i&lt;5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+</pre>
+
+<p>Die Ausgabe sieht folgendermaßen aus:</p>
+
+<pre>[13:14:13.481] Hello, Bob. You've called me 1 times.
+[13:14:13.483] Hello, Bob. You've called me 2 times.
+[13:14:13.485] Hello, Bob. You've called me 3 times.
+[13:14:13.487] Hello, Bob. You've called me 4 times.
+[13:14:13.488] Hello, Bob. You've called me 5 times.
+</pre>
+
+<h4 id="Konsolenausgaben_stylen">Konsolenausgaben stylen</h4>
+
+<p>Sie können die <code>%c</code> Direktive verwenden, um einen CSS-Stil auf die Konsolenausgabe anzuwenden:</p>
+
+<pre class="brush: js">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");</pre>
+
+<div>Der Text vor der Direktive wird nicht beeinflusst. Der Text nach der Direktive wird jedoch mit den CSS-Deklarationen im Parameter formatiert.</div>
+
+<div> </div>
+
+<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div>
+
+<div> </div>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Es werden etliche CSS-Eigenschaften von diesem Stil unterstützt. Sie sollten experimentieren und sehen, welche sich als nützlich erweisen.</p>
+</div>
+
+<div> </div>
+
+<div>{{h3_gecko_minversion("Gruppen in der Konsole verwenden", "9.0")}}</div>
+
+<p>Sie können verschachtelte Gruppen verwenden, um Ihre Ausgabe zu organisieren, indem Sie verwandtes Material visuell kombinieren. Um einen neuen verschachtelten Block zu erstellen, rufen Sie <code>console.group()</code> auf. Die Methode <code>console.groupCollapsed()</code> ist ähnlich, erstellt den neuen Block jedoch zusammengeklappt und erfordert die Verwendung einer Schaltfläche zum Öffnen.</p>
+
+<div class="note"><strong>Hinweis:</strong> Minimierte Gruppen werden in Gecko noch nicht unterstützt. Die Methode <code>groupCollapsed()</code> ist zu diesem Zeitpunkt die gleiche wie <code>group()</code>.</div>
+
+<p>Um die aktuelle Gruppe zu verlassen, rufen Sie einfach <code>console.groupEnd()</code> auf. Zum Beispiel mit diesem Code:</p>
+
+<pre class="brush: js">console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.debug("Back to the outer level");
+</pre>
+
+<p>Die Ausgabe sieht folgendermaßen aus:</p>
+
+<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p>
+
+<div>{{h3_gecko_minversion("Timer", "10.0")}}</div>
+
+<p>Um die Dauer einer bestimmten Operation zu berechnen, hat Gecko 10 die Unterstützung von Timern im <code>console</code>-Objekt eingeführt. Um einen Timer zu starten, rufen Sie die Methode <code>console.time</code><code>()</code> auf und geben Sie ihm als einzigen Parameter einen Namen. Um den Timer zu stoppen und die verstrichene Zeit in Millisekunden abzurufen, rufen Sie einfach die Methode <code>console.timeEnd()</code> auf und übergeben den Namen des Timers erneut als Parameter. Auf einer Seite können bis zu 10.000 Timer gleichzeitig ausgeführt werden.</p>
+
+<p>Zum Beispiel mit diesem Code:</p>
+
+<pre class="brush: js">console.time("answer time");
+alert("Click to continue");
+console.timeLog("answer time");
+alert("Do a bunch of other stuff...");
+console.timeEnd("answer time");
+</pre>
+
+<p>Protokolliert die Zeit, die der Benutzer zum Deaktivieren des Alert-Felds benötigt, schreibt die benötigte Zeit in der Konsole, wartet, bis der Benutzer die zweite Alert-Nachricht wegklickt und protokolliert dann die Endzeit in der Konsole:</p>
+
+<p><img alt="timerresult.png" class="default internal" src="https://mdn.mozillademos.org/files/16113/console-timeLog.png" style="border: 1px solid black; height: 102px; margin: 0 auto; width: 318px;"></p>
+
+<p>Beachten Sie, dass der Name des Timers sowohl beim Start als auch beim Stoppen des Timers angezeigt wird.</p>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis:</strong> Es ist wichtig zu beachten, dass der Timer die Gesamtzeit für die Transaktion angibt, wenn Sie das Timing für den Netzwerkverkehr protokollieren. Die im Netzwerkbereich aufgeführte Zeit ist nur die Zeit, die der Header benötigt. Wenn Sie die Antwort-Body-Protokollierung aktiviert haben, sollte die angegebene Zeit für den Antwortheader und den Nachrichtentext der Anzeige in der Konsolenausgabe entsprechen.</p>
+</div>
+
+<h3 id="Stapelverfolgung_(Strack_Traces)">Stapelverfolgung (Strack Traces)</h3>
+
+<p>Das Konsolenobjekt unterstützt auch die Ausgabe eines Stack-Trace. Daraufhin wird der Anrufpfad angezeigt, mit dem Sie den Punkt erreichen, an dem Sie {{domxref("console.trace()")}} aufrufen. Gegebener Code wie folgt:</p>
+
+<pre class="brush: js">function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+</pre>
+
+<p>Die Ausgabe in der Konsole sieht ungefähr so aus:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Console")}}</p>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<ul>
+ <li>Wenn in Firefox auf einer Seite ein <code>console</code>-Objekt definiert ist, wird das in Firefox integrierte Objekt überschrieben.</li>
+ <li>Vor {{Gecko("12.0")}} funktionieren die Methoden des <code>console</code>-Objekts nur, wenn die Webkonsole geöffnet ist. Beginnend mit {{Gecko("12.0")}} wird die Ausgabe zwischengespeichert, bis die Webkonsole geöffnet wird. Anschließend wird sie angezeigt.</li>
+ <li>Es ist erwähnenswert, dass das in Firefox integrierte <code>Console</code>-Objekt mit dem von <a href="http://getfirebug.com/">Firebug</a> bereitgestellten kompatibel ist.</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Tools" title="Tools">Tools</a></li>
+ <li><a href="/de/docs/Tools/Web_Console" title="Web Console">Web-Konsole</a> — Wie die Web-Konsole Konsolen-API-Aufrufe in Firefox verarbeitet</li>
+ <li><a href="/de/docs/Tools/Remote_Debugging">Remote-Debugging</a> — Anzeigen der Konsolenausgabe, wenn das Debugging-Ziel ein mobiles Gerät ist</li>
+ <li><a href="/de/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">Protokollierung der Konsole auf dem Gerät</a> — So protokollieren Sie auf Firefox OS-Geräten</li>
+</ul>
+
+<h3 id="Andere_Implementierungen">Andere Implementierungen</h3>
+
+<ul>
+ <li><a href="https://developers.google.com/web/tools/chrome-devtools/console/api">Google Chrome DevTools</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li>
+ <li><a href="https://support.apple.com/de-de/guide/safari-developer/log-messages-with-the-console-dev4e7dedc90/mac">Safari</a></li>
+</ul>