Tarayıcıda F12 Ne İşe Yarar? DevTools Rehberi: HTML, CSS, JavaScript ve Hata Ayıklama

Bir web sitesinin nasıl çalıştığını hiç merak ettin mi? Bir yazının rengini değiştirmek, bozuk bir butonun neden çalışmadığını anlamak veya yüklenmeyen bir görseli bulmak istiyorsan tarayıcının F12 geliştirici araçları tam sana göre.

Okuma süresi: 8-10 dakika Seviye: Başlangıç → Orta Konu: Web geliştirme, HTML, CSS, JavaScript, hata ayıklama

İçindekiler

1. F12 nedir?
2. Geliştirici araçları nasıl açılır?
3. Elements: HTML ve CSS inceleme
4. Console: JavaScript ve hatalar
5. Sources: Kodda hata ayıklama
6. Network: Dosyalar ve istekler
7. Diğer yararlı sekmeler
8. Uygulamalı mini çalışma
9. Sık sorulan sorular
10. Güvenlik ve gizlilik
11. Özet ve pratik görevler

1. F12 nedir?

F12, birçok masaüstü tarayıcıda Geliştirici Araçları (Developer Tools / DevTools) panelini açan klavye kısayoludur. Bu panel, tarayıcının görüntülediği web sayfasını incelemek ve sorunlarını teşhis etmek için kullanılan araçları bir araya getirir.

DevTools ile şunları yapabilirsin:

• Sayfadaki HTML öğelerini ve iç içe yapılarını incelemek.
• CSS özelliklerini geçici olarak değiştirmek ve tasarımın nasıl etkilendiğini görmek.
• JavaScript mesajlarını, uyarılarını ve hatalarını okumak.
• Sayfanın indirdiği dosyaları ve ağ isteklerini kontrol etmek.
• Mobil ekran boyutlarını taklit ederek duyarlı tasarımı test etmek.
• JavaScript kodunu belirli satırlarda durdurup adım adım çalıştırmak.
• Sayfanın performansı hakkında ipuçları edinmek.

Önemli: DevTools'ta yaptığın HTML ve CSS değişiklikleri çoğunlukla yalnızca kendi tarayıcındaki mevcut sayfayı etkiler. Sayfayı yenilediğinde değişiklikler genellikle kaybolur. Kalıcı değişiklik yapmak için kendi projenin HTML, CSS veya JavaScript dosyalarını düzenlemelisin.

2. F12 nasıl açılır?

Çoğu Windows ve Linux bilgisayarda şu yöntemleri deneyebilirsin:

macOS'ta kısayollar tarayıcıya göre değişir; Chrome'da çoğunlukla ⌘ + Option + I kullanılır. Bazı dizüstü bilgisayarlarda F12 için Fn + F12 gerekebilir. Kısayol çalışmıyorsa tarayıcının menüsünden geliştirici araçlarını açabilirsin.

İpucu: Ctrl + Shift + C ile sayfadaki bir öğeye tıklayarak o öğenin HTML ve CSS bilgilerine hızlıca ulaşabilirsin.

3. Elements: HTML ve CSS inceleme

Elements sekmesi, sayfanın tarayıcı tarafından oluşturulan HTML yapısını gösterir. Bir başlığı, paragrafı, görseli veya butonu seçebilir; seçili öğenin stillerini inceleyebilirsin.

Örneğin HTML'in şöyle olsun:

<div class="kart">
  <h2>Merhaba dünya!</h2>
  <p>Bu benim ilk kartım.</p>
  <button>İncele</button>
</div>

Bu öğenin görünümünü CSS ile şöyle biçimlendirebilirsin:

.kart {
  padding: 24px;
  border-radius: 16px;
  background: #f1f5ff;
  color: #172554;
}

.kart h2 {
  margin-top: 0;
}

.kart button {
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: #2563eb;
  color: white;
  cursor: pointer;
}

DevTools'ta .kart öğesini seçip background rengini değiştirmeyi dene. Yeni rengi anında görürsün. Bir CSS kuralının yanındaki kutucuğu kapatarak o kuralı geçici olarak devre dışı bırakabilirsin.

Elements sekmesinde neler öğrenebilirsin?

• Hangi HTML öğesinin seçili olduğunu.
• Hangi CSS kuralının uygulandığını ve hangisinin başka bir kural tarafından geçersiz kılındığını.
• Öğenin margin, padding, width ve height gibi boyutlarını.
• Öğenin sayfadaki yerleşimini ve kutu modelini.
• Bir öğeye geçici olarak sınıf veya özellik eklemenin etkisini.

Unutma: Burada yaptığın düzenleme kaynak dosyanı otomatik olarak değiştirmez. Beğendiğin değişikliği projenin gerçek CSS dosyasına kendin aktarmalısın.

4. Console: JavaScript ve hata mesajları

Console, JavaScript mesajlarını gösterir ve uygun durumlarda komutları doğrudan çalıştırmana olanak tanır. Kodundaki hataların nedenini araştırırken en çok kullanacağın sekmelerden biridir.

Örneğin Console'a şu kodu yaz:

console.log("Merhaba F12!");

Enter'a bastığında konsolda mesajı görürsün.

Sayfadaki bir başlığı seçip metnini geçici olarak değiştirmek için şu örneği kullanabilirsin:

document.querySelector("h1").textContent = "Başlık değişti!";

Sayfada h1 yoksa querySelector sonucu null olabilir. Daha güvenli bir örnek:

const baslik = document.querySelector("h1");

if (baslik) {
  baslik.textContent = "Başlık değişti!";
} else {
  console.warn("Sayfada h1 başlığı bulunamadı.");
}

Sık görülen hata türleri

• ReferenceError: Olmayan veya erişilemeyen bir değişken ya da isim kullanılmış olabilir.
• TypeError: Bir değerin desteklemediği bir işlem yapılmış olabilir.
• SyntaxError: Kodda yazım veya sözdizimi hatası bulunabilir.
• 404 hatası: İstenen dosya veya adres bulunamamış olabilir; bu genellikle Console dışında Network sekmesinde de görülebilir.

Hata mesajına tıkladığında tarayıcı çoğu zaman ilgili dosyayı ve satırı açar. Önce mesajı dikkatlice oku, ardından dosya ve satır bilgisini kontrol et.

Güvenli kullanım notu: İnternetten kopyaladığın, ne yaptığını anlamadığın JavaScript kodlarını Console'a yapıştırma. Kötü niyetli kodlar hesabına veya verilerine erişmeye çalışabilir.

5. Sources: Kodda hata ayıklama

Sources sekmesi, tarayıcının yüklediği kaynak dosyaları incelemek ve JavaScript'i adım adım hata ayıklamak için kullanılır.

En temel araçlardan biri breakpoint yani durma noktasıdır:

1. Sources sekmesini aç.
2. Kendi projenin JavaScript dosyasını bul.
3. Kodun solundaki satır numarasına tıkla.
4. Sayfada ilgili işlemi tetikle.
5. Kod durduğunda değişkenleri incele ve adım adım ilerle.

Örnek:

function toplam(a, b) {
  const sonuc = a + b;
  return sonuc;
}

console.log(toplam(4, 7));

const sonuc = a + b; satırına breakpoint koyarsan fonksiyon çalışırken a, b ve sonuc değerlerini inceleyebilirsin.

Sources ayrıca yüklenen dosyaları görmene yardımcı olur. Ancak üretim ortamında dosyalar küçültülmüş veya birleştirilmiş olabilir; bu durumda okunabilir kaynak haritaları (source maps) varsa kodu anlamak kolaylaşır.

6. Network: Dosyalar neden yüklenmiyor?

Network sekmesi, sayfanın yüklenirken yaptığı ağ isteklerini gösterir. CSS, JavaScript, resimler, yazı tipleri ve API yanıtları burada listelenebilir.

Bir görsel görünmüyorsa şu adımları uygula:

1. Network sekmesini aç.
2. Sayfayı yenile.
3. Img filtresini seç veya dosya adını arat.
4. İlgili isteğin durum kodunu kontrol et.
5. Dosyanın adresini ve yanıtını incele.

Yaygın durum kodları:

Bunlar genel işaretlerdir; tek başına durum kodu her sorunun kesin nedenini açıklamaz.

CSS veya görsel yolu hatalı olabilir

Örneğin HTML dosyan index.html, görselin ise images/logo.png konumundaysa:

<img src="images/logo.png" alt="Site logosu">

src="logo.png" yazarsan tarayıcı yanlış konumda arama yapabilir. Dosya adının, klasörün ve büyük/küçük harflerin doğru olduğundan emin ol.

Network'te Disable cache seçeneği, DevTools açıkken önbelleği devre dışı bırakıp sayfayı test etmeye yardımcı olabilir. Bu seçenek her durumda kalıcı önbellek temizliği anlamına gelmez.

7. Diğer yararlı DevTools sekmeleri

Device Toolbar — mobil görünüm

Ctrl + Shift + M kısayolu birçok masaüstü tarayıcıda cihaz araç çubuğunu açar. Farklı ekran genişliklerini deneyerek menünün, kartların ve görsellerin küçük ekranlarda düzgün görünüp görünmediğini kontrol edebilirsin. Bu, gerçek bir telefonun tüm davranışlarını birebir taklit etmez; son testi gerçek cihazlarda da yapmak yararlıdır.

Performance — performans analizi

Performance paneli, kayıt sırasında sayfanın nasıl çalıştığına ilişkin zaman çizelgesi sunar. Uzun süren JavaScript işlemlerini ve takılmaların olası nedenlerini araştırmaya yardımcı olur. Sonuçları doğru yorumlamak için kaydı hangi işlem sırasında aldığını bilmelisin.

Application — depolama ve site verileri

Application panelinde çerezler, localStorage, sessionStorage, IndexedDB ve service worker gibi tarayıcı özelliklerini inceleyebilirsin. Buradaki verileri silmek oturumunu kapatabilir veya yerel olarak saklanan bilgileri kaybettirebilir; neyi sildiğine dikkat et.

Accessibility ve Computed Styles

Computed görünümü, bir öğeye en sonunda hangi CSS değerinin uygulandığını anlamana yardımcı olur. Erişilebilirlik araçları ise sayfanın klavye kullanımı, etiketleri ve yardımcı teknolojilerle ilişkili bazı özelliklerini kontrol etmene destek olur.

8. Uygulamalı mini çalışma: Bir başlığı değiştir

Bu alıştırma için kendi oluşturduğun basit bir HTML sayfasını kullan.

1. index.html dosyana şunu ekle:

<!doctype html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>F12 Deneyi</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 32px;
      background: #f8fafc;
    }

    h1 {
      color: #1d4ed8;
    }
  </style>
</head>
<body>
  <h1>İlk F12 deneyim</h1>
  <p>Bu sayfayı DevTools ile incele.</p>
  <button id="mesajBtn">Mesaj göster</button>

  <script>
    document.querySelector("#mesajBtn").addEventListener("click", () => {
      console.log("Butona tıklandı!");
    });
  </script>
</body>
</html>

2. Dosyayı tarayıcıda aç ve F12'ye bas.

3. Elements sekmesinde h1 öğesini seç. Styles bölümünden rengini değiştir.

4. Console sekmesine geç ve butona tıkla. Konsolda Butona tıklandı! mesajını görmelisin.

5. Network sekmesinde sayfayı yenile ve yüklenen kaynakları incele.

6. Sayfayı yenileyerek Elements bölümünde yaptığın geçici renk değişikliğinin kaybolduğunu doğrula. Kalıcı yapmak için index.html içindeki CSS'i düzenle.

Bu mini çalışma sana üç önemli beceri kazandırır: HTML öğesini bulmak, CSS davranışını test etmek ve JavaScript çıktısını takip etmek.

9. Sık sorulan sorular

F12'ye basınca neden hiçbir şey olmuyor?

Dizüstü bilgisayarında Fn + F12 gerekebilir. Tarayıcının menüsünden geliştirici araçlarını açmayı veya Ctrl + Shift + I kısayolunu dene. Kurum tarafından yönetilen cihazlarda bazı araçlar kısıtlanmış olabilir.

F12 ile bir sitenin kodlarını değiştirebilir miyim?

Kendi tarayıcında görüntülenen sayfanın DOM ve CSS görünümünü geçici olarak değiştirebilirsin. Bu değişiklikler sitenin sunucusundaki dosyaları değiştirmez ve diğer ziyaretçilere yansımaz.

F12 ile bir sitenin şifresini görebilir miyim?

F12, başka birinin şifresini ele geçirmek için bir araç değildir. Formlarda girilen hassas bilgileri aramak veya erişmeye çalışmak yerine, yalnızca izinli olduğun sistemlerde güvenli hata ayıklama yapmalısın.

F12 yalnızca yazılımcılar için mi?

Hayır. Web sayfasında neden bir görselin görünmediğini, bir bağlantının çalışmadığını veya sayfanın neden yavaşladığını anlamak isteyen meraklı kullanıcılar da DevTools'tan faydalanabilir.

F12 ile mobil uygulama test edilir mi?

Web sayfalarını farklı ekran boyutlarında test edebilirsin. Ancak bu, yerel Android veya iOS uygulamalarının tüm test ihtiyaçlarını karşılamaz.

10. Güvenlik ve gizlilik

DevTools güçlü bir inceleme aracıdır; bu nedenle sorumlu kullanmak önemlidir.

• Yalnızca inceleme ve test etme yetkin olan sitelerde işlem yap.
• Console'a bilmediğin kodları yapıştırma.
• Ekran görüntüsü paylaşırken token, e-posta, kişisel veri ve oturum bilgilerini gizle.
• Network kayıtları dışarı aktarılırken çerezler veya hassas başlıklar gibi veriler bulunabileceğini unutma.
• DevTools'ta bir güvenlik açığı fark edersen sistemi istismar etmek yerine sahibinin yetkili bildirim kanalını kullan.

11. Özet: F12'yi hangi durumda kullanmalısın?

Kendini dene

• F12 ile geliştirici araçlarını aç.
• Elements bölümünde bir başlığın rengini geçici olarak değiştir.
• Console'a console.log("Merhaba!"); yaz.
• Network'te sayfayı yenileyip yüklenen bir görseli bul.
• Kendi projenin CSS dosyasında yaptığın değişikliği kalıcı hale getir.

Son söz: F12'yi öğrenmek, web sayfalarını yalnızca görüntülemekten çıkarıp nasıl çalıştıklarını anlamaya başlamaktır. Küçük denemeler yap, hata mesajlarını oku ve değişikliklerini kendi proje dosyalarına aktar. Bir süre sonra DevTools günlük web geliştirme alışkanlığının doğal bir parçası hâline gelecek.

Bu yazı eğitim amaçlıdır. Tarayıcı menüleri ve kısayolları sürüme ve işletim sistemine göre farklılık gösterebilir.