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 bu bildirimden etkilenen tüm düğümleri vurgulayın.

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

Şekil 1. Fareyle bir margin özelliğinin üzerine geldiğinizde, bu bildirimden etkilenen tüm düğümlerin kenar boşlukları vurgulanır

Denetimler panelinde Lighthouse 4 sürümü

Yeni Dokunma hedefleri uygun şekilde boyutlandırılmamış denetimi, düğme ve bağlantı gibi etkileşimli öğelerin mobil cihazlarda uygun büyüklükte ve birbirlerinden ayrı konumlarda olup olmadığını kontrol eder.

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. Ağ etkinliğini analiz etmeyle ilgili temel bilgileri öğrenmek için Ağ Etkinliğini İnceleme bölümüne bakın.

    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. İkili mesajı panonuza kopyalamak için Copy to clipboard (Panoya kopyala) Panoya kopyala simgesini tıklayın.

İ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üredir kullanılıyordu ancak ona erişim için iş akışı oldukça gizliydi. Alan ekran görüntülerine artık Komut menüsünden erişilebilir.

  1. Geliştirici Araçları'na odaklanın ve Control+Üst Karakter+P veya Command+Üst Karakter+P (Mac) tuşlarına basarak Komut Menüsü'nü açı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ı bölümünü seçme

Ağ panelindeki hizmet çalışanı filtreleri

Bir hizmet çalışanı tarafından neden olduğu (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.

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.

Sayfa yükleme performansını analiz etmek üzere Performans panelini kullanma örneği için Daha az ana iş parçacığı işi yapma bölümüne göz atın.

Performans kayıtlarında uzun görevler

Performans kayıtları artık uzun görevleri 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 özelliklere ilişkin uygulamalı bir tur için DOM'yi Görüntülemeye ve Değiştirmeye Başlama sayfasına göz atın.

Ö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ı'ndaki Diğer seçenekler   Diğer > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını 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.

Chrome 127 sürümü

Chrome 126

Chrome 125 sürümü

Chrome 124 sürümü

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119 sürümü

Chrome 118 sürümü

Chrome 117 sürümü

Chrome 116

Chrome 115 sürümü

Chrome 114 sürümü

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109 sürümü

Chrome 108 sürümü

Chrome 107 sürümü

Chrome 106

Chrome 105 sürümü

Chrome 104 sürümü

Chrome 103 sürümü

Chrome 102 sürümü

Chrome 101

Chrome 100 sürümü

Chrome 99 sürümü

Chrome 98 sürümü

Chrome 97 sürümü

Chrome 96 sürümü

Chrome 95 sürümü

Chrome 94 sürümü

Chrome 93 sürümü

Chrome 92 sürümü

Chrome 91 sürümü

Chrome 90 sürümü

Chrome 89 sürümü

Chrome 88 sürümü

Chrome 87 sürümü

Chrome 86

Chrome 85 sürümü

Chrome 84

Chrome 83 sürümü

Chrome 82

Chrome 82 iptal edildi.

Chrome 81

Chrome 80 sürümü

Chrome 79 sürümü

Chrome 78 sürümü

Chrome 77

Chrome 76

Chrome 75 sürümü

Chrome 74 sürümü

Chrome 73

Chrome 72 sürümü

Chrome 71

Chrome 70

Chrome 68 sürümü

Chrome 67 sürümü

Chrome 66

Chrome 65 sürümü

Chrome 64 sürümü

Chrome 63 sürümü

Chrome 62 sürümü

Chrome 61 sürümü

Chrome 60 sürümü

Chrome 59 sürümü