Chrome 137'teki DevTools'daki yenilikler

Sofia Emelianova
Sofia Emelianova
GitHub

Google I/O 2025 sürümü

Chrome Geliştirici Araçları bu yılki Google I/O'da güçlü bir şekilde yer alacak. Canlı oturumların yanı sıra kayıtlı oturumlar da olacak.

Heyecan verici yeni özellikler hakkında bilgi edinmek için aşağıdakileri takip edin:

Ayrıca, Rachel Andrew'ın 20 Mayıs 2025, saat 16:30 (PT) tarihli Web'de yenilikler oturumunu kaçırmayın.

En son gelişmelere hızlıca göz atmak için en yeni videomuzu izleyin:

Gemini ile CSS değişikliklerini çalışma alanınızda değiştirip kaydedin

Artık birkaç tıklamayla Gemini'nin CSS'yi sizin için değiştirmesini ve düzeltmesini sağlayabilir ve bağlı bir çalışma alanı klasörü ile değişikliklerinizi bilgisayarınızdaki kaynak dosyalara kaydedebilirsiniz.

Otomatik çalışma alanları deneysel bir özelliktir. Mevcut kaynak klasörünüzü bağlayabilir veya demo deneyebilirsiniz.

Bağlı bir çalışma alanı klasörü ile Öğeler panelinde Yapay zekaya sor'u tıklayın, Gemini'den CSS'yi değiştirmesini isteyin, değişiklikleri canlı olarak test etmek için Devam'ı tıklayın, ardından Kayıtlı olmayan değişiklikler'i genişletin, Çalışma alanına uygula'yı tıklayın, farkı inceleyin ve Tümünü kaydet'i tıklayın.

Çalışma alanı klasörü bağlama ve değişiklikleri kaynak dosyalarınıza kaydetme

Artık DevTools'un JavaScript, HTML ve CSS değişikliklerini bilgisayarınızda depolanan kaynak dosyalara kaydetmesine izin vermek için bir çalışma alanı klasörünü otomatik olarak (veya manuel olarak) bağlayabilirsiniz.

JavaScript ile işleyiş şekline göz atın:

Chromium sorunu: 404170628.

Gemini'ye performans analizleri hakkında soru sorun

Artık bir düğmeyi tıklayarak Gemini ile sohbet başlatabilir ve aşağıdaki performans analizlerini inceleyip bunlarla ilgili işlem yapabilirsiniz:

  • Aşama bazında LCP
  • LCP istek keşfi
  • Oluşturma engelleme istekleri
  • Düzen kayması sorununun nedenleri
  • Doküman isteğiyle ilgili gecikme

Performans panelindeki bir analize "Yapay Zeka'ya Sor" düğmesi eklenmeden önceki ve sonraki durum.

Bu özellikle ilgili geri bildirimlerinizi crbug.com/371170842 adresinden gönderebilirsiniz.

Gemini ile performans bulgularına not ekleme

Artık Gemini'den performans izlemedeki etkinliklerle ilgili ek açıklamalar oluşturmasını isteyebilirsiniz.

Ana kanaldaki bir etkinliği çift tıklayın, ardından giriş alanının yanındaki Etiket oluştur'u tıklayın. Gemini, yığın izlemeye ve bağlama dayalı bir etiket önerebilir.

Gemini ile sohbetlerinize ekran görüntüsü ekleme

Yapay zeka yardımı panelinde artık sayfanın ekran görüntüsünü almak ve Gemini ile sohbetinize göndermek için Ekran görüntüsü al düğmesini tıklayabilirsiniz.

İstemlerinize ek görsel bağlam sağlamak için ekran görüntülerini kullanabilirsiniz. Örneğin, tüm görünür düğmelerin aynı aralığa sahip olup olmadığını kontrol etmek için ekran görüntülerini kullanabilirsiniz.

"Yapay zeka yardımı" paneline "Ekran görüntüsü al" düğmesi eklenmeden önceki ve sonraki durum.

Performans panelinde yeni analizler

Bu sürüm, Performans paneline iki yeni analiz ekler: Yinelenen JavaScript ve Eski JavaScript.

Yinelenen JavaScript

Yeni Performans > Analizler > Yinelenen JavaScript, sayfanızda varsa paketlerinizdeki büyük yinelenen JavaScript modülleri için isteklerini Ağ'da vurgular.

Performans panelindeki "Yinelenen JavaScript" analizini inceleyin.

JavaScript bağımlılıkları keşfetmek için analizde Ağaç haritasını görüntüle'yi de tıklayabilirsiniz.

Eski JavaScript

Yeni Performans > Analizler > Eski JavaScript, sayfanızda varsa eski JavaScript isteklerini (ör. eski tarayıcıların yeni JavaScript özelliklerini kullanmasını sağlayan polyfill'ler ve dönüşümler) Ağ izlemesinde vurgular. Ancak, çoğu modern tarayıcılar için gerekli değildir.

Performans panelindeki "Eski JavaScript" analizini inceleyin.

Spekülasyonlar artık kural etiketlerini destekliyor

Uygulama > Spekülatif yüklemeler bölümünde, etiket varsa kural kümeleri için URL'ler yerine etiketler gösterilir.

Değiştirme öncesi ve sonrası kuralı, URL'yi bir etiketle ayarlar.

Chromium sorunu: 393408589.

Lighthouse 12.6.0

Lighthouse panelinde artık Lighthouse 12.6.0 sürümü kullanılmaktadır.

Bu sürümdeki en önemli değişiklik, Lighthouse'un performans analizi denetimlerine geçişidir. Lighthouse raporunun Performans kategorisinde artık Analizler'i deneyebilirsiniz.

Lighthouse raporunda analizlere geçme seçeneği eklenmeden önceki ve sonraki durum.

Değişikliklerin tam listesini de inceleyin.

Geliştirici Araçları'ndaki Lighthouse panelini kullanmayla ilgili temel bilgileri öğrenmek için Lighthouse: Web sitesi hızını optimize etme başlıklı makaleyi inceleyin.

Chromium sorunu: 40543651.

Diğer öne çıkanlar

Bu sürümdeki dikkate değer düzeltme ve iyileştirmelerden bazıları şunlardır:

  • Ağ: Sunucu zamanlamalarının bilinen biçimleri için ayrıştırma eklendi.
  • Artık Cmd/Ctrl + tıklama ile tablolardaki satırların seçimini kaldırabilirsiniz (Chromium sorunu: 409474445).
  • Performans > Analizler > Etkili önbellek süreleri kullanın artık TTL'si 30 güne eşit veya 30 günden uzun olan öğeleri yoksayar.

Erişilebilirlik

Bu sürümde aşağıdaki erişilebilirlik iyileştirmeleri yapılmıştır:

  • Performans: İzlemedeki başlatıcı okları artık daha görünür.
  • Öğeler: Artık A kısayoluyla tam sayfa erişilebilirlik ağaç görünümünü açabilir ve kapatabilirsiniz (Chromium sorunu: 40888478).

  • Ekran okuyucular artık aşağıdakiler de dahil olmak üzere çeşitli bilgileri duyuruyor:

    • Kod bloklarından kopyaladığınızda "Panoya kopyalandı".
    • Yapay zeka yardımı sohbetinde çalışma alanınızda değişiklik yaptığınızda "Çalışma alanına uygulanıyor".
    • Performans > Açıklamalar bölümünde yapay zekadan etiket oluşturmasını istediğinizde"Etiket oluşturuluyor ".
    • Yapay zeka yardımı sohbetinde önerilen istemler olduğunu unutmayın.
    • Performans > Analizler bölümünde, alakalı analizler için tahmini tasarrufları okuyun.

Ö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şmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır 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.