Chrome DevTools: Elements Console Network
Stilleri incelemek, JavaScript hatalarını ayıklamak ve HTTP isteklerini izlemek için Elements, Console ve Network panellerinde gezinin.
Chrome DevTools: Elements Console Network, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
DevTools'u Verimli Bir Şekilde Açma
DevTools'u, ilgili öğe seçili olarak açmak için herhangi bir öğeye sağ tıklayın ve Inspect'i seçin. F12 paneli açıp kapatır. Cmd+Shift+C (Mac) veya Ctrl+Shift+C (Windows), tam paneli açmadan doğrudan inceleme moduna geçer.
Elements Paneli — DOM Denetleyicisi
Elements paneli, ham HTML kaynağını değil, canlı ve ayrıştırılmış DOM ağacını gösterir. JavaScript değişikliklerini yansıtır. Sayfada vurgulamak için düğümlerin üzerine gelin. HTML'yi satır içinde düzenlemek için çift tıklayın.
Stiller ve Hesaplanan Değerler Bölmeleri
Bir öğe seçiliyken Styles bölmesi, uygulanan tüm CSS kurallarını özgüllüklerine göre sıralanmış biçimde gösterir. Üstü çizili kurallar geçersiz kılınmıştır. Computed bölmesi, her özelliğin nihai hesaplanmış değerlerini gösterir.
Öğe Durumlarını Zorlama
:hover, :focus, :active veya :visited gibi bir CSS durumunu zorlamak için Styles bölmesindeki :hov düğmesine tıklayın. İmleci kusursuz biçimde sabit tutmadan üzerine gelme stillerini inceleyin.
Kutu Modeli Görselleştiricisi
Computed bölmesi etkileşimli bir kutu modeli şeması gösterir: içerik, dolgu, kenarlık ve dış boşluk. Değerini görmek için her bölgenin üzerine gelin. Dış boşluk ve dolgu değerlerini canlı olarak düzenlemek için tıklayın.
Konsol Temelleri — Kayıt Tutma ve Kod Çalıştırma
Konsol; hataları, uyarıları ve günlük kayıtlarını gösterir. Herhangi bir JavaScript ifadesi yazıp Enter'a basarak ifadeyi canlı sayfaya göre değerlendirebilirsiniz. Kod parçacıklarını anında test etmek için Konsol'u etkileşimli bir REPL olarak kullanın.
// Examples to type in the Console:
document.title
document.querySelectorAll('a').length
['a','b','c'].map(x => x.toUpperCase())Konsol API Yöntemleri
console.log'un yanı sıra: console.warn() (sarı uyarı), console.error() (kırmızı hata), console.table() (dizi veya nesneyi tablo olarak görüntüler), gruplanmış çıktı için console.group() / console.groupEnd() ve süre ölçmek için console.time().
Ağ Paneline Genel Bakış
Her HTTP isteği (HTML, JS, CSS, görseller, XHR, Fetch) bir satır olarak görünür. Sütunlarda yöntem, durum, boyut ve zamanlama gösterilir. İsteğin ve yanıtın tüm ayrıntılarını görmek için bir satıra tıklayın.
Ağ İsteklerini Filtreleme
URL'ye göre arama yapmak veya türe göre filtrelemek için filtre çubuğunu kullanın: Tümü, XHR/Fetch, JS, CSS, Görsel, Medya, Yazı Tipi ve WS. XHR/Fetch filtresi, JavaScript'ten yapılan API çağrılarını hata ayıklarken en kullanışlı seçenektir.
İstek ve Yanıtları İnceleme
T şunu görmek için bir ağ isteği seçin: Headers (istek ve yanıt), Preview (biçimlendirilmiş JSON/HTML), Response (ham gövde) ve Timing (bağlantı aşamaları). Payload sekmesi, POST gövdesi parametrelerini gösterir.
Hız Sınırlama — Yavaş Ağları Simüle Etme
Slow 3G, Fast 3G veya Offline durumunu simüle etmek için hız sınırlama açılır menüsüne (varsayılan: No throttling) tıklayın. Önbelleği devre dışı bırak onay kutusu, test sırasında tarayıcının önbelleğe alınmış kaynakları kullanmasını engeller.
Hızlı Kontrol
Seçili bir öğeye uygulanan, geçersiz kılınanlar da dahil tüm CSS kurallarını Chrome DevTools'ta nerede görebilirsiniz?
Özet: Chrome DevTools Panelleri
Elements: canlı DOM ve CSS'yi inceleyin ve düzenleyin. Üzerine gelme stillerini incelemek için sözde durumları zorlayın. Konsol: günlük kaydı tutun, hata ayıklayın ve JS'yi canlı olarak çalıştırın. Network: tüm HTTP isteklerini izleyin, üst bilgileri ve yanıtları inceleyin, yavaş bağlantıları simüle etmek için hız sınırlaması uygulayın.
Sıkça Sorulan Sorular
“Chrome DevTools: Elements Console Network” dersi ücretsiz mi?
Evet — “Chrome DevTools: Elements Console Network” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Chrome DevTools: Elements Console Network” dersinde ne öğreneceğim?
Stilleri incelemek, JavaScript hatalarını ayıklamak ve HTTP isteklerini izlemek için Elements, Console ve Network panellerinde gezinin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Chrome DevTools: Elements Console Network” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Chrome DevTools: Elements Console Network
- VSCode: Eklentiler, Emmet Kısayolları
- Prettier ve ESLint Kurulumu
- Tarayıcı Uyumluluğu ve caniuse.com