Geliştirici Araçları: DevTools'u Açma ve Kullanma
Chrome DevTools'u açın, öğeleri inceleyin, konsolu okuyun, ağ isteklerini izleyin ve CSS'yi tarayıcıda canlı olarak düzenleyin.
Geliştirici Araçları: DevTools'u Açma ve Kullanma, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. 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.
Tarayıcı DevTools'ları Nedir?
Her modern tarayıcı, yerleşik bir geliştirici araçları kümesiyle birlikte gelir. DevTools ile HTML ve CSS'yi inceleyebilir, JavaScript'te hata ayıklayabilir, performansı ölçebilir, ağ isteklerini izleyebilir ve çok daha fazlasını yapabilirsiniz — üstelik tarayıcıdan ayrılmadan.
DevTools'u Açma
DevTools'u Windows/Linux'ta F12, Mac'te Cmd+Option+I ile açın. Ayrıca herhangi bir öğeye sağ tıklayıp İncele'yi seçebilirsiniz. Ctrl+Shift+J / Cmd+Option+J kısayolu doğrudan Konsol'u açar.
Öğeler Paneli
Öğeler paneli canlı DOM ağacını gösterir. Seçmek ve hesaplanmış stillerini Stiller bölmesinde görmek için herhangi bir öğeye tıklayın. HTML'yi veya CSS değerlerini gerçek zamanlı düzenlemek için çift tıklayabilirsiniz — değişiklikler anında uygulanır, ancak dosyanıza kaydedilmez.
CSS'i Canlı Olarak Düzenleme
Stiller bölmesinde değiştirmek istediğiniz herhangi bir özellik değerine tıklayın. + düğmesiyle yeni kurallar ekleyin. Kuralları devre dışı bırakmak için açma/kapatma onay kutularını kullanın. Bu, düzenleyicinize geçmeden CSS taslağı oluşturmanın en hızlı yoludur.
Konsol Paneli
Konsol, kaydedilmiş iletileri, uyarıları ve hataları gösterir. Ayrıca doğrudan JavaScript yazıp çalıştırabilirsiniz. Hata ayıklama sırasında veri çıktısı almak için console.log(), console.warn(), console.error() ve console.table() kullanın.
// Log different types
console.log('value:', myVar);
console.table([{name:'Alice'}, {name:'Bob'}]);
console.error('Something went wrong');Ağ Paneli
Ağ paneli, sayfanın yaptığı her HTTP isteğini gösterir. Üstbilgilerini görmek, yanıt gövdesini önizlemek ve zamanlama akışını incelemek için bir istek seçin. Türe göre filtreleyin: XHR/Getirme, JS, CSS, Resimler, Yazı Tipleri.
İstek Zamanlamasını Okuma
Her istek şunları gösterir: Kuyruğa Alındı, DNS Araması, İlk Bağlantı, SSL, İstek Gönderildi, Bekleniyor (TTFB) ve İçerik İndiriliyor. TTFB (İlk Bayta Kadar Geçen Süre), sunucunun yanıt süresini gösterir.
Ağ Hızını Sınırlama
Yavaş 3G veya çevrimdışı koşulları benzetmek için Ağ panelinin hız sınırlama açılır menüsünü kullanın. Bu, hızlı geniş bantta görünmeyen performans sorunlarını ortaya çıkarır ve bağlantısı zayıf kullanıcılar için çalışan deneyimler oluşturmanıza yardımcı olur.
Cihaz Modu
Cihaz Modu'na girmek için cihaz simgesine (Ctrl+Shift+M / Cmd+Shift+M) tıklayın. Mobil görünüm alanlarını, DPR'yi, dokunma olaylarını ve ağ koşullarını benzetin. iPhone 14 gibi hazır seçeneklerden birini seçin veya özel bir genişlik belirleyin.
Kaynaklar Paneli
Kaynaklar paneli, JavaScript dosyalarınızı okumanıza ve bu dosyalarda kesme noktaları belirlemenize olanak tanır. Bir kesme noktası, değişken değerlerini ve çağrı yığınını inceleyebilmeniz için çalışmayı duraklatır; F10 (adım üzerinden ilerleme) ve F11 (adım içine girme) ile kodda satır satır ilerleyebilirsiniz.
Kesme Noktaları ve Hata Ayıklayıcı
Kaynaklar'da bir satır numarasına tıklayarak kesme noktası ekleyin. Yürütme durakladığında, değerlerini görmek için değişkenlerin üzerine gelin veya bunları Konsol'a yazın. Bu noktaya hangi işlevlerin ulaşılmasını sağladığını görmek için Çağrı Yığını bölmesini kullanın.
// You can also trigger a breakpoint in code:
debugger; // execution pauses here when DevTools is openHızlı Kontrol
Sayfanın yaptığı tüm HTTP isteklerini, durum kodları ve yanıt süreleriyle birlikte hangi DevTools paneli gösterir?
Özet: DevTools Araç Setiniz
Öğeler: canlı DOM'u inceleyin ve düzenleyin. Konsol: JavaScript ile log tutun ve kod çalıştırın. Ağ: HTTP trafiğini izleyin. Kaynaklar: kesme noktaları belirleyin ve hata ayıklayın. Cihaz Modu: duyarlı yerleşimleri sınayın. Bu dört panelde ustalaşmanız hata ayıklama iş akışınızı dönüştürecektir.
Sıkça Sorulan Sorular
“Geliştirici Araçları: DevTools'u Açma ve Kullanma” dersi ücretsiz mi?
Evet — “Geliştirici Araçları: DevTools'u Açma ve Kullanma” 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.
“Geliştirici Araçları: DevTools'u Açma ve Kullanma” dersinde ne öğreneceğim?
Chrome DevTools'u açın, öğeleri inceleyin, konsolu okuyun, ağ isteklerini izleyin ve CSS'yi tarayıcıda canlı olarak düzenleyin. 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 4. dersidir.
“Geliştirici Araçları: DevTools'u Açma ve Kullanma” 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
- Tarayıcılar, DNS ve HTTP: İstek Yaşam Döngüsü
- HTML, CSS ve JavaScript: Her Katmanın Görevi
- Bir Sayfa Nasıl Görüntülenir: DOM, CSSOM, Yerleşim, Boyama
- Geliştirici Araçları: DevTools'u Açma ve Kullanma