From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/tr/araclar/browser_console/index.html | 187 +++++++++++++++++++++ .../index.html" | 55 ++++++ files/tr/araclar/index.html | 113 +++++++++++++ files/tr/araclar/page_inspector/index.html | 46 +++++ files/tr/araclar/performance/index.html | 92 ++++++++++ files/tr/araclar/remote_debugging/index.html | 22 +++ .../araclar/web_konsolu/bolunmus_konsol/index.html | 20 +++ files/tr/araclar/web_konsolu/index.html | 45 +++++ .../web_konsolu/komut_satiri_tercumani/index.html | 141 ++++++++++++++++ .../web_konsolu/web_konsolunu_acmak/index.html | 30 ++++ .../tr/araclar/web_konsolu/zengin_cikti/index.html | 113 +++++++++++++ 11 files changed, 864 insertions(+) create mode 100644 files/tr/araclar/browser_console/index.html create mode 100644 "files/tr/araclar/hataay\304\261klay\304\261c\304\261/index.html" create mode 100644 files/tr/araclar/index.html create mode 100644 files/tr/araclar/page_inspector/index.html create mode 100644 files/tr/araclar/performance/index.html create mode 100644 files/tr/araclar/remote_debugging/index.html create mode 100644 files/tr/araclar/web_konsolu/bolunmus_konsol/index.html create mode 100644 files/tr/araclar/web_konsolu/index.html create mode 100644 files/tr/araclar/web_konsolu/komut_satiri_tercumani/index.html create mode 100644 files/tr/araclar/web_konsolu/web_konsolunu_acmak/index.html create mode 100644 files/tr/araclar/web_konsolu/zengin_cikti/index.html (limited to 'files/tr/araclar') diff --git a/files/tr/araclar/browser_console/index.html b/files/tr/araclar/browser_console/index.html new file mode 100644 index 0000000000..542c9f6b28 --- /dev/null +++ b/files/tr/araclar/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 +--- +
    {{ToolsSidebar}}
+ +

The Browser Console is like the Web Console, but applied to the whole browser rather than a single content tab.

+ +

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.

+ +

If you also want to use the other web developer tools in the regular Web Toolbox with add-on or browser code, consider using the Browser Toolbox.

+ +

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 gBrowser global, and even with the XUL used to specify the browser's user interface.

+ +
+

NB: The Browser Console command line (to execute JavaScript expressions) is disabled by default. To enable it set the devtools.chrome.enabled preference to true in about:config, or set the "Enable browser {{Glossary("chrome")}} and add-on debugging toolboxes" (Firefox 40 and later)  option in the developer tool settings.

+
+ +

Opening the Browser Console

+ +

You can open the Browser Console in one of two ways:

+ +
    +
  1. 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).
    2. +
  2. from the keyboard: press Ctrl+Shift+J (or Cmd+Shift+J on a Mac).
    3. +
+ +

You can also start the Browser Console by launching Firefox from the command line and passing the -jsconsole argument:

+ +
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
+ +

The Browser Console looks like this:

+ +

+ +

You can see that the Browser Console looks and behaves very much like the Web Console:

+ + + +

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 Show Content Messages. The following image shows the browser console focused on the same page as above after clicking on the Show Content Messages checkbox.

+ +

+ +

Browser Console logging

+ +

The Browser console logs the same sorts of messages as the Web Console:

+ + + +

However, it displays such messages from:

+ + + +

Messages from add-ons

+ +

The Browser Console displays messages logged by all Firefox add-ons.

+ +

Console.jsm

+ +

To use the console API from a traditional or bootstrapped add-on, get it from the Console module.

+ +

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.

+ +
Components.utils.import("resource://gre/modules/Console.jsm");
+console.log("Hello from Firefox code"); //output messages to the console
+ +

Learn more:

+ + + +

HUDService

+ +

There is also the HUDService which allows access to the Browse Console. The module is available at Mozilla DXR. We see we can not only access the Browser Console but also Web Console.

+ +

Here is an example on how to clear the contents of the Browser console:

+ +
Components.utils.import("resource://devtools/shared/Loader.jsm");
+var HUDService = devtools.require("devtools/client/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+hud.jsterm.clearOutput(true);
+ +

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:

+ +
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);
+ +

Bonus Features Available

+ +

For Add-on SDK 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:

+ +
widget = require("sdk/widget").Widget({
+  id: "an-error-happened",
+  label: "Error!",
+  width: 40,
+  content: "Error!",
+  onClick: logError
+});
+
+function logError() {
+  console.error("something went wrong!");
+}
+ +

If you build this as an XPI file, 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:

+ +

Click the icon. You'll see output like this in the Browser Console:

+ +

+ +

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 "Filter output" search box. By default, only error messages are logged to the console, although you can change this in the browser's preferences.

+ +

Browser Console command line

+ +
+

The Browser Console command line is disabled by default. To enable it set the devtools.chrome.enabled preference to true in about:config, or set the "Enable chrome debugging" option in the developer tool settings.

+
+ +

Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:Also like the Web Console's command line interpreter, this command line supports autocomplete, history, and various keyboard shortcuts and helper commands. If the result of a command is an object, you can click on the object to see its details.

+ +

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 window:

+ +

+ +

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.

+ +

Controlling the browser

+ +

The command line interpreter gets access to the tabbrowser object, through the gBrowser 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):

+ +
var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
+newTabBrowser.addEventListener("load", function() {
+  newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>";
+}, true);
+newTabBrowser.contentDocument.location.href = "https://mozilla.org/";
+ +

It adds a listener to the currently selected tab's load event that will eat the new page, then loads a new page.

+ +
+

Note: You can restart the browser with the command Ctrl + Alt + R (Windows, Linux) or Cmd + Alt + R (Mac) This command restarts the browser with the same tabs open as before the restart.

+
+ +

Modifying the browser UI

+ +

Since the global window 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:

+ +
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);
+ +

On macOS, this similar code will add a new item to the "Tools" menu:

+ +
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);
+ +

diff --git "a/files/tr/araclar/hataay\304\261klay\304\261c\304\261/index.html" "b/files/tr/araclar/hataay\304\261klay\304\261c\304\261/index.html" new file mode 100644 index 0000000000..36f2ee5531 --- /dev/null +++ "b/files/tr/araclar/hataay\304\261klay\304\261c\304\261/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 +--- +
+

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  Debugger (before Firefox 52).

+ +

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 false yaparak başarabilirsiniz. 

+
+ +

{{EmbedYouTube("QK4hKWmJVLo")}}

+ +

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.

+ +

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  Remote debugging sayfasını ziyaret edin.

+ +

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: project's GitHub repository.

+ +

Yeni Hata Ayıklayıcı  — henüz — eski Hata Ayıklayıcı'nın tüm özelliklerini desteklemiyor. Şuradan bakın: Limitations of the new debugger.

+ +
+

Kullanıcı Arayüz Turu

+ +

Hata Ayıklayıcı'da yolunuzu bulmak için size küçük bir tur : quick tour of the UI.

+ +
+

Nasıl?

+ +

Hata Ayıklayıcı'da ne yapabileceğinizi bulmak için aşağıdaki Nasıl? Rehberini takip edin:

+ +
+ +
+ +
+

Referans

+ +
+ +
diff --git a/files/tr/araclar/index.html b/files/tr/araclar/index.html new file mode 100644 index 0000000000..9c2e82ecb6 --- /dev/null +++ b/files/tr/araclar/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 +--- +
{{ToolsSidebar}}
+ +
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 Firefox Gelistirici Sürümü'nü indir.
+ +
+

Aurora' da neler yeni?

+Son Firefox Aurora dağıtımı Firefox 27' dir, ve geliştirici araçları için bu güncellemeleri içerir: + + +
+ +
+

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.Firefox Geliştirici Araçları'nı HTML and CSS'i incelemek ve düzenlemek, JavaScript'te hata ayıklamak ve sayfa içinde JavaScript'i çalıştırmak 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. 

+ +
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.
+ +
+ +
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.
+ +
+

Araç Kutusu

+ +

Araç Kutusu, Firefox içindeki tüm Geliştirici Araçları'nı tek çatı altına toplamayı sağlamaktadır.

+ +
+
Sayfa Denetçisi
+
Görünüm ve seçili öğe için HTML ve CSS ayarları.
+
Web Konsolu
+
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.
+
Biçim Editörü
+
Sayfanızdaki CSS ayarlarını görün ve düzenleyin.
+
JavaScript Debugger
+
Browserda calışan JavaScript kodunu inceleyin ve değişkenleri takip ederek kodunuzu debug edin.
+
JavaScript Profiler
+
Profiler'ı kullanarak JavaScript'inizin vaktini nerede harcadığını anlayın.
+
Ağ izleyici
+
Bir sayfa yüklendiğinde gerçekleşen bütün ağ taleplerini ve ne kadar süre aldıklarını inceleyin.
+
Shader Editör
+
Görüntüleme ve düzenleme köşe ve kullandığı parçası shader WebGL .
+
+
+ +
+

Mobil

+ +

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.

+ +
+
Uzaktan Hata Ayıklama
+
Android cihazında USB üzerinden hata ayıklamak için geliştirici araçlarını kullanın.
+
Firefox OS Simülatör
+
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.
+
Responsive Tasarım Görünümü
+
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..
+
+
+ +
+

Bağımsız Araçlar

+ +

Bu araçlar Firefox'a dahil edilebilir, ama kullanıcı arayüzleri (GUI) Araç Kutusu'na entegre edilemezler.

+ +
+
Çalışma defteri
+
Yazdığınız ve JavaScript yürütmek sağlar Firefox yerleşik bir metin editörü.
+
Tarayıcı Konsol
+
içerik, krom içeren tarayıcıda çalışan tüm JavaScript kodundan mesajlarına bakın ve eklentileri. krom pencerenin bağlamda JavaScript kodunu yürütün.
+
Geliştirici Araç Çubuğu
+
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.
+
3D Görünüm
+
"Tilt", bu mevcut sayfanın 3D görselleştirme sağlar olarak da bilinir.
+
Yanıp sönen Aracı Boya
+
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.
+
+
+
+ +
+

Diğer Kaynaklar

+ +

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. Biz bu listedeki birkaç Firefox eklentileri dahil, fakat tam liste için bkz ettik addons.mozilla.org "Web Geliştirme" kategorisinde .

+ +
+
kundakçı
+
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ı.
+
DOM Ayıklayıcı
+
web sayfaları veya XUL pencerelerin DOM göz, kontrol ve düzenleme.
+
Web Geliştirici
+
Bir menü ve çeşitli web geliştirici araçları ile tarayıcıya bir araç çubuğu ekler.
+
Web Tasarım Aracı
+
Mozilla tarafından geliştirilen araçlar kümesi, insanlar Internet gelişimi ile başlarken amaçlayan.
+
W3C Doğrulayıcı
+
W3C web sitesinin dahil olmak üzere web geçerliliğini kontrol etmek bir dizi araç barındıran HTML ve CSS .
+
JSHint
+
JavaScript kod analiz aracı
+
diff --git a/files/tr/araclar/page_inspector/index.html b/files/tr/araclar/page_inspector/index.html new file mode 100644 index 0000000000..f50c28aa5c --- /dev/null +++ b/files/tr/araclar/page_inspector/index.html @@ -0,0 +1,46 @@ +--- +title: Page Inspector +slug: Araclar/Page_Inspector +translation_of: Tools/Page_Inspector +--- +

Bir sayfanın HTML'sini ve CSS'sini incelemek ve değiştirmek için Page Inspector'ı kullanın.

+ +

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 uzaktan hata ayıklamaya bakın.

+ +

Kullanıcı Arayüzü Turu

+ +

Page Inspector'daki yolunuzu bulmak için, arayüzü hızlı bir şekilde gezin.

+ +

Nasıl

+ +

Inspector'la neler yapabileceğinizi öğrenmek için, aşağıdaki kılavuzları inceleyin:

+ +
+ +
+ +

Reference

+ +
+ +
diff --git a/files/tr/araclar/performance/index.html b/files/tr/araclar/performance/index.html new file mode 100644 index 0000000000..803e590515 --- /dev/null +++ b/files/tr/araclar/performance/index.html @@ -0,0 +1,92 @@ +--- +title: Performance +slug: Araclar/Performance +translation_of: Tools/Performance +--- +
{{ToolsSidebar}}
+ +

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 overview of the things the browser was doing to render your site over the profile, and a graph of the frame rate over the profile.

+ +

You get four sub-tools to examine aspects of the profile in more detail:

+ + + +

{{EmbedYouTube("WBmttwfA_k8")}}

+ +
+

Getting started

+ +
+
+
+
UI Tour
+
+

To find your way around the Performance tool, here's a quick tour of the UI.

+
+
+
+ +
+
+
How to
+
Basic tasks: open the tool, create, save, load, and configure recordings
+
+
+
+ +
+

Components of the Performance tool

+ +
+
+
+
Frame rate
+
Understand your site's overall responsiveness.
+
Call Tree
+
Find bottlenecks in your site's JavaScript.
+
Allocations
+
See the allocations made by your code over the course of the recording.
+
+
+ +
+
+
Waterfall
+
Understand the work the browser's doing as the user interacts with your site.
+
Flame Chart
+
See which JavaScript functions are executing, and when, over the course of the recording.
+
+
+
+
+ +
+

Scenarios

+ +
+
+
+
Animating CSS properties
+
Uses the Waterfall to understand how the browser updates a page, and how animating different CSS properties can affect performance.
+
+
+
+ +
+
+
Intensive JavaScript
+
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.
+
+
+
+ +
+
+
+
+
diff --git a/files/tr/araclar/remote_debugging/index.html b/files/tr/araclar/remote_debugging/index.html new file mode 100644 index 0000000000..0718a25e60 --- /dev/null +++ b/files/tr/araclar/remote_debugging/index.html @@ -0,0 +1,22 @@ +--- +title: Remote Debugging +slug: Araclar/Remote_Debugging +translation_of: Tools/Remote_Debugging +--- +

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 Toolbox to the remote process, and the Toolbox is then launched in its own window. At the moment the following tools support remote debugging:

+ +

Firefox for Android

+

Remotely debugging Firefox for Android describes how to connect to Firefox on an Android device over USB.

+

Firefox for Metro

+

Remotely debugging Firefox for Metro describes how to use desktop Firefox to debug code running in Windows 8 (Metro-style) Firefox.

+

Firefox OS

+

Using the App Manager includes instructions for connecting the Firefox developer tools to the Firefox OS simulator or to a Firefox OS device.

+

Thunderbird

+

Remotely debugging Thunderbird explains how a combination of Firefox and Thunderbird can be used to debug code running in Thunderbird.

diff --git a/files/tr/araclar/web_konsolu/bolunmus_konsol/index.html b/files/tr/araclar/web_konsolu/bolunmus_konsol/index.html new file mode 100644 index 0000000000..b145783aca --- /dev/null +++ b/files/tr/araclar/web_konsolu/bolunmus_konsol/index.html @@ -0,0 +1,20 @@ +--- +title: Bölünmüş Konsol +slug: Araclar/Web_Konsolu/Bolunmus_Konsol +translation_of: Tools/Web_Console/Split_console +--- +
{{ToolsSidebar}}
+ +

Konsolu diğer araçlarla birlikte kullanabilirsiniz. Araç kutusundaki başka bir araçtayken,  Esc'ye tıklayın ya da Araç Çubuğu 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.

+ +

Bölünmüş konsolu tekrar Esc'ye tıklayarak ya da "Bölünmüş Konsolu Gizle" butonuyla kapatabilirsiniz.

+ +

+ +

{{EmbedYouTube("G2hyxhPHyXo")}}

+ +

Her zaman olduğu gibi,  $0 elementler için Denetçi'de seçilmiş kısaltmalar şeklinde çalışır:

+ +

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:

+ +

diff --git a/files/tr/araclar/web_konsolu/index.html b/files/tr/araclar/web_konsolu/index.html new file mode 100644 index 0000000000..585d711508 --- /dev/null +++ b/files/tr/araclar/web_konsolu/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 +--- +
{{ToolsSidebar}}
+ +

 Web Konsolu:

+ +
    +
  1. 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.
    2. +
  2. Sayfa içeriğinde JavaScript ifadeleri çalıştırarak bir web sayfasıyla etkileşime girmenizi sağlar
    3. +
+ +

{{EmbedYouTube("C6Cyrpkb25k")}}

+ +
+
+
+
Web Konsolunu Açmak
+
Web Konsolu nasıl açılır bilgisi.
+
Komut Satırı Tercümanı
+
How to interact with a document using the Console.
+
Bölünmüş Konsol
+
Konsolu diğer araçlarla birlikte kullanın.
+
+
+ +
+
+
Konsol mesajları
+
Konsol kayıtlarının detayları.
+
Zengin Çıktı
+
Konsol tarafından kaydedilen nesnelere bakın ve bunlarla etkileşime geçin.
+
Klavye Kısaltmaları
+
Kısayol referansı.
+
+
+
diff --git a/files/tr/araclar/web_konsolu/komut_satiri_tercumani/index.html b/files/tr/araclar/web_konsolu/komut_satiri_tercumani/index.html new file mode 100644 index 0000000000..a63f823b21 --- /dev/null +++ b/files/tr/araclar/web_konsolu/komut_satiri_tercumani/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 +--- +
{{ToolsSidebar}}
+ +

Web Konsolu'nun komut satırını kullanarak gerçek zamanlı bir şekilde JavaScript ifadelerini yorumlayabilirsiniz.

+ +

+ +

İfadeleri Giriş

+ +

İfadeleri girmek için komut satırına yazmanız ve Enter 'a tıklamanız yeterlidir. çoklu satırlı ifadeleri girmek için, Enter yerine Shift+Enter kullanmalısınız.

+ +

Yazdığınız ifade mesaj görüntüleme penceresinde yankılanır ve sonuç şöyle olur:

+ +

Console output showing syntax highlighting

+ +

Enter tuşuna bastığınızda girişiniz tam gözükmüyorsa, Konsol bunu girişinizi tamamlamanızı sağlayan Shift+Enter kombinasyonu olarak kabul eder.

+ +

Örneğin, şöyle yazarsanız:

+ +
function foo() {
+ +

sonra Enter 'a basarsanız, Konsol girişi hemen gerçekleştirmez ama Shift+Enter tuşlarına basmışsınız gibi davranır, böylelikle işlev tanımı girmeyi bitirebilirsiniz.

+ +

Değişkenlere Erişmek

+ +

Sayfada tanımlanan değişkenlere erişebilirsiniz, hem pencere gibi yerleşik değişkenlere hem de jQuery gibi JavaScript tarafından eklenen değişkenlere:

+ +

Otomatik Tamamlama

+ +

Komut satırı otomatik tamamlama içerir: ilk birkaç harfi girin ve olası tamamlamalar ile bir açılır pencere görünür:

+ +

+ +

Öneriyi kabul etmek için Enter, Tab 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.

+ +

Konsol otomatik tamamlama önerileri büyük/küçük harf duyarlı değildir.

+ +

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.

+ +

Otomatik tamamlama önerilerini dizi elemanları için de alırsınız:

+ +

Değişkenleri tanımlamak

+ +

Kendi değişken ve fonksiyonlarınızı tanımlayıp sonra onlara erişebilirsiniz:

+ +

Console output showing syntax highlighting

+ +

Girdiğiniz metin, yorumlandıktan sonra sözdizimi kurallarınca vurgulama özelliğine sahip olacaktır.

+ +
+

Not: Erişilebilirlik özellikleri etkinleştirilmişse, sözdizimi kuralları vurgulanması(syntax highlighting) tarayıcınızda gözükmez.

+
+ +

Komut Geçmişi

+ + + +

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.

+ +

Komut geçmişi oturumlar arası kalıcıdır. Geçmişi silmek için, sclearHistory() yardımcı fonksiyonunu kullanın.

+ +

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.

+ +

Ters aramayı başlatmak için Windows ve Linux'ta F9, Mac'te Ctrl + R tuşlarına basın.

+ +

+ +

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  Ctrl + R (F9 Windows ve Linux'ta) yazmak, eşleşmeler arasında geriye doğru dönecektir.

+ +

+ +

Geriye doğru aramayı başlattıktan sonra, eşleşme listesinde ileriye bakmak için Ctrl + S (Shift + F9 Windows ve Linux'ta) tuşlarını kullanabilirsiniz. İstediğiniz komutu bulduğunuzda, ifadeyi çalıştırmak için Return (Enter) tuşuna basın.

+ +

Iframe'lerle çalışmak

+ +

Bir sayfada gömülü iframe'ler varsa, konsolun kapsamını belirli bir iframe olarak değiştirmek için cd() komutunu kullanabilirsiniz ve sonrasında bu iframe tarafından barındırılan belgede tanımlanan işlevleri çalıştırabilirsiniz. cd() kullanarak bir iframe seçmenin üç yolu vardır: 

+ +

 iframe DOM öğesini iletebilirsiniz:

+ +
var frame = document.getElementById("frame1");
+cd(frame);
+ +

Iframe ile eşleşen bir CSS seçiciyi geçebilirsiniz:

+ +
cd("#frame1");
+ +

Iframe 'in global pencere nesnesini iletebilirsiniz:

+ +
var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+
+ +

İçeriği tekrar üst düzey pencereye geçirmek için, argüman olmadan cd() işlevini çağırın:

+ +
cd();
+ +

Örneğin, iframe yerleştiren bir belgemiz olduğunu varsayalım:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
+  </body>
+</html>
+ +

Iframe yeni bir fonksiyon tanımlar:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script>
+      function whoAreYou() {
+        return "I'm frame1";
+      }
+   </script>
+  </head>
+  <body>
+  </body>
+</html>
+ +

Bağlamı şu şekilde iframe olarak değiştirebilirsiniz:

+ +
cd("#frame1");
+ +

Şimdi global pencerenin belgesinin iframe olduğunu fark edeceksiniz:

+ +

Ve, iframe'de tanımlanan işlevi çağırabilirsiniz:

+ +

+ +

Yardımcı Komutlar

+ +

{{ page("en-US/docs/Tools/Web_Console/Helpers", "The commands") }}

diff --git a/files/tr/araclar/web_konsolu/web_konsolunu_acmak/index.html b/files/tr/araclar/web_konsolu/web_konsolunu_acmak/index.html new file mode 100644 index 0000000000..d1a1ebb0d5 --- /dev/null +++ b/files/tr/araclar/web_konsolu/web_konsolunu_acmak/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 +--- +
{{ToolsSidebar}}
+ +

Web Konsolu'nu açmak için:

+ + + +

Araç Kutusu 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. (DevTools toolbar'da "Konsol" olarak adlandırılır.):

+ +

+ +

Web Konsolu'nun arayüzü dört yatay bölüme ayrılmıştır:

+ + + +
+

Not: Konsolun içeriğini  Ctrl + Shift + L  (Windows, macOS, ve Linux'ta) veya Cmd + K  (macOS'da) klavye komutlarıyla temizleyebilirsiniz.

+
diff --git a/files/tr/araclar/web_konsolu/zengin_cikti/index.html b/files/tr/araclar/web_konsolu/zengin_cikti/index.html new file mode 100644 index 0000000000..388246ba4b --- /dev/null +++ b/files/tr/araclar/web_konsolu/zengin_cikti/index.html @@ -0,0 +1,113 @@ +--- +title: Zengin Çıktı +slug: Araclar/Web_Konsolu/Zengin_Cikti +translation_of: Tools/Web_Console/Rich_output +--- +
{{ToolsSidebar}}
+ +

Web konsolu nesneleri yazdırdığında, sadece nesnenin adından daha zengin bir bilgi kümesi içerir. Bilhassa:

+ + + +

Türe Özgü Zengin Çıktı

+ +

Web konsolu aşağıdakiler dahil birçok nesne türü için zengin çıktı sağlar:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Object
Array
Date
Promise +

+
RegExp
Window
Document
Element
Event
+ +

Nesne Özelliklerini İnceleme

+ +

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:

+ +

+ +

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.

+ +

İstek ayrıntılarının incelenmesi

+ +

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.

+ +

{{EmbedYouTube("Cj3Pjq6jk9s")}}

+ +

Çıktıyı panoya aktar

+ +

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:

+ +

+ +

Bu çıktının tümünü panoya kopyalar. Sonrasında bir belgeye yapıştırabilirsiniz. Çıktı şöyle görünecektir:

+ +
console.log(todoList)
+Array(4) [ {…}, {…}, {…}, {…} ]
+debugger eval code:1:9
+undefined
+ +

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:

+ +
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
+​
+<prototype>: Array []
+debugger eval code:1:9
+undefined
+ +

DOM düğümlerini vurgulama ve inceleme

+ +

Fareyi konsol çıktısındaki herhangi bir DOM öğesinin üzerine getirdiğinizde sayfada vurgulanır:

+ +

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.

-- cgit v1.2.3-54-g00ecf