Geliştirici Araçları'ndaki yenilikler (Chrome 152)

Yayınlanma tarihi: 25 Ağustos 2026

Chrome 152; istekleri yeniden gönderme ve ikili yük inceleme, özel öğe süslemeleri ve öğelerde geliştirilmiş CSS iç içe yerleştirme, Performans Canlı Metrikleri'nde yumuşak gezinmeler için Core Web Vitals, Konsol'da yapılandırılmış tablo dışa aktarma ve Geliştirici Araçları MCP sunucusunda iyileştirmeler gibi özelliklerle ağ hata ayıklamada önemli geliştirmeler sunuyor.

Temsilciler için Geliştirici Araçları

Chrome Geliştirici Araçları MCP sunucusunun en yeni v1.7.0 sürümü, Antigravity, Claude ve Codex gibi kodlama temsilcileri için daha önce kullanıma sunulan bellek hata ayıklama özelliklerini geliştirir:

  • Yığın anlık görüntüsü nesne ayrıntıları (get_heapsnapshot_object_details): Ayrıntılı JavaScript nesne özelliklerini, sınıf adlarını ve GC kökünü inceleyin yığın anlık görüntülerinden doğrudan yolları koruyun.
  • Yerel V8 bağlam filtreleme: Yığın anlık görüntüsü nesnelerini yerel yürütme bağlamına göre filtreleyin ve anlık görüntü özetlerindeki yerel bağlamları inceleyin.
  • Daemon kararlılığı ve yaşam döngüsü iyileştirmeleri: Gezinme başına sınırlı ağ isteği tutma, oturum kimliği doğrulama, CLI-to-daemon sürüm uyuşmazlığı uyarıları ve bağlam atma işleminde sorunsuz çalışan kapatma özellikleri eklendi.

Daha fazla bilgi edinmek ve kullanmaya başlamak için GitHub'daki DevTools for agents deposunu ziyaret edin.

Ağ: İstekleri düzenleme ve yeniden gönderme, önceden yükleme analizleri ve ikili yük kod çözme

Ağ panelinde, getirme isteğinde yeni Yeniden Gönder bağlam menüsü seçeneği, Copy as Preload element (Önceden yükleme öğesi olarak kopyala) seçeneği ve Yük sekmesindeki ikili kod çözme anahtarı gösteriliyor.

  • Getirme ve XHR isteklerini yeniden gönderme: Eski "XHR isteğini tekrar oynat" bağlam menüsü öğesi artık Yeniden gönder olarak adlandırılıyor. Artık tüm getirilebilir ağ isteklerini destekliyor. Standart istekleri fetch() çağrılarına dönüştürürken XHR ile birlikte tam oynatma doğruluğunu koruyor. İstekler, yürütme bağlamlarını ve konsolun kaynağını da izleyip gösterir.
  • Önceden yüklenen sütunu ve "Önceden yükleme öğesi olarak kopyala": Yeni bir özel Önceden yüklenen sütununda, spekülatif önceden yükleme kullanılarak bir ağ isteğinin başlatılıp başlatılmadığı gösterilir. Ayrıca, herhangi bir isteği sağ tıklayıp Önceden yükleme öğesi olarak kopyala'yı seçerek HTML'nize eklemeye hazır bir <link rel="preload"> etiketi oluşturabilirsiniz. Erken ipuçları artık Başlatan sütunu altında kategorize ediliyor.
  • İstek yükleri için ikili görüntüleyici: Yük sekmesinde artık ikili ve sıkıştırılmış istek yükleri için kod çözme yöntemi seçenekleri (Base64, Hex ve UTF-8) bulunuyor. Bu seçenekler, Yanıt sekmesindeki seçeneklerle aynıdır.
  • Sabitlenmiş İstek Numarası sütunu: İstek # sütunu, istek referansını kolaylaştırmak için artık Ağ verileri tablosunda ilk konuma sabitleniyor.
  • Aynı site ana makine filtreleme: Ağ filtresi çubuğunda alan adları, ana makine adları veya bağlantı noktaları (ör. localhost veya example.com) arandığında artık aynı site istekleri doğru şekilde filtreleniyor.
  • Varsayılan sorgu parametresi kod çözme: Yük sekmesindeki sorgu ve form parametrelerinin kodu artık tüm istekler için otomatik olarak çözülüyor.

Chromium sorunları: 40726969, 41299075, 40138847, 40222701, 525848667, 507077182, 498482622, 520437951, 40267477

Öğeler: Özel öğe süslemeleri, iç içe yerleştirilmiş CSS üst seçici etkileşimleri ve $0 sözde öğe seçimi

Öğeler paneli DOM ağacı, özel HTML etiketlerinin yanında custom-element süsleme rozetini gösteriyor ve iç içe yerleştirilmiş bir CSS kuralındaki üst seçicinin üzerine gelindiğinde sayfadaki eşleşen öğe vurgulanıyor.

Öğeler panelinde web bileşenlerini ve modern CSS'yi incelemek ve oluşturmak daha hızlı ve sezgiseldir:

  • Özel öğe süsleme rozeti: Özel HTML öğeleri (tireli etiketler veya özelleştirilmiş yerleşik öğeler için is="..." özellikleri ile tanımlanır) artık DOM ağacı ana hattında custom-element süsleme rozeti gösteriyor.
  • İç içe CSS üst seçici etkileşimleri ve özgüllük: İç içe CSS kurallarındaki ve devralınan iç içe kurallardaki üst seçicilerin üzerine gelindiğinde artık sayfadaki eşleşen öğeler vurgulanıyor ve Stiller sekmesindeki filtrelemeye yanıt veriliyor. @nested-declarations kuralları için özgüllük ipucu pop-over'ları eklendi.
  • $0 aracılığıyla sözde öğe seçimi: Öğeler DOM ağacında ::before veya ::after gibi sözde öğelerin seçilmesi, bu öğeleri anında JavaScript incelemesi için doğrudan $0 konsol değişkenine bağlar.
  • text-wrap ve <image> türleri için otomatik tamamlama: Stiller bölmesi artık text-wrap (wrap, nowrap, balance, pretty, stable) için tüm anahtar kelime değerlerini öneriyor ve <image> veri türlerini kabul eden CSS özelliklerini otomatik olarak tamamlıyor.
  • Kutu modeli kaydırma çubuğu farkındalığı: Kutu modeli metrikleri şeması artık öğelerde görünür kaydırma çubukları olduğunda içerik kutusu boyutlarını doğru şekilde hesaplayıp oluşturuyor.

Chromium sorunları: 367440148, 535517817, 535522242, 535523039, 537724428, 399305533, 334984154, 383355294, 326260752, 389342065

Performans: Canlı metriklerdeki yumuşak gezinme metrikleri ve özel ekran görüntüsü hazır ayarları

Performans panelinin, yumuşak gezinmeler için Core Web Vitals'ı gösteren Canlı Metrikler bölümü.

  • Yumuşak gezinmeler için canlı metrik desteği: Canlı metrikler görünümü artık web-vitals v6.0.0'a yükseltme sayesinde tek sayfalık uygulamalarda istemci tarafındaki yumuşak gezinmeler için Core Web Vitals'ı (ör. LCP ve INP) varsayılan olarak yakalayıp raporluyor.
  • Özel ekran görüntüsü yakalama hazır ayarları: Bellek bütçeleri dahilinde görsel kayıt doğruluğunu özelleştirmek için Performans panelinde CDP izlemeye yönelik yapılandırılabilir ekran görüntüsü çerçeve boyutu ve sayısı sınırı hazır ayarları kullanıma sunuldu.
  • console.profileEnd() iz gösterici: Kodunuzda veya konsolunuzda console.profileEnd() çağrıldığında, kaydedilen iz artık otomatik olarak açılıyor ve Performans panelinde gösteriliyor.
  • Extensibility API özel iz özetleri: Performans izi özetleri artık Extensibility API kullanılarak kaydedilen özel iz gruplarını işleyip sunuyor.

Chromium sorunları: 514721939, 490140054, 536954453, 535506117

Konsol: Tabloları Markdown veya CSV olarak dışa aktarma ve yan etki koruması

  • Konsol tablolarını Markdown veya CSV olarak kopyalama: console.table() kullanılarak kaydedilen tablolar artık içerik menüsünden doğrudan biçimlendirilmiş Markdown tabloları veya CSV verileri olarak panonuza kopyalanabilir.
  • Yan etki değerlendirme koruması: Hata ayıklayıcının fareyle üzerine gelerek değerlendirme özelliği artık new, etiketli şablon değişmezleri, dinamik import() ve delete operatörlerini içeren ifadeleri koruyarak duraklatılmış durumdayken yanlışlıkla durum mutasyonlarının oluşmasını engelliyor.

Chromium sorunları: 40924951, 40133606

Öne çıkan seçenekler

Diğer Geliştirici Araçları alt sistemlerinde yapılan önemli iyileştirmeler:

  • Kaynaklar: Hızlı Açma özelliği artık yerel çalışma alanı dosyalarına büyük bir puan artışı vererek öncelik tanıyor. Bu sayede, çalışma alanı dosyaları ağ kaynaklarının üzerinde en üstte yer alıyor. (Chromium sorunu: 40260136)
  • Bellek: Heap Snapshot Summary görünümünde artık seçilen türler için toplam nesne sayısı ve toplu sığ boyutlar gösteriliyor. Ayrıca, yerel yürütme bağlamı filtreleri de eklendi. (Chromium sorunu: 497855658)
  • Uygulama: Reklamlar panelinde Reklamları vurgula açma/kapatma düğmesi doğrudan panele taşındı, hiyerarşideki çerçeveleri göstermek için tıklanabilir reklam iFrame öğe kimlikleri eklendi ve çerçeve başına metrik dökümü tablosu kullanıma sunuldu. (Chromium sorunu: 514957134)
  • Uygulama: Depolama bölmesindeki Site verilerini temizle bölümü, birleştirilmiş ve tek bir grup olarak yeniden tasarlandı (Chromium sorunu: 375867286). Ayrıca, geri/ileri önbellek geri yüklemelerinden sonra yinelenen önbellek depolama girişleri çözüldü (Chromium sorunu: 484693244).
  • Uzantılar: chrome.devtools.panels genelindeki eşzamansız yöntemler artık geri çağırma olmadan çağrıldığında JavaScript sözleri döndürüyor. (Chromium sorunu: 496604551)
  • Ayarlar: Varsayılan ağ sınırlama hazır ayarlarını ve özel sınırlama yapılandırmalarını ayrı bölümlere ayırın. (Chromium sorunu: 342409451)
  • Lighthouse: Paketlenmiş Lighthouse modülü 13.4.1 sürümüne güncellendi. (Chromium sorunu: 40543651)
  • Sorunlar: DevTools, loading="lazy" kullanan bir resimde açıkça belirtilmiş width veya height boyutları olmadığında uyarı verir.
  • Cihaz modu: Yakınlaştırma seviyesi menüsü, birleştirilmiş bir Pencereye sığdır seçeneğiyle basitleştirildi ve çerçeve grafikleri kullanılamadığında Cihaz çerçevesini göster açma/kapatma düğmesi devre dışı bırakıldı.

Erişilebilirlikle ilgili iyileştirmeler

Chrome 152'de aşağıdaki erişilebilirlik geliştirmeleri yer alır:

  • Öğeler ve Erişilebilirlik: Öğeler DOM ağacı ile erişilebilirlik ağacı görünümü arasında sorunsuz geçiş yapabilmek için bağlam menüsü seçenekleri ve erişilebilirlik düğümleri için "Görünüme kaydır" seçeneği eklendi. (Chromium sorunları: 417929842)
  • Erişilebilirlik: Bağlam menüsü kullanılarak erişilebilirlik ağacı düğümlerini ve alt ağaçlarını düz metin olarak kopyalama desteği eklendi. (Chromium sorunu: 417929842)
  • Öğeler: Koyu modda çalışırken Öğeler panelindeki düşük kontrastlı arama vurgu renkleri düzeltildi. (Chromium sorunu: 491718898)
  • Gezinme: Geliştirici Araçları'nı ayrı bir pencereye ayırma veya sekmeye geri yerleştirme işlemi artık odağı ana menü düğmesine zorlamıyor.
  • Ayarlar: Yapay zeka ayarlarındaki "Daha Fazla Göster" ve "Daha Az Göster" düğmelerine açıklayıcı erişilebilir bağlam eklendi.