11 files changed, 864 insertions, 0 deletions
diff --git a/files/tr/tools/browser_console/index.html b/files/tr/tools/browser_console/index.html
new file mode 100644
index 0000000000..542c9f6b28
--- /dev/null
+++ b/files/tr/tools/browser_console/index.html
@@ -0,0 +1,187 @@
+---
+title: Browser Console
+slug: Araclar/Browser_Console
+tags:
+  - Developer
+  - Tutorial
+  - WebGL
+  - WebMechanics
+  - WebRTC
+translation_of: Tools/Browser_Console
+---
+<div>    {{ToolsSidebar}}</div>
+
+<p>The Browser Console is like the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>, but applied to the whole browser rather than a single content tab.</p>
+
+<p>So it logs the same sorts of information as the Web Console - network requests, JavaScript, CSS, and security errors and warnings, and messages explicitly logged by JavaScript code. However, rather than logging this information for a single content tab, it logs information for all content tabs, for add-ons, and for the browser's own code.</p>
+
+<p>If you also want to use the other web developer tools in the regular Web <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> with add-on or browser code, consider using the <a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a>.</p>
+
+<p>Similarly, you can execute JavaScript expressions using the Browser Console. But while the Web Console executes code in the page window scope, the Browser Console executes them in the scope of the browser's chrome window. This means you can interact with all the browser's tabs using the <a href="/en-US/docs/Code_snippets/Tabbed_browser" title="/en-US/docs/Code_snippets/Tabbed_browser"><code>gBrowser</code></a> global, and even with the XUL used to specify the browser's user interface.</p>
+
+<div class="blockIndicator geckoVersionNote">
+<p>NB: The Browser Console command line (to execute JavaScript expressions) is disabled by default. To enable it set the <code>devtools.chrome.enabled</code> preference to <code>true</code> in about:config, or set the "Enable browser {{Glossary("chrome")}} and add-on debugging toolboxes" (Firefox 40 and later)  option in the <a href="/en-US/docs/Tools/Settings">developer tool settings</a>.</p>
+</div>
+
+<h2 id="Opening_the_Browser_Console">Opening the Browser Console</h2>
+
+<p>You can open the Browser Console in one of two ways:</p>
+
+<ol>
+ <li>from the menu: select "Browser Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on macOS).</li>
+ <li>from the keyboard: press Ctrl+Shift+J (or Cmd+Shift+J on a Mac).</li>
+</ol>
+
+<p>You can also start the Browser Console by launching Firefox from the command line and passing the <code>-jsconsole</code> argument:</p>
+
+<pre>/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole</pre>
+
+<p>The Browser Console looks like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16787/browser_console_68.png" style="display: block; height: 339px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>You can see that the Browser Console looks and behaves very much like the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>:</p>
+
+<ul>
+ <li>most of the window is occupied by a <a href="/en-US/docs/Tools/Web_Console#Message_Display_Pane" title="/en-US/docs/Tools/Web_Console#Message_Display_Pane">pane that display messages</a>.</li>
+ <li>at the top, a <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/docs/Tools/Web_Console#Filtering_and_searching">toolbar</a> enables you to filter the messages that appear.</li>
+ <li>at the bottom, a <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter" title="/en-US/docs/docs/Tools/Web_Console#The_command_line_interpreter">command line interpreter</a> enables you to evaluate JavaScript expressions.</li>
+</ul>
+
+<p>Beginning with Firefox 68, the Browser Console allows you to show or hide messages from the content process (i.e. the messages from scripts in all the opened pages) by setting or clearing the checkbox labeled <strong>Show Content Messages</strong>. The following image shows the browser console focused on the same page as above after clicking on the <strong>Show Content Messages</strong> checkbox.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16788/browser_console_68_02.png" style="display: block; height: 339px; margin: 0 auto; width: 800px;"></p>
+
+<h2 id="Browser_Console_logging">Browser Console logging</h2>
+
+<p>The Browser console logs the same sorts of messages as the Web Console:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Web_Console#HTTP_requests" title="/en-US/docs/Tools/Web_Console#HTTP_requests">HTTP requests</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Warnings_and_errors" title="/en-US/docs/Tools/Web_Console#Warnings_and_errors">Warnings and errors</a> (including JavaScript, CSS, security warnings and errors, and messages explicitly logged by JavaScript code using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">console</a> API).</li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages" title="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages">Input/output messages</a>: commands send to the browser via the command line, and the result of executing them.</li>
+</ul>
+
+<p>However, it displays such messages from:</p>
+
+<ul>
+ <li>web content hosted by all browser tabs</li>
+ <li>the browser's own code</li>
+ <li>add-ons.</li>
+</ul>
+
+<h3 id="Messages_from_add-ons">Messages from add-ons</h3>
+
+<p>The Browser Console displays messages logged by all Firefox add-ons.</p>
+
+<h4 id="Console.jsm">Console.jsm</h4>
+
+<p>To use the console API from a traditional or bootstrapped add-on, get it from the Console module.</p>
+
+<p>One exported symbol from Console.jsm is "console". Below is an example of how to access it, which adds a message to the Browser Console.</p>
+
+<pre class="brush: js">Components.utils.import("resource://gre/modules/Console.jsm");
+console.log("Hello from Firefox code"); //output messages to the console</pre>
+
+<p>Learn more:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/console">console API reference</a></li>
+ <li><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/modules/Console.jsm">Console.jsm source code in the Mozilla DXR</a></li>
+</ul>
+
+<h4 id="HUDService">HUDService</h4>
+
+<p>There is also the HUDService which allows access to the Browse Console. The module is available at <a href="https://dxr.mozilla.org/mozilla-central/source/devtools/client/webconsole/hudservice.js">Mozilla DXR</a>. We see we can not only access the Browser Console but also Web Console.</p>
+
+<p>Here is an example on how to clear the contents of the Browser console:</p>
+
+<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm");
+var HUDService = devtools.require("devtools/client/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+hud.jsterm.clearOutput(true);</pre>
+
+<p>If you would like to access the content document of the Browser Console this can be done with the HUDService. This example here makes it so that when you mouse over the "Clear" button it will clear the Browser Console:</p>
+
+<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm");
+var HUDService = devtools.require("devtools/client/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+
+var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
+clearBtn.addEventListener('mouseover', function() {
+  hud.jsterm.clearOutput(true);
+}, false);</pre>
+
+<h4 id="Bonus_Features_Available">Bonus Features Available</h4>
+
+<p>For <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html">Add-on SDK</a> add-ons, the console API is available automatically. Here's an example add-on that just logs an error when the user clicks a widget:</p>
+
+<pre class="brush: js">widget = require("sdk/widget").Widget({
+  id: "an-error-happened",
+  label: "Error!",
+  width: 40,
+  content: "Error!",
+  onClick: logError
+});
+
+function logError() {
+  console.error("something went wrong!");
+}</pre>
+
+<p>If you <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html">build this as an XPI file</a>, then open the Browser Console, then open the XPI file in Firefox and install it, you'll see a widget labeled "Error!" in the Add-on bar:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5937/browser-console-addon.png" style="display: block; margin-left: auto; margin-right: auto;">Click the icon. You'll see output like this in the Browser Console:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5851/browser-console-addon-output.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>For Add-on SDK-based add-ons only, the message is prefixed with the name of the add-on ("log-error"), making it easy to find all messages from this add-on using the <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/Tools/Web_Console#Filtering_and_searching">"Filter output"</a> search box. By default, only error messages are logged to the console, although <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels">you can change this in the browser's preferences</a>.</p>
+
+<h2 id="Browser_Console_command_line">Browser Console command line</h2>
+
+<div class="blockIndicator geckoVersionNote">
+<p>The Browser Console command line is disabled by default. To enable it set the <code>devtools.chrome.enabled</code> preference to <code>true</code> in about:config, or set the "Enable chrome debugging" option in the <a href="/en-US/docs/Tools/Settings">developer tool settings</a>.</p>
+</div>
+
+<p>Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:<img alt="" src="https://mdn.mozillademos.org/files/5855/browser-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;">Also like the Web Console's command line interpreter, this command line supports <a href="/en-US/docs/Tools/Web_Console#Autocomplete" title="/en-US/docs/Tools/Web_Console#Autocomplete">autocomplete</a>, <a href="/en-US/docs/Tools/Web_Console#Command_history" title="/en-US/docs/Tools/Web_Console#Command_history">history</a>, and various <a href="/en-US/docs/Tools/Web_Console#Keyboard_shortcuts" title="/en-US/docs/docs/Tools/Web_Console#Keyboard_shortcuts">keyboard shortcuts </a>and <a href="/en-US/docs/Tools/Web_Console#Helper_commands" title="/en-US/docs/Tools/Web_Console#Helper_commands">helper commands</a>. If the result of a command is an object, you can <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects" title="/en-US/docs/Tools/Web_Console#Inspecting_objects">click on the object to see its details</a>.</p>
+
+<p>But while the Web Console executes code in the scope of the content window it's attached to, the browser console executes code in the scope of the chrome window of the browser. You can confirm this by evaluating <code>window</code>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5867/browser-console-chromewindow.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>This means you can control the browser: opening, closing tabs and windows and changing the content that they host, and modify the browser's UI by creating, changing and removing XUL elements.</p>
+
+<h3 id="Controlling_the_browser">Controlling the browser</h3>
+
+<p>The command line interpreter gets access to the <a href="/en-US/docs/XUL/tabbrowser" title="/en-US/docs/XUL/tabbrowser"><code>tabbrowser</code></a> object, through the <code>gBrowser</code> global, and that enables you to control the browser through the command line. Try running this code in the Browser Console's command line (remember that to send multiple lines to the Browser Console, use Shift+Enter):</p>
+
+<pre class="brush: js">var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
+newTabBrowser.addEventListener("load", function() {
+  newTabBrowser.contentDocument.body.innerHTML = "&lt;h1&gt;this page has been eaten&lt;/h1&gt;";
+}, true);
+newTabBrowser.contentDocument.location.href = "https://mozilla.org/";</pre>
+
+<p>It adds a listener to the currently selected tab's <code>load</code> event that will eat the new page, then loads a new page.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can restart the browser with the command <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>R</kbd> (Windows, Linux) or <kbd>Cmd</kbd> + <kbd>Alt</kbd> + <kbd>R</kbd> (Mac) This command restarts the browser with the same tabs open as before the restart.</p>
+</div>
+
+<h3 id="Modifying_the_browser_UI">Modifying the browser UI</h3>
+
+<p>Since the global <code>window</code> object is the browser's chrome window, you can also modify the browser's user interface. On Windows, the following code will add a new item to the browser's main menu:</p>
+
+<pre class="brush: js">var parent = window.document.getElementById("appmenuPrimaryPane");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5859/browser-console-modify-ui-windows.png" style="display: block; margin-left: auto; margin-right: auto;">On macOS, this similar code will add a new item to the "Tools" menu:</p>
+
+<pre class="brush: js">var parent = window.document.getElementById("menu_ToolsPopup");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5861/browser-console-modify-ui-osx.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
diff --git a/files/tr/tools/debugger/index.html b/files/tr/tools/debugger/index.html
new file mode 100644
index 0000000000..36f2ee5531
--- /dev/null
+++ b/files/tr/tools/debugger/index.html
@@ -0,0 +1,55 @@
+---
+title: Hata ayıklayıcı
+slug: Araclar/HataAyıklayıcı
+tags:
+  - '#HataAyıklayıcı #HataAyıklama #JavaScript'
+translation_of: Tools/Debugger
+---
+<div class="note">
+<p>Bu sayfa Firefox 52 veya daha üzeri sürümdeki JavaScript Hata Ayıklayıcı'yı tanıtır. Daha önceki sürümlerde nasıl olduğunu görmek için  <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger_%28before_Firefox_52%29">Debugger (before Firefox 52)</a>.</p>
+
+<p>Eğer Firefox 52 veya daha yeni sürüm kullanıyor ve  eski Hata Ayıklayıcı'ya dönmek istiyorsanız, about:config adresini ziyaret edip  "devtools.debugger.new-debugger-frontend" tercihini <code>false</code> yaparak başarabilirsiniz. </p>
+</div>
+
+<p>{{EmbedYouTube("QK4hKWmJVLo")}}</p>
+
+<p>JavaScript Hata Ayıklayıcı, hataları izlemenize yardımcı olması için JavaScript kodunu adım adım izlemenize veya durumunu değiştirmenize olanak tanır.</p>
+
+<p>Onu Firefox'ta yerel olarak hata ayıklamak için veya uzaktan çalıştırılabilir. Örneğin Android cihazda Android için Firefox çalışırken. Uzaktaki bir hedefe nasıl bağlanıldığını öğrenmek için <a href="/en-US/docs/Tools/Remote_Debugging"> Remote debugging </a>sayfasını ziyaret edin.</p>
+
+<p>Hata Ayıklayıcı Firefox'ta yerleşik olarak bulunur, ve bu sayfalar Firefox'ta gömülü bu özelliği açıklar. Ancak onu bağımsız bir web uygulaması olarak da çalıştırabilirsiniz, ve daha sonra onu hata ayıklamak için diğer tarayıcılarda ve düğümde kullanabilirsiniz. Daha fazla detay için projenin GitHub deposuna bakabilirsiniz: <a href="https://github.com/devtools-html/debugger.html">project's GitHub repository</a>.</p>
+
+<p>Yeni Hata Ayıklayıcı  — henüz — eski Hata Ayıklayıcı'nın tüm özelliklerini desteklemiyor. Şuradan bakın: <a href="/en-US/docs/Tools/Debugger/Limitations_of_the_new_debugger">Limitations of the new debugger</a>.</p>
+
+<hr>
+<h2 id="Kullanıcı_Arayüz_Turu">Kullanıcı Arayüz Turu</h2>
+
+<p>Hata Ayıklayıcı'da yolunuzu bulmak için size küçük bir tur : <a href="/en-US/docs/Tools/Debugger/UI_Tour">quick tour of the UI</a>.</p>
+
+<hr>
+<h2 id="Nasıl">Nasıl?</h2>
+
+<p>Hata Ayıklayıcı'da ne yapabileceğinizi bulmak için aşağıdaki Nasıl? Rehberini takip edin:</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Open_the_debugger">Open the debugger</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Set a breakpoint</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Set a conditional breakpoint</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">Disable breakpoints</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Step_through_code">Step through code</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Breaking_on_exceptions">Breaking on exceptions</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">Pretty-print a minified file</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Search">Search</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">Debug eval sources</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="Referans">Referans</h2>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger/Keyboard_shortcuts">Klavye kısayolları</a></li>
+</ul>
+</div>
diff --git a/files/tr/tools/index.html b/files/tr/tools/index.html
new file mode 100644
index 0000000000..9c2e82ecb6
--- /dev/null
+++ b/files/tr/tools/index.html
@@ -0,0 +1,113 @@
+---
+title: Firefox Geliştirici Araçları
+slug: Araclar
+tags:
+  - Türkçe Firefox Devop Toolls
+  - firefox aurora
+  - geliştirici araçları
+translation_of: Tools
+---
+<div><font><font><font><font>{{ToolsSidebar}}</font></font></font></font></div>
+
+<div class="summary">HTML, CSS ve JavaScript'i telefonundan ve masaüstü bilgisayarından incele, düzenle ve ayıkla. Geliştirici araçları son sürümleri için <a href="https://www.mozilla.org/en-US/firefox/developer/">Firefox Gelistirici Sürümü'nü indir</a>.</div>
+
+<div class="column-container zone-callout">
+<h3 id="Aurora_da_neler_yeni"><a href="https://hacks.mozilla.org/2013/11/firefox-developer-tools-episode-27-edit-as-html-codemirror-more/" title="Aurora Hacks sonrası">Aurora' da neler yeni?</a></h3>
+Son <a href="http://www.mozilla.org/en-US/firefox/aurora/" title="http://www.mozilla.org/en-US/firefox/aurora/">Firefox Aurora dağıtımı</a> Firefox 27' dir, ve geliştirici araçları için bu güncellemeleri içerir:
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a>, WebGL shader'larını görmenizi ve değiştirmenizi sağlar</li>
+ <li><font><font>Debugger'ı dinlediğiniz </font></font><a href="/en-US/docs/Tools/Debugger#Break_on_a_DOM_event"><font><font>DOM olaylarında durması</font></font></a><font><font> için talimat verin</font></font></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector#Editing_HTML"><font><font>Denetçide HTML'yi değiştirin</font></font></a></li>
+ <li><font><font>Denetçinin </font></font><a href="/en-US/docs/Tools/Page_Inspector#Rules_view"><font><font>Kurallar Sekmasinde</font></font></a><font><font>, renk paletlerini ve arkaplanları görün</font></font></li>
+ <li><font><font>Web Konsolu şimdi </font></font><a href="/en-US/docs/Tools/Web_Console#Reflow_events"><font><font>yeniden akış olayları kaydeder</font></font></a></li>
+ <li><font><font>Kod Görüntüleyici  şimdi çoğu araçta kaynak editörü olarak kullanılmakta</font></font></li>
+</ul>
+</div>
+
+<div class="column-container">
+<p><img alt="Seçmenler adipiscing lorem ipsum dolor elit, sit amet.  Kazanan sonuc Maecenas futbol.  Maecenas korkar.  Tamam bir, çalışan, çapı yaşamak, olmayan lütfen, kolay Hayat, Hayim.  Ama vadi Eleman Am rafa sohbet.  Hamil finanse Hemen başlayın." src="https://mdn.mozillademos.org/files/6111/debugger-800.png" style="display: block; height: 360px; margin-left: auto; margin-right: auto; width: 800px;"><span class="seoSummary"><font><font>Firefox Geliştirici Araçları'nı </font></font><a href="/en-US/docs/Tools/Page_Inspector" title="/ Tr-TR / docs / Araçlar / Page_Inspector"><font><font>HTML and CSS'i incelemek ve düzenlemek</font></font></a><font><font>, </font></font><a href="/en-US/docs/Tools/Debugger" title="/ Tr-TR / docs / Araçlar / Debugger"><font><font>JavaScript'te</font></font></a><font><font> hata ayıklamak ve sayfa içinde </font></font><a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter" title="/ Tr-TR / docs / Araçlar / Web_Console # The_command_line_interpreter"><font><font>JavaScript'i çalıştırmak</font></font></a><font><font> için kullanabilirsiniz. Bir sayfayı yüklerken tarayıcınızın karşılaştığı JavaScript ve CSS uyarı ve hatalarını görebilmeye ek olarak, ağ isteklerini görmek için de bu geliştirici araçlarını kullanabilirsiniz. </font></font></span></p>
+
+<div class="tpart"><font><font>Android için Firefox ve yakında Firefox OS çalıştıran kodda hata ayıklamak için geliştirici araçlarını kullanabilirsiniz. Mobil geliştirmeyi hedefleyen araçlar da sağladık: Duyarlı Tasarım Görünümü, bir sitenin küçük bir ekranda nasıl görüneceğini görmenin hızlı bir yoludur ve Firefox OS Simulator, bir Firefox OS uygulamasını masaüstünde gerek kalmadan çalıştırmanıza ve hata ayıklamanıza olanak tanır gerçek bir Firefox OS cihazı kullanmak için.</font></font></div>
+
+<div class="tpart"></div>
+
+<div class="tpart"><font><font>Firefox eklentileri hata ayıklayıcı API'sına erişebilir, böylece yerleşik araçları genişleten ve geliştiren kendi geliştirici araçlarınızı oluşturabilirsiniz. Uzaktan hata ayıklama protokolü ile kendi hata ayıklama istemcilerinizi ve sunucularınızı uygulayabilir, böylece kendi araçlarınızı kullanarak web sitelerinde hata ayıklama veya Firefox araçlarını kullanarak farklı hedeflerde hata ayıklama yapabilirsiniz.</font></font></div>
+
+<div class="column-third">
+<h2 id="Tools" name="Tools"><font><font>Araç Kutusu</font></font></h2>
+
+<p><a href="/en-US/docs/Tools/Toolbox" title="/ Tr-TR / docs / Araçlar / Araç Kutusu"><font><font>Araç Kutusu</font></font></a><font><font>, Firefox içindeki tüm Geliştirici Araçları'nı tek çatı altına toplamayı sağlamaktadır.</font></font></p>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools/Page_Inspector" title="Araçlar / Page_Inspector"><font><font>Sayfa Denetçisi</font></font></a></dt>
+ <dd><font><font>Görünüm ve seçili öğe için HTML ve CSS ayarları.</font></font></dd>
+ <dt><a href="/en-US/docs/Tools/Web_Console" title="Araçlar / Web_Console"><font><font>Web Konsolu </font></font></a></dt>
+ <dd><font><font>Web sayfası yükleyen browser tarafından gönderilen bilgi, uyarı ve hata mesajlarını görün, ve JavaScript kullanarak sayfayı inceleyin ve degiştirin.</font></font></dd>
+ <dt><a href="/en-US/docs/Tools/Style_Editor" title="Araçlar / Style_Editor"><font><font>Biçim Editörü</font></font></a></dt>
+ <dd><font><font>Sayfanızdaki CSS ayarlarını görün ve düzenleyin.</font></font></dd>
+ <dt><a href="/en-US/docs/Tools/Debugger" title="Araçlar / Debugger"><font><font>JavaScript Debugger</font></font></a></dt>
+ <dd><font><font>Browserda calışan JavaScript kodunu inceleyin ve değişkenleri takip ederek kodunuzu debug edin.</font></font></dd>
+ <dt><a href="/en-US/docs/Tools/Profiler" title="Araçlar / Profiler"><font><font>JavaScript Profiler</font></font></a></dt>
+ <dd><font><font>Profiler'ı kullanarak JavaScript'inizin vaktini nerede harcadığını anlayın.</font></font></dd>
+ <dt><a href="/en-US/docs/Tools/Network_Monitor" title="Araçlar / Network_Monitor"><font><font>Ağ izleyici</font></font></a></dt>
+ <dd><font><font>Bir sayfa yüklendiğinde gerçekleşen bütün ağ taleplerini ve ne kadar süre aldıklarını inceleyin.</font></font></dd>
+ <dt><a href="/en-US/docs/Tools/Shader_Editor"><font><font>Shader Editör</font></font></a></dt>
+ <dd><font><font>Görüntüleme ve düzenleme köşe ve kullandığı parçası shader </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/WebGL"><font><font>WebGL</font></font></a><font><font> .</font></font></dd>
+</dl>
+</div>
+
+<div class="column-third">
+<h2 id="Mobil"><font><font>Mobil</font></font></h2>
+
+<p><font><font>Elbette mobil web geliştiricileri de web geliştiricileridir. Bu nedenle wen geliştirme araçlarının çoğunun mobil wen geliştiricilerini de ilgilendiriyor.Fakat sadece mobil geliştirmeyi hedefleyen bazı araçlar da hazırladık.</font></font></p>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools/Remote_Debugging" title="Araçlar / Remote_Debugging"><font><font>Uzaktan Hata Ayıklama</font></font></a></dt>
+ <dd><font><font>Android cihazında USB üzerinden hata ayıklamak için geliştirici araçlarını kullanın.</font></font></dd>
+ <dt><a href="/en-US/docs/Tools/Firefox_OS_Simulator" title="Araçlar / Firefox_OS_Simulator"><font><font>Firefox OS Simülatör</font></font></a></dt>
+ <dd><font><font>Gerçek bir Firefox OS cihazı kullanmanıza gerek kalmadan masaüstünde Firefox OS uygulamanızı çalıştırın ve hata ayıklayın.</font></font></dd>
+ <dt><a href="/en-us/docs/Tools/Responsive_Design_View" title="/ En-us / docs / Araçlar / Responsive_Design_View"><font><font>Responsive Tasarım Görünümü</font></font></a></dt>
+ <dd><font><font>Tarayıcı pencerenizin boyutunu değiştirmeden web sitenizin veya uygulamanızın farklı ekran boyutlarında nasıl görüneceğini görün..</font></font></dd>
+</dl>
+</div>
+
+<div class="column-third">
+<h2 id="Bağımsız_Araçlar"><font><font>Bağımsız Araçlar</font></font></h2>
+
+<p><font><font>Bu araçlar Firefox'a dahil edilebilir, ama kullanıcı arayüzleri (GUI) Araç Kutusu'na entegre edilemezler.</font></font></p>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools/Scratchpad" title="Araçlar / Scratchpad'i"><font><font>Çalışma defteri</font></font></a></dt>
+ <dd><font><font>Yazdığınız ve JavaScript yürütmek sağlar Firefox yerleşik bir metin editörü.</font></font></dd>
+ <dt><a href="/en-us/docs/Tools/Browser_Console" title="/ En-us / docs / Araçlar / Responsive_Design_View"><font><font>Tarayıcı Konsol</font></font></a></dt>
+ <dd><font><font>içerik, krom içeren tarayıcıda çalışan tüm JavaScript kodundan mesajlarına bakın ve eklentileri. </font><font>krom pencerenin bağlamda JavaScript kodunu yürütün.</font></font></dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/GCLI" title="ve / Araçlar / GCLI"><font><font>Geliştirici Araç Çubuğu</font></font></a></dt>
+ <dd><font><font>Bir komut satırı arayüzü en sık kullanılan araçlara hızlı erişim için geliştirici Firefox'ta araçları ve düğmelerle işlemek ve çalışmak için.</font></font></dd>
+ <dt><a href="/en-US/docs/Tools/3D_View" title="Araçlar / 3D_View"><font><font>3D Görünüm</font></font></a></dt>
+ <dd><font><font>"Tilt", bu mevcut sayfanın 3D görselleştirme sağlar olarak da bilinir.</font></font></dd>
+ <dt><a href="/en-US/docs/Tools/Paint_Flashing_Tool" title="Araçlar / Paint_Flashing_Tool"><font><font>Yanıp sönen Aracı Boya</font></font></a></dt>
+ <dd><font><font>Boya yanıp sönen aracı siteyle ilgili olası performans sorunları teşhis etmek için yardımcı olaylar karşısında yeniden boyanması ve tarayıcı penceresinin bir kısmını vurgular.</font></font></dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Diğer_Kaynaklar"><font><font>Diğer Kaynaklar</font></font></h2>
+
+<p><font><font>Mozilla'nın geliştirici araçları ekibi tarafından tutulan ancak değil bu bölümde listelenmiştir kaynakları yaygın web geliştiricileri tarafından kullanılır. </font><font>Biz bu listedeki birkaç Firefox eklentileri dahil, fakat tam liste için bkz ettik </font></font><a href="https://addons.mozilla.org/en-US/firefox/extensions/web-development/" title="https://addons.mozilla.org/en-US/firefox/extensions/web-development/"><font><font>addons.mozilla.org "Web Geliştirme" kategorisinde</font></font></a><font><font> .</font></font></p>
+
+<dl>
+ <dt><a href="https://www.getfirebug.com/" title="kundakçı"><font><font>kundakçı</font></font></a></dt>
+ <dd><font><font>bir JavaScript debugger, HTML ve CSS düzenleyici ve gösterici ve ağ monitör de dahil olmak üzere bir çok popüler ve güçlü bir web geliştirme aracı.</font></font></dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/DOM_Inspector" title="DOM_Inspector"><font><font>DOM Ayıklayıcı</font></font></a></dt>
+ <dd><font><font>web sayfaları veya XUL pencerelerin DOM göz, kontrol ve düzenleme.</font></font></dd>
+ <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/" title="Web Geliştiricisi"><font><font>Web Geliştirici</font></font></a></dt>
+ <dd><font><font>Bir menü ve çeşitli web geliştirici araçları ile tarayıcıya bir araç çubuğu ekler.</font></font></dd>
+ <dt><a href="https://webmaker.org/en-US/tools/" title="https://webmaker.org/en-US/tools/"><font><font>Web Tasarım Aracı</font></font></a></dt>
+ <dd><font><font>Mozilla tarafından geliştirilen araçlar kümesi, insanlar Internet gelişimi ile başlarken amaçlayan.</font></font></dd>
+ <dt><a href="http://www.w3.org/Status.html" title="W3C"><font><font>W3C Doğrulayıcı</font></font></a></dt>
+ <dd><font><font>W3C web sitesinin dahil olmak üzere web geçerliliğini kontrol etmek bir dizi araç barındıran </font></font><a href="http://validator.w3.org/" title="http://validator.w3.org/"><font><font>HTML</font></font></a><font><font> ve </font></font><a href="http://jigsaw.w3.org/css-validator/" title="http://jigsaw.w3.org/css-validator/"><font><font>CSS</font></font></a><font><font> .</font></font></dd>
+ <dt><a href="http://www.jshint.com/" title="JSHint"><font><font><font><font>JSHint</font></font></font></font></a></dt>
+ <dd><font><font>JavaScript kod analiz aracı</font></font></dd>
+</dl>
diff --git a/files/tr/tools/page_inspector/index.html b/files/tr/tools/page_inspector/index.html
new file mode 100644
index 0000000000..f50c28aa5c
--- /dev/null
+++ b/files/tr/tools/page_inspector/index.html
@@ -0,0 +1,46 @@
+---
+title: Page Inspector
+slug: Araclar/Page_Inspector
+translation_of: Tools/Page_Inspector
+---
+<p>Bir sayfanın HTML'sini ve CSS'sini incelemek ve değiştirmek için Page Inspector'ı kullanın.</p>
+
+<p>Firefox'un yerel kopyasında yüklü olan sayfaları veya Android için Firefox gibi uzak bir hedefi inceleyebilirsiniz. Geliştirici araçlarını uzak bir hedefe nasıl bağlayacağınızı öğrenmek için <a href="/en-US/docs/Tools/Remote_Debugging">uzaktan hata ayıklamaya</a><a href="/en-US/docs/Tools/Remote_Debugging"> </a> bakın.</p>
+
+<h2 id="Kullanıcı_Arayüzü_Turu">Kullanıcı Arayüzü Turu</h2>
+
+<p>Page Inspector'daki yolunuzu bulmak için, <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour">arayüzü hızlı bir şekilde gezin</a>.</p>
+
+<h2 id="Nasıl">Nasıl</h2>
+
+<p>Inspector'la neler yapabileceğinizi öğrenmek için, aşağıdaki kılavuzları inceleyin:</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Open the Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examine and edit HTML</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspect and select colors</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Reposition elements in the page</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">View fonts</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualize transforms</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Use the Inspector API</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">Select an element</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examine event listeners</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Edit CSS filters</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_background_images">View background images</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Use the Inspector from the Web Console</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examine CSS grid layouts</a></li>
+</ul>
+</div>
+
+<h2 id="Reference">Reference</h2>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/Keyboard_shortcuts">Keyboard shortcuts </a></li>
+ <li><a href="/en-US/docs/Tools/Tools_Toolbox#Inspector">Settings</a></li>
+</ul>
+</div>
diff --git a/files/tr/tools/performance/index.html b/files/tr/tools/performance/index.html
new file mode 100644
index 0000000000..803e590515
--- /dev/null
+++ b/files/tr/tools/performance/index.html
@@ -0,0 +1,92 @@
+---
+title: Performance
+slug: Araclar/Performance
+translation_of: Tools/Performance
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>The Performance tool gives you insight into your site's general responsiveness, JavaScript and layout performance. With the Performance tool you create a recording, or profile, of your site over a period of time. The tool then shows you an <a href="/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview">overview</a> of the things the browser was doing to render your site over the profile, and a graph of the <a href="/en-US/docs/Tools/Performance/Frame_rate">frame rate</a> over the profile.</p>
+
+<p>You get four sub-tools to examine aspects of the profile in more detail:</p>
+
+<ul>
+ <li>the <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> shows the different operations the browser was performing, such as executing layout, JavaScript, repaints, and garbage collection</li>
+ <li>the <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> shows the JavaScript functions in which the browser spent most of its time</li>
+ <li>the <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> shows the JavaScript call stack over the course of the recording</li>
+ <li>the <a href="/en-US/docs/Tools/Performance/Allocations">Allocations</a> view shows the heap allocations made by your code over the course of the recording. This view only appears if you checked "Record Allocations" in the Performance tool settings.</li>
+</ul>
+
+<p>{{EmbedYouTube("WBmttwfA_k8")}}</p>
+
+<hr>
+<h2 id="Getting_started">Getting started</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/UI_Tour">UI Tour</a></dt>
+ <dd>
+ <p>To find your way around the Performance tool, here's a quick tour of the UI.</p>
+ </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/How_to">How to</a></dt>
+ <dd>Basic tasks: open the tool, create, save, load, and configure recordings</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Components_of_the_Performance_tool">Components of the Performance tool</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Frame_rate">Frame rate</a></dt>
+ <dd>Understand your site's overall responsiveness.</dd>
+ <dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></dt>
+ <dd>Find bottlenecks in your site's JavaScript.</dd>
+ <dt><a href="/en-US/docs/Tools/Performance/Allocations">Allocations</a></dt>
+ <dd>See the allocations made by your code over the course of the recording.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></dt>
+ <dd>Understand the work the browser's doing as the user interacts with your site.</dd>
+ <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt>
+ <dd>See which JavaScript functions are executing, and when, over the course of the recording.</dd>
+ <dd></dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Scenarios">Scenarios</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animating CSS properties</a></dt>
+ <dd>Uses the Waterfall to understand how the browser updates a page, and how animating different CSS properties can affect performance.</dd>
+ <dd></dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensive JavaScript</a></dt>
+ <dd>Uses the frame rate and Waterfall tools to highlight performance problems caused by long-running JavaScript, and how using workers can help in this situation.</dd>
+</dl>
+</div>
+</div>
+
+<div class="column-half">
+<dl>
+ <dd></dd>
+</dl>
+</div>
diff --git a/files/tr/tools/remote_debugging/index.html b/files/tr/tools/remote_debugging/index.html
new file mode 100644
index 0000000000..0718a25e60
--- /dev/null
+++ b/files/tr/tools/remote_debugging/index.html
@@ -0,0 +1,22 @@
+---
+title: Remote Debugging
+slug: Araclar/Remote_Debugging
+translation_of: Tools/Remote_Debugging
+---
+<p>You can use the Firefox developer tools on your desktop to debug code running remotely: in a different process on the same device or on a completely different device. To do this you use Firefox to attach the <a href="/en-US/docs/Toolbox" title="/en-US/docs/Toolbox">Toolbox</a> to the remote process, and the Toolbox is then launched in its own window. At the moment the following tools support remote debugging:</p>
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></li>
+ <li><a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a></li>
+ <li><a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">Profiler</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li>
+</ul>
+<h2 id="Firefox_for_Android">Firefox for Android</h2>
+<p><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Remotely debugging Firefox for Android</a> describes how to connect to Firefox on an Android device over USB.</p>
+<h2 id="Firefox_for_Metro">Firefox for Metro</h2>
+<p><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Metro">Remotely debugging Firefox for Metro</a> describes how to use desktop Firefox to debug code running in Windows 8 (Metro-style) Firefox.</p>
+<h2 id="Firefox_OS">Firefox OS</h2>
+<p><a href="/en-US/Firefox_OS/Using_the_App_Manager">Using the App Manager</a> includes instructions for connecting the Firefox developer tools to the Firefox OS simulator or to a Firefox OS device.</p>
+<h2 id="Thunderbird">Thunderbird</h2>
+<p><a href="/en-US/docs/Tools/Remote_Debugging/Thunderbird">Remotely debugging Thunderbird</a> explains how a combination of Firefox and Thunderbird can be used to debug code running in Thunderbird.</p>
diff --git a/files/tr/tools/web_console/index.html b/files/tr/tools/web_console/index.html
new file mode 100644
index 0000000000..585d711508
--- /dev/null
+++ b/files/tr/tools/web_console/index.html
@@ -0,0 +1,45 @@
+---
+title: Web Konsolu
+slug: Araclar/Web_Konsolu
+tags:
+  - Debugging Guide Tools Turkish
+  - Türkçe DevOps Web Console Mozilla
+  - Türkçe Web Development
+  - Web Machine Türkçe
+  - Web console Türkçe
+translation_of: Tools/Web_Console
+---
+<div>{{ToolsSidebar}}</div>
+
+<p><strong> Web Konsolu:</strong></p>
+
+<ol>
+ <li>Kayıt bilgileri bir web sayfasıyla ilişkilidir: ağ istekleri, JavaScript, CSS, güvenlik hataları, uyarılar -ve hatalar da-, sayfa içeriğinde çalışan JavaScript kodunda uyarılar ve bilgilendirme mesajları açıkça tutulur.</li>
+ <li>Sayfa içeriğinde JavaScript ifadeleri çalıştırarak bir web sayfasıyla etkileşime girmenizi sağlar</li>
+</ol>
+
+<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/tr/docs/Araclar/Web_Konsolu/Web_Konsolunu_Acmak">Web Konsolunu Açmak</a></dt>
+ <dd>Web Konsolu nasıl açılır bilgisi.</dd>
+ <dt><a href="/tr/docs/Araclar/Web_Konsolu/Komut_Satiri_Tercumani">Komut Satırı Tercümanı</a></dt>
+ <dd>How to interact with a document using the Console.</dd>
+ <dt><a href="/tr/docs/Araclar/Web_Konsolu/Bolunmus_Konsol">Bölünmüş Konsol</a></dt>
+ <dd>Konsolu diğer araçlarla birlikte kullanın.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Web_Console/Console_messages">Konsol mesajları</a></dt>
+ <dd>Konsol kayıtlarının detayları.</dd>
+ <dt><a href="/tr/docs/Araclar/Web_Konsolu/Zengin_Cikti">Zengin Çıktı</a></dt>
+ <dd>Konsol tarafından kaydedilen nesnelere bakın ve bunlarla etkileşime geçin.</dd>
+ <dt><a href="/en-US/docs/Tools/Web_Console/Keyboard_shortcuts">Klavye Kısaltmaları</a></dt>
+ <dd>Kısayol referansı.</dd>
+</dl>
+</div>
+</div>
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>
diff --git a/files/tr/tools/web_console/split_console/index.html b/files/tr/tools/web_console/split_console/index.html
new file mode 100644
index 0000000000..b145783aca
--- /dev/null
+++ b/files/tr/tools/web_console/split_console/index.html
@@ -0,0 +1,20 @@
+---
+title: Bölünmüş Konsol
+slug: Araclar/Web_Konsolu/Bolunmus_Konsol
+translation_of: Tools/Web_Console/Split_console
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Konsolu diğer araçlarla birlikte kullanabilirsiniz. Araç kutusundaki başka bir araçtayken,  <kbd>Esc</kbd>'ye tıklayın ya da <a href="/en-US/docs/Tools_Toolbox#Toolbar">Araç Çubuğu</a> menüsündeki "Bölünmüş Konsolu Göster"i seçin. Araç kutusu şimdi yukarıda orijinal araç ve altındaki web konsoluyla birlikte gözükecektir.</p>
+
+<p>Bölünmüş konsolu tekrar <kbd>Esc</kbd>'ye tıklayarak ya da "Bölünmüş Konsolu Gizle" butonuyla kapatabilirsiniz.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16106/split-console.png" style="border-style: solid; border-width: 1px; height: 77px; width: 350px;"></p>
+
+<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p>
+
+<p>Her zaman olduğu gibi,  <code>$0</code> elementler için Denetçi'de seçilmiş kısaltmalar şeklinde çalışır:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16105/split-console-debugger.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 902px;">Bölünmüş konsolu hata ayıklayıcı ile birlikte kullandığınızda, konsolun kapsamı o anda çalışan yığın çerçevesidir. Öyleyse fonksiyonda bir kesme noktasına gelirseniz, kapsam işlevin kapsamı olacaktır. İşlevde tanımlanan nesneler için otomatik tamamlama elde edersiniz ve bunları kolayca değiştirebilirsiniz:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16107/split-console-show-debug.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 902px;"></p>
diff --git a/files/tr/tools/web_console/the_command_line_interpreter/index.html b/files/tr/tools/web_console/the_command_line_interpreter/index.html
new file mode 100644
index 0000000000..a63f823b21
--- /dev/null
+++ b/files/tr/tools/web_console/the_command_line_interpreter/index.html
@@ -0,0 +1,141 @@
+---
+title: Komut Satırı Tercümanı
+slug: Araclar/Web_Konsolu/Komut_Satiri_Tercumani
+translation_of: Tools/Web_Console/The_command_line_interpreter
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Web Konsolu'nun komut satırını kullanarak gerçek zamanlı bir şekilde JavaScript ifadelerini yorumlayabilirsiniz.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16672/web_console.png" style="display: block; height: 350px; margin-left: auto; margin-right: auto; width: 924px;"></p>
+
+<h2 id="İfadeleri_Giriş">İfadeleri Giriş</h2>
+
+<p>İfadeleri girmek için komut satırına yazmanız ve <kbd>Enter</kbd> 'a tıklamanız yeterlidir. çoklu satırlı ifadeleri girmek için, <kbd>Enter</kbd> yerine <kbd>Shift</kbd>+<kbd>Enter</kbd> kullanmalısınız.</p>
+
+<p>Yazdığınız ifade mesaj görüntüleme penceresinde yankılanır ve sonuç şöyle olur:</p>
+
+<p><img alt="Console output showing syntax highlighting" src="https://mdn.mozillademos.org/files/16670/console_01.png" style="border: 1px solid black; display: block; height: 179px; margin: 0px auto; width: 918px;"></p>
+
+<p><kbd>Enter</kbd> tuşuna bastığınızda girişiniz tam gözükmüyorsa, Konsol bunu girişinizi tamamlamanızı sağlayan <kbd>Shift</kbd>+<kbd>Enter</kbd> kombinasyonu olarak kabul eder.</p>
+
+<p>Örneğin, şöyle yazarsanız:</p>
+
+<pre class="brush: js">function foo() {</pre>
+
+<p>sonra <kbd>Enter</kbd> 'a basarsanız, Konsol girişi hemen gerçekleştirmez ama <kbd>Shift</kbd>+<kbd>Enter</kbd> tuşlarına basmışsınız gibi davranır, böylelikle işlev tanımı girmeyi bitirebilirsiniz.</p>
+
+<h2 id="Değişkenlere_Erişmek">Değişkenlere Erişmek</h2>
+
+<p>Sayfada tanımlanan değişkenlere erişebilirsiniz, hem <code>pencere</code> gibi yerleşik değişkenlere hem de <code>jQuery </code>gibi JavaScript tarafından eklenen değişkenlere:<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>
+
+<h2 id="Otomatik_Tamamlama">Otomatik Tamamlama</h2>
+
+<p>Komut satırı otomatik tamamlama içerir: ilk birkaç harfi girin ve olası tamamlamalar ile bir açılır pencere görünür:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16426/console_autocomplete_cropped.png" style="border: 1px solid black; display: block; height: 299px; margin-left: auto; margin-right: auto; width: 302px;"></p>
+
+<p>Öneriyi kabul etmek için <kbd>Enter</kbd>, <kbd>Tab </kbd>ya da sağ ok tuşunu kullanın, farklı bir öneriye geçmek için ise yukarı aşağı oklarını kullanın, ya da önerilerden hiçbirini beğenmiyorsanız yazmaya devam edin.</p>
+
+<p>Konsol otomatik tamamlama önerileri büyük/küçük harf duyarlı değildir.</p>
+
+<p>Konsol,mevcut olarak yürütülen yığın çerçevesinin kapsamından tamamlamalar önerir. Bu şu anlama gelir, bir fonksiyonda kesme noktasına ulaşırsanız, fonksiyondaki yerel nesneler için otomatik tamamlama elde edersiniz.</p>
+
+<p>Otomatik tamamlama önerilerini dizi elemanları için de alırsınız:<img alt="" src="https://mdn.mozillademos.org/files/16440/arrayList_autocomplete.png" style="border: 1px solid black; display: block; height: 271px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<h2 id="Değişkenleri_tanımlamak">Değişkenleri tanımlamak</h2>
+
+<p>Kendi değişken ve fonksiyonlarınızı tanımlayıp sonra onlara erişebilirsiniz:</p>
+
+<p><img alt="Console output showing syntax highlighting" src="https://mdn.mozillademos.org/files/16470/console_syntaxHighlighting.png" style="border: 1px solid black; display: block; height: 310px; margin-left: auto; margin-right: auto; width: 452px;"></p>
+
+<p>Girdiğiniz metin, yorumlandıktan sonra sözdizimi kurallarınca vurgulama özelliğine sahip olacaktır.</p>
+
+<div class="blockIndicator note">
+<p><strong>Not:</strong> Erişilebilirlik özellikleri etkinleştirilmişse, sözdizimi kuralları vurgulanması(syntax highlighting) tarayıcınızda gözükmez.</p>
+</div>
+
+<h2 id="Komut_Geçmişi">Komut Geçmişi</h2>
+
+
+
+<p>Komut satırı yazdığınız komutları hatırlar: geçmişinizde ileri veya geri gitmek için yukarı veya aşağı oklarını kullanın.</p>
+
+<p>Komut geçmişi oturumlar arası kalıcıdır. Geçmişi silmek için, s<code>clearHistory()</code> <a href="en-US/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">yardımcı fonksiyonunu</a> kullanın.</p>
+
+<p>Firefox 65 ile başlanarak, Linux ve Mac'te veya Windows'ta PowerShell'de olduğu gibi komut satırı geçmişinde ters bir arama başlatabilirsiniz.</p>
+
+<p>Ters aramayı başlatmak için Windows ve Linux'ta <kbd>F9</kbd>, Mac'te <kbd>Ctrl</kbd> + <kbd>R</kbd> tuşlarına basın.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16468/reverse_search.png" style="border: 1px solid black; display: block; height: 335px; margin: 0px auto; width: 500px;"></p>
+
+<p>Konsolun altındaki giriş kutusuna aramak istediğiniz metni girin. Aradığınız komutu yazmaya başlayın, ilk eşleşme konsolda gösterilecektir. Tekrar tekrar  <kbd>Ctrl</kbd> + <kbd>R</kbd> (<kbd>F9</kbd> Windows ve Linux'ta) yazmak, eşleşmeler arasında geriye doğru dönecektir.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16469/reverse_search_example.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
+
+<p>Geriye doğru aramayı başlattıktan sonra, eşleşme listesinde ileriye bakmak için <kbd>Ctrl</kbd> + <kbd>S</kbd> (<kbd>Shift</kbd> + <kbd>F9</kbd> Windows ve Linux'ta) tuşlarını kullanabilirsiniz. İstediğiniz komutu bulduğunuzda, ifadeyi çalıştırmak için <kbd>Return</kbd> (<kbd>Enter</kbd>) tuşuna basın.</p>
+
+<h2 id="Iframe'lerle_çalışmak">Iframe'lerle çalışmak</h2>
+
+<p>Bir sayfada gömülü <a href="/en-US/docs/Web/HTML/Element/iframe">iframe</a>'ler varsa, konsolun kapsamını belirli bir iframe olarak değiştirmek için <code>cd()</code> komutunu kullanabilirsiniz ve sonrasında bu iframe tarafından barındırılan belgede tanımlanan işlevleri çalıştırabilirsiniz. <code>cd()</code> kullanarak bir iframe seçmenin üç yolu vardır: </p>
+
+<p> iframe DOM öğesini iletebilirsiniz:</p>
+
+<pre class="brush: js">var frame = document.getElementById("frame1");
+cd(frame);</pre>
+
+<p>Iframe ile eşleşen bir CSS seçiciyi geçebilirsiniz:</p>
+
+<pre class="brush: js">cd("#frame1");</pre>
+
+<p>Iframe 'in global pencere nesnesini iletebilirsiniz:</p>
+
+<pre class="brush: js">var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+</pre>
+
+<p>İçeriği tekrar üst düzey pencereye geçirmek için, argüman olmadan <code>cd()</code> işlevini çağırın:</p>
+
+<pre class="brush: js">cd();</pre>
+
+<p>Örneğin, iframe yerleştiren bir belgemiz olduğunu varsayalım:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;iframe id="frame1" src="static/frame/my-frame1.html"&gt;&lt;/iframe&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Iframe yeni bir fonksiyon tanımlar:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;script&gt;
+      function whoAreYou() {
+        return "I'm frame1";
+      }
+   &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Bağlamı şu şekilde iframe olarak değiştirebilirsiniz:</p>
+
+<pre class="brush: js">cd("#frame1");</pre>
+
+<p>Şimdi global pencerenin belgesinin iframe olduğunu fark edeceksiniz:</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;">Ve, iframe'de tanımlanan işlevi çağırabilirsiniz:</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>
+
+<h2 id="Yardımcı_Komutlar">Yardımcı Komutlar</h2>
+
+<p>{{ page("en-US/docs/Tools/Web_Console/Helpers", "The commands") }}</p>
diff --git a/files/tr/tools/web_console/ui_tour/index.html b/files/tr/tools/web_console/ui_tour/index.html
new file mode 100644
index 0000000000..d1a1ebb0d5
--- /dev/null
+++ b/files/tr/tools/web_console/ui_tour/index.html
@@ -0,0 +1,30 @@
+---
+title: Web Konsolu'nu Açmak
+slug: Araclar/Web_Konsolu/Web_Konsolunu_Acmak
+translation_of: Tools/Web_Console/UI_Tour
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Web Konsolu'nu açmak için:</p>
+
+<ul>
+ <li>Firefox Menü'nün altında "Web geliştirici"den "Web Konsolu"nu seçin (veya Mac OS X'te "Araçlar" menü çubuğunu görüntülerseniz)</li>
+ <li>ya da  <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>K</kbd> (<kbd>Command</kbd><kbd>Option</kbd><kbd>K</kbd>  ,OS X'te) klavye kısaltması ile.</li>
+</ul>
+
+<p><a href="/en-US/docs/Tools/Tools_Toolbox">Araç Kutusu</a> alt kısımda gözükecektir, tarayıcı penceresinin solunda veya sağında (yerleştirme ayarlarınıza bağlı olarak), Web konsolu aktif edilir. (<a href="/en-US/docs/Tools/Tools_Toolbox#Toolbar">DevTools toolbar</a>'da "Konsol" olarak adlandırılır.):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16191/console_63.png" style="border: 1px solid black; display: block; margin: 0 auto; width: 845px;"></p>
+
+<p>Web Konsolu'nun arayüzü dört yatay bölüme ayrılmıştır:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">Araç Çubuğu</a>: Üst kısımda üç buton içeren bir araç çubuğu bulunur. Konsolun içeriğini silmek için çöp tenekesi düğmesine tıklayın. Konsolda görüntülenen mesajları filtrelemek için huni simgesine tıklayın. Araç çubuğunun sağ tarafındaki onay kutusu, kaydetmek için "Kalıcı günlükler" özelliğini açmanıza izin verir.</li>
+ <li><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">Komut satırı</a>: Komut satırı iki büyüktür işareti ile başlar (&gt;&gt;). JavaScript ifadeleri girmek için kullanın.</li>
+ <li><a href="/en-US/docs/Tools/Web_Console/Console_messages" title="#message-display-pane">Mesaj Görüntüleme Bölgesi</a>: Sayfadaki kod ve komut satırına girilen komutlar tarafından oluşturulan mesajlar her komutun ardından görüntülenir.</li>
+ <li>Araç çubuğunun sağ tarafındaki onay kutusu yeni bir sayfaya gittiğinizde veya geçerli sayfayı yeniden yüklediğinizde konsolun temizlenip temizlenmediğini kontrol eder. Varsayılan ayar konsolu temizleyecektir.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Not:</strong> Konsolun içeriğini  <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd>  (Windows, macOS, ve Linux'ta) veya <kbd>Cmd</kbd> + <kbd>K</kbd>  (macOS'da) klavye komutlarıyla temizleyebilirsiniz.</p>
+</div>