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

Tekrar hoş geldiniz! Sunulan yenilikler

Bu sayfanın video sürümü

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

Bir düğümün kutu modelini (ör. padding veya margin) etkileyen bir CSS mülkünün üzerine gelerek aşağıdakileri yapabilirsiniz: bu bildirimden etkilenen tüm düğümleri vurgulayın.

Fareyle bir kenar boşluğu özelliğinin üzerine geldiğinizde bu bildirimden etkilenen tüm düğümler vurgulanır

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

Denetimler panelinde Lighthouse 4 sürümü

Yeni Dokunma hedefleri uygun şekilde boyutlandırılmadı denetimi, aşağıdaki gibi etkileşimli öğelerin düğme ve bağlantılar mobil cihazlarda uygun büyüklükte olmalı ve aralarında boşluk kalmalıdır.

Raporların PWA kategorisinde artık rozet puanlama sistemi kullanılmaktadır.

PWA kategorisi için yeni rozet puanlama sistemi

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

WebSocket ikili mesaj görüntüleyici

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

  1. panelini açın. Analiz ve ölçümle ilgili temel bilgileri öğrenmek için Ağ Etkinliğini İnceleme ağ etkinliği.

    Ağ paneli

    4. Şekil. Ağ paneli

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

    Yalnızca WS WebSockety bağlantıları tıklandığında gösterilir

    5. Şekil. Yalnızca WS WebSockety bağlantıları tıklandığında gösterilir

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

    WebSocket bağlantısını inceleme

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

  4. Mesajlar sekmesini tıklayın.

    Mesajlar sekmesi

    7. Şekil. Mesajlar sekmesi

  5. İkili İleti girişlerinden birini tıklayarak inceleyin.

    İkili program mesajını inceleme

    8. Şekil. İkili program mesajını 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. Sonraki slayta geçin Panoya kopyala Kopyalamak için Panoya kopyala ikili mesajını panonuza ekleyin.

İkili iletiyi Base64 olarak görüntüleme

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

Komut menüsünde alanın ekran görüntüsünü alın

Alan ekran görüntüleri, görüntü alanının bir bölümünün ekran görüntüsünü almanızı sağlar. Bu özellik, bir süre kullandık, ancak buna erişim için iş akışı oldukça gizliydi. Alan ekran görüntüleri komut menüsünden erişilebilir.

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

    Komut Menüsü

    10. Şekil. Komut Menüsü

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

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

    Ekran görüntüsü alınacak görüntü alanı 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

Ağ paneli filtresine is:service-worker-initiated veya is:service-worker-intercepted yazın tarafından yapılan (initiated) veya potansiyel olarak değiştirilmiş (intercepted) istekleri görüntülemek için metin kutusu hizmet çalışanıdır.

Filtreleme ölçütü is:service-worker-initiated

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

Filtreleme ölçütü: is:service-worker-intercepted

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

Ağ günlüklerini filtreleme hakkında daha fazla bilgi için Kaynakları filtreleme bölümüne bakın.

Performans paneli güncellemeleri

Performans kayıtları artık uzun görevleri ve First Paint'i işaretliyor.

Analiz etmek amacıyla Performans panelini kullanma örneği için Ana iş parçacığı için daha az iş yapma bölümüne göz atın performansı gösterir.

Performans kayıtlarında uzun görevler

Performans kayıtları artık uzun tasks gösteriyor.

Performans kaydında uzun bir görevin üzerine gelin

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

Zamanlamalar bölümündeki İlk Boyama

Performans kaydının Zamanlamalar bölümü artık İlk Boyama olarak işaretleniyor.

Zamanlamalar bölümündeki İlk Boyama

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

Yeni DOM eğiticisi

DOM ile ilgili uygulamalı bir tur için DOM'yi Görüntüleme ve Değiştirmeye Başlama sayfasına göz atın özellikleri.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji ürünü web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

  • Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
  • Geliştirici Araçları sorunlarını bildirmek için Diğer seçenekler'i Daha fazla > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
  • @ChromeDevTools adresinden tweet atabilirsiniz.
  • Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

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