Yararlı Chrome DevTools İpuçları ve Püf Noktaları

Giriş: Chrome DevTools Nedir?

Chrome DevTools, web geliştiricilerinin sitelerini test etmek, hata ayıklamak ve optimize etmek için kullandığı güçlü bir araç setidir. Tarayıcı içinde erişilebilen bu araçlar, HTML/CSS/JS manipülasyonundan performans analizine kadar birçok işlev sunar. İşte daha verimli çalışmanızı sağlayacak az bilinen ipuçları!

1. Klavye Kısayolları ile Hız Kazanın

• DevTools’u Açma: Ctrl + Shift + I (Windows/Linux) veya Cmd + Opt + I (Mac). Belirli bir öğeyi incelemek için Ctrl + Shift + C (Inspect Mode).
• Paneller Arası Geçiş: Ctrl + [ ve Ctrl + ] ile panelleri hızla değiştirin.
• Arama: Her panelde Ctrl + F ile öğe, stil veya komut arayın.

2. DOM ve Stil Manipülasyonu

• Canlı Düzenleme: Elements panelinde bir öğeye sağ tıklayıp “Edit as HTML” seçerek HTML’yi doğrudan değiştirin. CSS stillerini anında düzenlemek için Styles sekmesinde değerlere çift tıklayın.
• Değişiklikleri Kaydetme: Sources > Overrides ile yerel dosyalarınızı bağlayarak kalıcı değişiklikler yapın.
• Renk Seçici: CSS’deki renk kodunun yanındaki renk kutusuna tıklayarak contrast ratio (kontrast oranı) kontrolü yapın.

3. Ağ Performansını İzleme

• Yavaş Ağ Simülasyonu: Network panelinde Throttling seçeneği ile 3G veya özel bir profil seçin.
• API İsteklerini Tekrarlama: Bir isme sağ tıklayıp “Replay XHR” ile yeniden gönderin.
• cURL Komutu Oluşturma: İsteklere sağ tıklayıp “Copy > Copy as cURL” ile terminalde kullanın.

4. Cihaz Modu ve Responsive Tasarım

• Özel Ekran Boyutu: Device Toolbar’da (Ctrl + Shift + M) manuel boyut girerek özel çözünürlükler ekleyin.
• Sensor Simülasyonu: Sensors sekmesinden coğrafi konum veya cihaz orientasyonunu taklit edin.
• Touch Events: Mobil cihazlarda touchstart gibi olayları otomatik simüle edin.

5. Konsol Sihirbazlıkları

• Hızlı Değişken Erişimi: $0-4 ile son incelenen DOM öğelerine erişin. $_ ile son konsol çıktısını kullanın.
• Veri Formatlama: console.table(array) ile dizileri tablo olarak görüntüleyin.copy() fonksiyonu ile veriyi direkt panoya kopyalayın (ör: copy(document.title)).
• Hata Ayıklama: debugger; komutunu kodunuza ekleyerek otomatik kesme noktası oluşturun.

6. Kaynaklar Paneli ve Hata Ayıklama

• Workspaces: Sources > Filesystem ile yerel dosyaları bağlayın, değişiklikler otomatik kaydedilsin.
• Snippet’ler: Sources > Snippets altında küçük JS kod parçacıkları oluşturup çalıştırın.
• XHR/Fetch Breakpoints: Belirli bir URL’de istek yapıldığında durması için breakpoint ekleyin.

7. Performans Optimizasyonu

• Lighthouse Audit: Performans, erişilebilirlik ve SEO skorlarınızı ölçün.
• Performance Panel: Sayfa yükleme sürecini kaydedip CPU, FPS ve ağ kullanımını analiz edin.
• Bellek Sızıntılarını Bulma: Memory panelinde heap snapshot’lar karşılaştırarak sızıntıları tespit edin.

8. Az Bilinen Gelişmiş Özellikler

• Command Menu: Ctrl + Shift + P ile hızlıca renk teması değiştirin, ekran görüntüsü alın veya “slow 3G” modunu açın.
• CSS Coverage: Coverage sekmesinde kullanılmayan CSS/JS dosyalarını görün.
• Shadow DOM İnceleme: Ayarlardan “Show user agent shadow DOM” seçeneğini aktifleştirin.
• Değişiklikleri Takip Etme: Changes sekmesinde CSS/JS değişikliklerinizin geçmişini görün.

Değerlendirme

Chrome DevTools, web geliştirme sürecinizi %200 hızlandırabilecek gizli özelliklerle dolu. Bu ipuçlarını alışkanlık haline getirerek daha verimli çalışın ve projelerinizi bir sonraki seviyeye taşıyın. 🚀

Unutmayın: Her yeni özellik, deneyerek ve keşfederek öğrenilir. DevTools’u açın ve hemen bir şeyler kurcalamaya başlayın!