1 files changed, 113 insertions, 0 deletions
diff --git a/files/tr/tools/web_console/rich_output/index.html b/files/tr/tools/web_console/rich_output/index.html
new file mode 100644
index 0000000000..388246ba4b
--- /dev/null
+++ b/files/tr/tools/web_console/rich_output/index.html
@@ -0,0 +1,113 @@
+---
+title: Zengin Çıktı
+slug: Araclar/Web_Konsolu/Zengin_Cikti
+translation_of: Tools/Web_Console/Rich_output
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Web konsolu nesneleri yazdırdığında, sadece nesnenin adından daha zengin bir bilgi kümesi içerir. Bilhassa:</p>
+
+<ul>
+ <li>belirli tipler için ek bilgi sağlar</li>
+ <li>nesnenin özelliklerinin detaylı incelenmesini sağlar</li>
+ <li>DOM öğeleri için daha zengin bilgiler sağlar ve bunları Denetçi'de seçmenize olanak tanır</li>
+</ul>
+
+<h2 id="Türe_Özgü_Zengin_Çıktı">Türe Özgü Zengin Çıktı</h2>
+
+<p>Web konsolu aşağıdakiler dahil birçok nesne türü için zengin çıktı sağlar:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>Object</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9597/web-console-object.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Array</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9589/web-console-array.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Date</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9591/web-console-date.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Promise</code></td>
+   <td>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/9599/web-console-promise.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 600px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>RegExp</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9601/web-console-regexp.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Window</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9603/web-console-window.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Document</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9593/web-console-document.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Element</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9595/web-console-element.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Event</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/14434/webconsole-events.png" style="height: 51px; width: 600px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Nesne_Özelliklerini_İnceleme">Nesne Özelliklerini İnceleme</h2>
+
+<p>Bir nesne konsolda günlüğe kaydedildiğinde yanında genişletilebileceğini belirten dik bir üçgen bulunur. Üçgene tıkladığınızda nesne içeriğini gösterecek şekilde genişletecektir:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16430/console_logObject.png" style="border: 1px solid black; display: block; height: 239px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>Firefox 67'den başlayarak (şu anda Firefox geliştirici'de kullanılabilir) konsolda görüntülenen nesnelerde gezinmek için klavyenizdeki ok tuşlarını kullanabilirsiniz. Sağ ok tuşu bir nesnenin ayrıntılarını açar ve sol ok tuşu açık nesneleri kapatır.</p>
+
+<h2 id="İstek_ayrıntılarının_incelenmesi">İstek ayrıntılarının incelenmesi</h2>
+
+<p>Nesne ayrıntılarını incelemeye benzer şekilde, you can see the details about a network request directly in the console. İsteğin yanındaki oka tıklayın; Ağ İzleyicisi aracındaki Başlıklar paneline eşdeğer olan bir detay paneli açılacaktır.</p>
+
+<p>{{EmbedYouTube("Cj3Pjq6jk9s")}}</p>
+
+<h2 id="Çıktıyı_panoya_aktar">Çıktıyı panoya aktar</h2>
+
+<p>Konsol penceresinde çıktı aldığınızda, çıktıyı sağ tıklayıp Görünür mesajları panoya aktar seçeneğini seçerek panoya kaydedebilirsiniz:</p>
+
+<p><a><img alt="" src="https://mdn.mozillademos.org/files/16568/console_export.png" style="height: 482px; width: 950px;"></a></p>
+
+<p>Bu çıktının tümünü panoya kopyalar. Sonrasında bir belgeye yapıştırabilirsiniz. Çıktı şöyle görünecektir:</p>
+
+<pre>console.log(todoList)
+Array(4) [ {…}, {…}, {…}, {…} ]
+debugger eval code:1:9
+undefined</pre>
+
+<p>Diziler gibi nesneleri de genişletirseniz, biraz farklı içerik elde edersiniz. Örneğin, yukarıdaki listedeki diziyi genişleterek aşağıdakileri alıyorum:</p>
+
+<pre>console.log(todoList)
+(4) […]
+
+0: Object { status: "Done", description: "Morning Pages", dateCreated: 1552404478137 }
+
+1: Object { status: "In Progress", description: "Refactor styles", dateCreated: 1552404493169 }
+
+2: Object { status: "To Do", description: "Create feedback form", dateCreated: 1552404512630 }
+
+3: Object { status: "To Do", description: "Normalize table", dateCreated: 1552404533790 }
+
+length: 4
+
+&lt;prototype&gt;: Array []
+debugger eval code:1:9
+undefined</pre>
+
+<h2 id="DOM_düğümlerini_vurgulama_ve_inceleme">DOM düğümlerini vurgulama ve inceleme</h2>
+
+<p>Fareyi konsol çıktısındaki herhangi bir DOM öğesinin üzerine getirdiğinizde sayfada vurgulanır:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7379/commandline-highlightnode.png" style="display: block; margin-left: auto; margin-right: auto;">Yukarıdaki ekran görüntüsünde, konsol çıktısındaki düğümün yanında mavi renkli bir "hedef" simgesi göreceksiniz: seçili düğümü seçerek denetçiye geçmek için tıklayın.</p>