Geliştirici Araçları'ndaki Yenilikler (Chrome 74)

Kayce Basques

Tekrar hoş geldiniz! Yenilikleri aşağıda bulabilirsiniz.

Bu sayfanın video sürümü

CSS özelliğinden etkilenen tüm düğümleri vurgulama

Bir düğümün kutu modelini etkileyen bir CSS özelliğinin (ör. padding veya margin) üzerine gelerek bu bildirimden etkilenen tüm düğümleri vurgulayın.

Şekil 1. margin özelliği üzerinde fareyle duraklatıldığında, bu bildirimden etkilenen tüm düğümlerin kenar boşlukları vurgulanır.

Denetimler panelinde Lighthouse v4

Yeni Dokunma hedefleri uygun boyutta değil denetimi, düğmeler ve bağlantılar gibi etkileşimli öğelerin mobil cihazlarda uygun büyüklükte ve aralıklı olmasını sağlar.

Bir raporun PWA kategorisinde artık rozet puanlama sistemi kullanılmaktadır.

Şekil 3. PWA kategorisi için yeni rozet puanlama sistemi

WebSocket ikili mesaj görüntüleyicisi

İkili WebSocket mesajının içeriğini görüntülemek için:

1. Ağ panelini açın. Ağ etkinliğini analiz etmenin temellerini öğrenmek için Ağ Etkinliğini İnceleme başlıklı makaleyi inceleyin.

   

   Şekil 4. Ağ paneli

2. WebSocket bağlantısı olmayan tüm kaynakları filtrelemek için WS'yi tıklayın.

   

   Şekil 5. Yalnızca WS'yi tıkladıktan sonra WebSockety bağlantıları gösterilir.

3. İncelemek için bir WebSocket bağlantısının Adı'nı tıklayın.

   

   Şekil 6. WebSocket bağlantısını inceleme

4. Mesajlar sekmesini tıklayın.

   

   Şekil 7 Mesajlar sekmesi

5. İncelemek için İkili Mesaj girişlerinden birini tıklayın.

   

   Şekil 8 İkili bir iletiyi inceleme

İletiyi Base64 veya UTF-8'e dönüştürmek için görüntüleyicinin alt kısmındaki açılır menüyü kullanın. İkili mesajı panonuza kopyalamak için Panoya kopyala'yı tıklayın.

Şekil 9. İkili mesajı Base64 olarak görüntüleme

Komut menüsünde alan ekran görüntüsü alma

Alan ekran görüntüleri, görüntü alanının bir kısmının ekran görüntüsünü almanızı sağlar. Bu özellik bir süredir kullanılabiliyor ancak erişim iş akışı oldukça gizliydi. Alan ekran görüntüleri artık Komut Menüsü'nden kullanılabilir.

1. Geliştirici Araçları'na odaklanın ve ardından Komut Menüsü'nü açmak için Control+Shift+P veya Command+Shift+P (Mac) tuşlarına basın.

   

   Şekil 10. Komut menüsü

2. area yazmaya başlayın, Alan ekran görüntülerini yakala'yı seçin ve Enter tuşuna basın.

3. Farenizi, ekran görüntüsünü almak istediğiniz görüntü alanı bölümünün üzerine sürükleyin.

   

   Şekil 11. Ekran görüntüsü alınacak görüntü alanı bölümünü seçme

Ağ panelindeki hizmet çalışanı filtreleri

Bir hizmet çalışanı tarafından oluşturulan (initiated) veya değiştirilen (intercepted) istekleri görüntülemek için Ağ paneli filtresi metin kutusuna is:service-worker-initiated veya is:service-worker-intercepted yazın.

Şekil 12. is:service-worker-initiated ölçütüne göre filtreleme

Şekil 13. is:service-worker-intercepted ölçütüne göre filtreleme

Ağ günlüklerini filtreleme hakkında daha fazla bilgi için Kaynakları filtreleme başlıklı makaleyi inceleyin.

Performans paneli güncellemeleri

Performans kayıtları artık uzun görevleri ve İlk Boyama'yı işaretliyor.

Sayfa yükleme performansını analiz etmek için Performans panelini kullanma örneği için Ana iş parçacığında daha az iş yapın başlıklı makaleyi inceleyin.

Performans kayıtlarındaki uzun görevler

Performans kayıtlarında artık uzun görevler gösteriliyor.

Şekil 14. Performans kaydında uzun bir görevin üzerine gelme

Zamanlamalar bölümündeki İlk Boyama

Performans kaydının Zamanlamalar bölümü artık ilk boyamayı işaretliyor.

Şekil 15. Zamanlamalar bölümündeki İlk Boyama

Yeni DOM eğitimi

DOM ile ilgili özelliklerin uygulamalı olarak tanıtıldığı DOM'u Görüntüleme ve Değiştirme İşlemlerine Başlama başlıklı makaleyi inceleyin.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanıza yardımcı olur.

Chrome Geliştirici Araçları Ekibi ile iletişime geçme

Yeni özellikler, güncellemeler veya Geliştirici Araçları ile ilgili diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

• crbug.com adresinden bize geri bildirim ve özellik istekleri gönderebilirsiniz.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunu bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları İpuçları YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.