Geliştirici Araçları

Bu dersin sonunda herhangi bir sayfanın HTML’ini tarayıcınızda inceleyebileceksiniz.

Geliştirici araçlarını açmak

Bilgisayardaki tarayıcılarda sayfaların içine bakmanızı sağlayan bir araç bulunur. Açmak için:

• F12 tuşuna basın, ya da
• Sayfada bir yere sağ tıklayıp İncele seçeneğini seçin.

Açılan panelde üstte sekmeler görürsünüz. Bizim kullanacağımız sekme Elements (Öğeler) sekmesidir. Geliştirici araçlarının tek amacı bu değildir ancak şu anda işimizi karmaşıklaştırmaya gerek yok.

Elements sekmesi

Burada sayfanın HTML’i iç içe bir ağaç şeklinde görünür.

• Solundaki küçük oklara basarak elemanları açıp kapatabilirsiniz.
• Farenizi bir satırın üzerine getirdiğinizde o eleman sayfada renklenir.
• Panelin sol üst köşesindeki ok simgesine basıp sayfada bir yere tıklarsanız o elemanın kodu bulunur.
• Bir yazının üzerine çift tıklayıp onu değiştirebilirsiniz.

Kaynak kod ile Elements farkı

İkisi aynı şey gibi görünse de değildir:

• Kaynak kod (Ctrl + U): Sunucudan gelen dosyanın kendisi.
• Elements: Tarayıcının o dosyayı okuyup kurduğu güncel yapı.

HTML kodunuzda bir hata varsa tarayıcı çoğu zaman onu sessizce düzeltir. Aşağıdaki örnekte p etiketini kapatmayı unuttuk.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Otomatik düzeltme</title>
</head>
<body>
  <p>Birinci paragraf
  <p>İkinci paragraf
</body>
</html>

p etiketinin kapanışı bazı durumlarda yazılmayabilir, bu yüzden tarayıcı sorun çıkarmaz. Yine de siz her zaman kapatın. Bu kodu kendi dosyanızda açıp Elements sekmesine bakarsanız tarayıcının </p> etiketlerini kendisinin eklediğini görürsünüz.

Görev

1. Bu sayfada F12 tuşuna basın.
2. Ok simgesini kullanarak sayfadaki en büyük başlığa tıklayın. Bu bir h1 etiketi olmalı.
3. Başlığın yazısına çift tıklayıp değiştirin.
4. Sayfayı yenileyin ve başlığın eski haline döndüğünü görün.

Bu derste öğrendikleriniz

• F12 ile geliştirici araçları açılır, HTML Elements sekmesinde görünür.
• Burada yaptığınız değişiklikler geçicidir.
• Elements sekmesi, tarayıcının hataları düzelttikten sonraki halini gösterir.