Tarayıcı geliştirici araçları
Firefox geliştirici araçlarıyla bir sayfanın HTML’ini, stillerini, ağ trafiğini ve depolamasını inceleyip hataların yerini bulmayı öğrenirsin.
Seviye 101 · 15 ders · 12 pratik lab
Dersler
Sayfayı incelemek
- Geliştirici araçlarını açmak ve paneller arasında gezinmek
- Denetçi: canlı DOM ağacı
- HTML’i yerinde düzenlemek
- Kurallar ve hesaplanan stiller
- Kutu modeli ve düzen görünümü
- Kısa görev: bir sayfanın başlığını ve rengini değiştir
Konsol ve ağ
- Konsol: iletiler, hatalar ve komutlar
- Ağ paneli: istekler, süreler, boyutlar
- Bir isteğin başlıkları, yanıtı ve zamanlaması
- Yavaş ağ benzetimi ve önbelleği kapatmak
- Kısa görev: sayfada eksik dosyayı bul
Depolama ve hata ayıklama
- Depolama paneli: çerezler ve localStorage
- Hata ayıklayıcı: kesme noktaları ve adım adım çalıştırma
- Duyarlı tasarım kipi ve cihaz boyutları
- Bitirme görevi: bozuk bir sayfanın üç hatasını bul
Pratik lablar
- Başlığı ve rengi yerinde değiştir: İnceleyici ile Bulut Pastanesi'nin başlığını ve düğme rengini değiştir, kalıcı olmadığını yenileyerek gör.
- Hangi kuralın kazandığını bul: Bir düğme beklenmedik renkte; hesaplanan stiller ve üstü çizili kurallardan sorumlu seçiciyi bul.
- Taşan kutunun kutu modelini çöz: Kenar boşluğu, dolgu ve kenarlık yüzünden taşan kartı düzen görünümünde ölçüp hangi değerin taşırdığını kanıtla.
- Konsoldaki hatayı oku: Sayfadaki düğme çalışmıyor; konsoldaki kırmızı hatanın dosyasını ve satırını bul.
- Konsoldan sayfayı sorgula: Konsolda komut yazarak sayfadaki tüm bağlantıları say ve hedefi dış alana gidenleri listele.
- Kesme noktasıyla yanlış hesabı yakala: Sepet toplamı yanlış çıkıyor; hata ayıklayıcıda kesme noktası koyup değişkenleri adım adım izleyerek hatalı satırı bul.
- En büyük dosyayı bul: Ağ panelinde Zeytin Restoran sayfasını yükle ve boyutu en büyük üç isteği listele.
- Eksik dosyanın yolunu düzelt: Sayfada bir görsel ve stil dosyası 404 dönüyor; ağ panelinden hatalı yolları bulup HTML'de düzelt.
- Yavaş ağda sayfayı ölç: Önbelleği kapatıp yavaş 3G benzetimiyle sayfayı yükle, ilk anlamlı içeriği geciktiren isteği bul.
- Çerezi ve localStorage değerini bul: Depolama panelinde tema tercihinin nerede tutulduğunu bul ve değiştirip sayfanın tepkisini gör.
- Telefonda bozulan menüyü yakala: Duyarlı tasarım kipinde 390 piksel genişlikte taşan menü öğesini bul ve hangi kuralın sebep olduğunu belirle.
- Bozuk sayfadaki üç arızayı bul: Kırmızı Balon Oyuncak'ın sayfasında biri stil, biri ağ, biri betik kaynaklı üç hatayı geliştirici araçlarıyla tespit et.
Kurs hakkında
Firefox geliştirici araçlarıyla bir sayfanın HTML’ini, stillerini, ağ trafiğini ve depolamasını inceleyip hataların yerini bulmayı öğrenirsin.
Ne öğreneceksin
- Sayfayı incelemek
- Konsol ve ağ
- Depolama ve hata ayıklama
Ön koşullar
Ön bilgi gerekmez; kurs sıfırdan başlar.
Lab ortamı
Dersler, tarayıcında açılan sana özel bir Kali Linux masaüstünde geçer; araçlar pencereli arayüzleriyle hazırdır. Kurulum gerekmez, bilgisayar ekranı önerilir.
Sık sorulan sorular
- Bu kurs benim düzeyime uygun mu?
- Kurs başlangıç düzeyindedir; her terim ilk geçtiği yerde açıklanır.
- Kurulum gerekir mi?
- Hayır. Her ders tarayıcında açılan sana özel bir lab ortamında geçer.
- Dersler nasıl işleniyor?
- Her ders 8 ile 10 adımdan ve bir kısa sınavdan oluşur. İlk adımlarda yazman gereken komut gösterilir, sonraki adımlarda yardım azalır; iki denemede takılırsan çözüm açılır.
- Ücretsiz deneyebilir miyim?
- Evet. Her kursun ilk üç dersi ücretsizdir.