Tarayıcı geliştirici araçları nelerdir?

Günümüzde hemen hemen tüm modern tarayıcılar güçlü ve gelişmiş geliştirici araçlarına sahip. Bu araçlar yüklenmiş durumdaki sayfanın HTML, CSS ve JavaScript kodlarını incelemekten sayfanın istediği asset'lere ve bu asset'lerin yüklenme süresini görebilmeye kadar pek çok işleve sahip. Bu yazıda size kullandığınız tarayıcının geliştirici araçlarının temel işlevlerini öğreneceksiniz.

Not: Aşağıdaki örnekleri çalıştırmadan önce  Getting started with the Web yazısında geliştirdiğimiz Beginner's example site adlı web sitesini açmalısınız. Bu siteyi aşağıdaki adımları takip ederken açık tutmalısınız.

Tarayıcının geliştirici araçlarına ulaşmak

Geliştirici araçları tarayıcınızda aşağıdaki görseldekine benzer bir pencerede bulunmakta:

Peki bu pencereyi nasıl açabiliriz? Bunun üç yolu bulunmakta:

  • Klavye ile: Ctrl + Shift + I,  ya da
    • Internet Explorer ve Edge için: F12
    • macOS için: + + I
  • Menü çubuğu ile:
    • Firefox: Menu  ➤ Web Developer ➤ Toggle Tools, ya da Tools ➤ Web Developer ➤ Toggle Tools
    • Chrome: More tools ➤ Developer tools
    • Safari: Develop ➤ Show Web Inspector. Eğer Develop menüsünü göremiyorsanız, Safari Preferences ➤ Advanced, ve son olarak menü çubuğunda Show Develop seçeneğini işaretleyin.
    • Opera: Developer ➤ Developer tools
  • Bağlam menüsü ile: Web sayfasındaki bir öğenin üstünde sağ tıkladıktan (Mac için Ctrl-click), sonra açılan menüden Inspect Element seçeneğini seçin. (Bu yöntemin en büyük avantajı açılan pencerede seçilen kodu vurgulaması.)

Inspector: DOM kaşifi ve CSS editörü

Geliştirici araçları genelde varsayılan olarak Inspector penceresini, aşağıdaki görseldekine benzer şekilde, açar. Bu araç bulunduğunuz sayfanın o anki HTML kodunu ve o koda uygulanan CSS kodlarını gösterir. Ayrıca gösterilen kodları düzenleyebilmenizi ve canlı olarak bu değişimleri görebilmenizi sağlar.

Eğer inpector penceresini göremiyorsanız,

  • Inspector sekmesine tıklayın/dokunun.
  • Internet Explorer kullanıyorsanız DOM Explorer'a tıklayın/dokunun ya da Ctrl + 1 tuşlarına basın.
  • Microsoft Edge ya da Opera kullanıyorsanız Elements'e tıklayın/dokunun.
  • Safari kullanıyorsanız kontroller çok açık olmayabilir, fakat eğer başka bir seçeneği seçmediyseniz HTML kodunu görebilmeniz gerek. CSS kodlarını görmek için Style butonuna tıklayın.

DOM inspector'ünü keşfetmek

Başlangıç olarak DOM inspector'deki herhangi bir HTML öğesine sağ tıklayın ve açılan bağlam menüsüne göz atın. Mevcut seçenekler tarayıcıdan tarayıcıya değişiklik gösterebilse de başlıca seçenekler hemen hemen her tarayıcıda aynıdır:

  • Delete Node (bazen Delete Element). Seçili öğeyi siler.
  • Edit as HTML (bazen Add attribute/Edit text). Seçili HTML öğesini düzenleyebilmenizi ve sonuçlarını canı olarak görebilmenizi sağlar. Debugging ve test yapmak için oldukça kullanışlı bir özellikdir.
  • :hover/:active/:focus. Seçilen öğenin tasarımının nasıl değişeceğine göz atabilmeniz için öğe için seçilen durumu açık duruma getirir.
  • Copy/Copy as HTML. Seçilen HTML kodunu kopyalar.
  • Bazı tarayıcılar Copy CSS Path ve Copy XPath seçeneklerine de sahiptir. Bu seçenekler  o anki HTML öğesini seçecek CSS işaretçisini ya da XPath ifadesini kopyalayabilmenizi sağlar.

Şimdi elinizdeki DOM yapısını düzenlemeyi deneyin. Öncelikle bir öğenin üstünde çift tıklayın, ya da sağ tıklayıp Edit as HTML seçeneğini seçin. Sonrasında seçtiğiniz öğeyi istediğiniz gibi düzenleyebilirsiniz fakat unutmayınki bu değişiklikler kalıcı değildir.

CSS editörünü keşfetmek

Varsayılan olarak CSS editörü seçili öğeye uygulanan CSS kurallarını gösterir:

CSS editörünün pek çok kullanışlı özelliği var:

  • Öğeye uygulanan kurallar öğe için en spesifik olandan en az spesifik olana doğru sıralanır.
  • Deklarasyonların yanındaki kutucuklara tıklayarak o deklarasyonun kaldırılması durumunda ne olacağını görebilirsiniz.
  • Kısaltılmış özelliklerin yanlarındaki ok işaretlerine tıklayarak uzun hallerini görebilirsiniz.
  • Özellik isimlerine ya da değerlere tıklarsanız bir metin kutusu açılacaktır. Bu metin kutusunda yeni değerler ekleyebilir ve canlı olarak oluşacak tasarımı görebilirsiniz.
  • Her kuralın yanında kuralın dosya adı ve bulunduğu satır numarası bulunmakta. Kurala tıklamanız durumunda geliştirici aracı sizin için kural dosyasını açacaktır. Bu dosyada kuralları düzenleyebilir ve kaydedebilirsiniz.
  • Kuralların süslü parantezlerinden kapatma parantezine tıklayarak yeni deklarasyonlar yazabileceğiniz bir metin kutusunu açabilirisiniz.

CSS Viewer üzerinde tıklayabileceğiniz bir kaç sekme görebilirsiniz:

  • Computed: Bu sekme size seçili öğenin hesaplanmış son tasarımını (tarayıcın öğeye uyguladığı son veriler ile) gösterir.
  • Layout: Firefox'da bu alan iki bölümden oluşur:
    • Box Model: Seçili öğenin box modelini görsel bir şekilde temsil eder. Bu modelde öğenin sahip olduğu pading, border ve margin değerlerini ve öğenin büyüklüğünü görebilirsiniz.
    • Grid: Eğer inceledeğiniz sayfa CSS grid yapısını kullanıyorsa bu yapının detaylarını gösterir.
  • Fonts: Firefox'da Fonts sekmesi seçili öğede kullanılan fontları gösterir.

Daha fazlası için

Farklı tarayıcıların Inspector'larını keşfedin:

JavaScript debugger'ı

JavaScript debugger, kodunuzdaki problemleri belirleyebilmek için kodun çalışması sırasında beklemesini istediğiniz noktalarda değişkenlerin değerlerini gözlemleyebilme ve breakpointler atayabilme olanağı sağlar.

Debugger'a erişmek için:

Firefox: JavaScript debugger için, Simgesine tıkla ➤ Web DeveloperDebugger ya da  Ctrl + Shift + S tuşlarına bas. Eğer geliştirici araçları açık durumdaysa Debugger sekmesine tıkla.

Chrome: Geliştirici araçlarını aç ve Sources sekmesine tıkla. (Opera'da da aynı yöntem geçerli.)

Edge ve Internet Explorer 11: F12 tuşuna bastıktan sonra  Ctrl + 3 tuşlarına basın. Eğer geliştirici araçları açık durumda ise Debugger sekmesine tıklayın.

Safari: Geliştirici araçlarını açtıktan sonra Debugger sekmesini tıklayın.

Debugger'ı keşfetmek

Firefox'da JavaScript Debugger üç bölümden oluşmaktadır.

Dosya Listesi

Soldaki ilk bölmemiz bize debug ettiğiniz sayfa ile ilgili dosyaları listelemektedir. Üzerinde çalışmak istediğiniz dosyayı seçebilirsiniz. Bir dosyanın üstüne tıklayarak içeriğini Debugger'ın orta bölümünde görüntüleyebilirsiniz.

Kaynak Kodu

Kodun çalışmasını durdurmak istediğiniz yere breakpoint atayabilirsiniz. Görseldeki kodun 18 numaralı satırının vurgulanması bu satıra bir breakpoint atandığını göstermektedir.

Watch expression'ları ve breakpoint'ler

Sağdaki bölmede eklediğiniz watch expression'ların ve atadığınız breakpoint'lerin listesini görebilirsiniz.

Görseldeki ilk kısım, Watch expression, listItems adlı bir değişkenin eklendiğini gösteriyor. Listeyi genişleterek dizinin içindeki değerlere göz atabilirsiniz.

Bir sonraki kısım , Breakpoints, sayfaya atanmış breakpoint'leri listelemekte. Örnekteki example.js dosyasında listItems.push(inputNewItem.value); adlı ifadeye bir breakpoint atandığını görüyoruz.

Son iki kısım sadece kod çalışıyorken görünmektedirler.

Call stack kısmı o anki satıra kadar çalışmış olan kodu göstermektedir. Örnekte kodun fare tıklamasını ele alan bir fonksiyon içinde olduğunu ve o an bir breakpoint'te beklediğini görebilirsiniz.

Son kısım, Scopes, kodun farklı noktalarından hangi değerlerin görünür durumda olduğunu gösterir. Mesela, aşağıdaki resimde addItemClick fonksiyonun kodu için mevcut durumda kullanılabilecek nesneleri görebilirsiniz.

Daha fazlası için

Farklı tarayıcıların JavaScript debugger'larını keşfedin:

JavaScript konsolu

JavaScript konsolu, düzgün çalışmayan JavaScript kodlarınının debug edilmesi için harika bir araçtır. JavaScript konsolu yüklenmiş durumdaki sayfada JavaScript kodu çalıştırabilmenizi ve oluşan hataları görebilmenizi sağlar. Bu konsola ulaşabilmek:

Eğer geliştirici araçları açık durumda ise Console sekmesine tıklayın.

Diğer durumlarda Firefox  Ctrl + Shift + K tuşları ile JavaScript konsolunu açabilmenize imkan tanır. Bir diğer yöntem ise menü komutlarını kullanmak: Menu  ➤ Web Developer ➤ Web Console, ya da Tools ➤ Web Developer ➤ Web Console. Diğer tarayıcılarda JavaScript konsoluna ulaşmak için önce geliştirici araçlarını açıp sonra Console sekmesine tıklayabilirsiniz.

Bu yöntemlerin sonucun görseldekine benzer bir pencere göreceksiniz:

Konsolun ne yapabildiğini görmek için örnekteki kod parçacıklarını konsolunuzda teker teker deneyin:

  1. alert('hello!');
  2. document.querySelector('html').style.backgroundColor = 'purple';
  3. var myImage = document.createElement('img');
    myImage.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
    document.querySelector('h1').appendChild(myImage);

Şimdi de kodların hatalı örneklerini deneyin ve neler elde edeceğinizi görün.

  1. alert('hello!);
  2. document.cheeseSelector('html').style.backgroundColor = 'purple';
  3. var myImage = document.createElement('img');
    myBanana.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
    document.querySelector('h1').appendChild(myImage);

Tarayıcınız hata döndürmeye başladığını göreceksiniz. Bu hatalar çoğu zaman çok açık ifadeler döndürmeselerde elinizdeki problemleri çözmek için yeterli olacaklardır.

Daha fazlası için

Farklı tarayıcıların JavaScript konsollarını keşfedin:

Ayrıca bakınız