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

Kayce Basques

Tekrar hoş geldiniz! Aşağıda yenilikleri bulabilirsiniz.

Bu sayfanın video sürümü

CSS mülkünden etkilenen tüm düğümleri vurgulama

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

Fareyle bir kenar boşluğu mülkünün üzerine geldiğinizde bu beyandan etkilenen tüm düğümler vurgulanır

Şekil 1. Fareyle bir margin mülkünün üzerine geldiğinizde, bu beyandan etkilenen tüm düğümlerin kenar boşlukları vurgulanır

Denetim 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 aralarında yeterince boşluk olacak şekilde yerleştirilip yerleştirilmediğini kontrol eder.

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

PWA kategorisi için yeni rozet puanlama sistemi

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

WebSocket ikili mesaj görüntüleyici

İkili bir 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.

    Ağ paneli

    Şekil 4. Ağ paneli

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

    WS'yi tıkladıktan sonra yalnızca WebSocket bağlantıları gösterilir

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

  3. Bir WebSocket bağlantısını incelemek için Adı'nı tıklayın.

    WebSocket bağlantısını inceleme

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

  4. Mesajlar sekmesini tıklayın.

    Mesajlar sekmesi

    Şekil 7. Mesajlar sekmesi

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

    İkili bir mesajı inceleme

    Şekil 8. İkili bir mesajı 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ı Panoya kopyala tıklayın.

İkili bir mesajı Base64 olarak görüntüleme

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

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

Alan ekran görüntüleri, ekran görüntüsünü görüntü alanının bir kısmından almanızı sağlar. Bu özellik bir süredir mevcut olsa da ona erişmek için kullanılan 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 Kontrol+Üst Karakter+P veya Komut+Üst Karakter+P (Mac) tuşlarına basın.

    Komut menüsü

    Ş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ü almak istediğiniz görüntü alanının üzerine sürükleyin.

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

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

Ağ panelindeki hizmet çalışanı filtreleri

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

is:service-worker-initiated ölçütüne göre filtreleme

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

is:service-worker-intercepted ö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 ilk boyamayı 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 çalışma 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.

Fareyle performans kaydındaki uzun bir görevin üzerine gelme

Şekil 14. Fareyle performans kaydındaki 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şaret ediyor.

Zamanlamalar bölümündeki İlk Boyama

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

Yeni DOM eğitimi

DOM ile ilgili özelliklerin uygulamalı bir turu için DOM'u Görüntüleme ve Değiştirme Başlangıç Kılavuzu başlıklı makaleyi inceleyin.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize ve sitenizdeki sorunları kullanıcılarınızdan önce 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 başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.