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

Kayce Basques

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.

Ş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.

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. Ağ panelini açın. Analiz ve ölçümle ilgili temel bilgileri öğrenmek için Ağ Etkinliğini İnceleme ağ etkinliği.

   

   4. Şekil. Ağ paneli

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

   

   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.

   

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

4. Mesajlar sekmesini tıklayın.

   

   7. Şekil. Mesajlar sekmesi

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

   

   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 ikili mesajını panonuza ekleyin.

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.

   

   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.

   

   Ş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.

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

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.

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.

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 > 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.