Chrome 137'teki DevTools'daki yenilikler

Sofia Emelianova
Sofia Emelianova
GitHub

Google I/O 2025 özel sayısı

Chrome Geliştirici Araçları, bu yılki Google I/O'da önemli bir yer alacak. Canlı oturumlar ve kaydedilmiş oturumlar olacak.

Heyecan verici yeni özellikler hakkında bilgi edinmek için aşağıdaki kaynakları inceleyin:

Ayrıca, Rachel Andrew'un 20 Mayıs 2025'te saat 16:30'da (PT) gerçekleştireceği Web'deki yenilikler oturumuna katılmayı unutmayın.

En son öne çıkan özelliklerimizin kısa bir özeti için en yeni videomuzu izleyin:

Gemini ile CSS değişikliklerini çalışma alanınızda değiştirme ve kaydetme

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

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

Çalışma alanı klasörü bağlıyken Öğeler panelinde Yapay zekaya sor'u tıklayın, Gemini'dan CSS'yi değiştirmesini isteyin, değişiklikleri canlı olarak test etmek için Devam'ı tıklayın, ardından Kaydedilmemiş 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 geri kaydetme

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

JavaScript ile nasıl çalıştığını inceleyin:

Chromium sorunu: 404170628.

Gemini'a performans analizleri hakkında soru sorun

Artık tek bir tıklamayla Gemini ile sohbet başlatarak aşağıdaki performans analizlerini inceleyebilir ve 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 içgörüye "Yapay zekaya sor" düğmesi eklenmeden önceki ve eklendikten sonraki görünüm.

Özellikle ilgili geri bildiriminizi crbug.com/371170842 adresinden gönderebilirsiniz.

Gemini ile performans bulgularına açıklama ekleme

Artık Gemini'dan performans izindeki etkinliklerle ilgili notlar oluşturmasını isteyebilirsiniz.

Ana parçadaki 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 izine ve bağlama göre bir etiket önerebilir.

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

Yapay zeka yardımı panelinde artık Ekran görüntüsü al düğmesini tıklayarak sayfanın ekran görüntüsünü alabilir ve Gemini ile sohbetinize gönderebilirsiniz.

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

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

Performans panelindeki yeni analizler

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

Yinelenen JavaScript

Yeni Performans > Analizler > Yinelenen JavaScript bölümü, paketlerinizde bulunan büyük yinelenen JavaScript modüllerine yönelik istekleri Ağ izinde vurgular.

Performans panelindeki "Yinelenen JavaScript" analizi.

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

Eski JavaScript

Yeni Performans > Analizler > Eski JavaScript bölümünde, sayfanızda varsa eski JavaScript istekleri (ör. eski tarayıcıların yeni JavaScript özelliklerini kullanmasını sağlayan çoklu dolgular ve dönüşümler) Ağ izinde vurgulanır. Ancak, çoğu modern tarayıcılar için gerekli değildir.

Performans panelindeki "Eski JavaScript" analizi.

Tahminler artık kural etiketlerini destekliyor

Uygulama > Önceden yüklemeler bölümünde artık kural kümeleri için URL'ler yerine etiketler gösteriliyor (etiketler varsa).

Kural kümesi URL'si bir etiketle değiştirilmeden önceki ve sonraki durum.

Chromium sorunu: 393408589.

Lighthouse 12.6.0

Lighthouse paneli artık Lighthouse 12.6.0'ı çalıştırıyor.

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

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

Değişikliklerin tam listesini de inceleyin.

Geliştirici Araçları'nda Lighthouse panelini kullanmanın temel bilgileri için Lighthouse: Web sitesi hızını optimize etme başlıklı makaleyi inceleyin.

Chromium sorunu: 40543651.

Diğer önemli noktalar

Bu sürümdeki önemli düzeltmeler ve iyileştirmelerden bazıları şunlardır:

  • Ağ: Sunucu zamanlamalarının bilinen biçimleri için ayrıştırma eklendi.
  • Artık tablolarda Cmd/Ctrl + tıklama ile satırların seçimini kaldırabilirsiniz (Chromium sorunu: 409474445).
  • Performans > Analizler > Verimli önbellek ömrü kullanın artık TTL'si 30 gün veya daha uzun olan öğeleri yoksayıyor.

Erişilebilirlik

Bu sürümde erişilebilirlikle ilgili aşağıdaki iyileştirmeler yapıldı:

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

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

    • Kod bloklarından kopyalama yaptığınızda "Panoya kopyalandı" mesajı gösterilir.
    • Yapay zeka yardımı sohbetinde çalışma alanınızda değişiklik yaptığınızda "Çalışma alanına uygulanıyor"
    • Yapay zekadan Performans > Açıklamalar'da oluşturmasını istediğinizde "Etiket oluşturuluyor"
    • Yapay zeka yardımı sohbetinde önerilen istemler olduğunu unutmayın.
    • Performans > Analizler'deki alakalı analizler için tahmini tasarrufları okuyun.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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 diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

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