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

Önizleme özelliği: Yeni Performans analizleri paneli

Web sitenizin performansıyla ilgili uygulanabilir ve kullanım alanına dayalı analizler elde etmek için Performans analizleri panelini kullanın.

Paneli açın ve kullanım alanınıza göre yeni bir kayıt başlatın. Örneğin, bu demo sayfasının sayfa yükleme hızını ölçelim.

Yeni Performans analizleri paneli

Kayıt tamamlandığında Analizler bölmesinde performans analizlerini görürsünüz. Sorunu ve olası düzeltmeleri anlamak için her analiz öğesini (ör. oluşturmayı engelleyen istek, düzen kayması) tıklayın.

Adım adım açıklamalı eğitimden yararlanarak daha fazla bilgi edinmek için Performans analizleri paneli dokümanlarına gidin.

Bu, web geliştiricilerin (özellikle performans uzmanı olmayanların) olası performans sorunlarını tespit edip düzeltmesine yardımcı olan bir önizleme özelliğidir. Ekibimiz bu özellik üzerinde aktif olarak çalışıyor. Daha fazla geliştirme için geri bildirimlerinizi bekliyoruz.

Chromium sorunu: 1270700

Açık ve koyu temaları taklit etmek için yeni kısayollar

Artık Stiller bölmesinde bulunan yeni kısayollarla açık ve koyu temaları daha hızlı emüle edebilirsiniz (CSS medya özelliği prefers-color-scheme).

Önceden, Oluşturma sekmesinde temaları taklit etmek için daha fazla adım gerekiyordu.

Açık ve koyu temaları taklit etmek için yeni kısayollar

Chromium sorunu: 1314299

Ağ Önizleme sekmesinde güvenlik iyileştirmesi

Geliştirici Araçları artık panelindeki Önizleme sekmesinde İçerik Güvenliği Politikası'nı (İGP) uyguluyor.

Örneğin, ilk ekran görüntüsünde karma içerik içeren bir sayfa gösterilmektedir. Sayfa güvenli bir HTTPS bağlantısı üzerinden yüklenir ancak stil sayfası güvenli olmayan bir HTTP bağlantısı üzerinden yüklenir.

Tarayıcı, stil sayfası isteğini varsayılan olarak engelledi. Ancak sayfayı panelindeki Önizleme sekmesinden açtığınızda stil sayfası daha önce engellenmemiş olduğundan (bu nedenle arka plan kırmızıya dönmüştür). Beklediğiniz gibi, bu URL artık engellenmiş durumda (ikinci ekran görüntüsü).

Ağ Önizleme sekmesinde güvenliği iyileştirme

Chromium sorunu: 833147

Kesme noktasında yeniden yükleme iyileştirildi

Hata ayıklayıcı artık duraklatma noktasında yeniden yüklenirken komut dosyası yürütmeyi sonlandırıyor.

Örneğin, bu React demosunda komut dosyası daha önce ReactDOM kesme noktasında ayarlanıp yeniden yüklenirken sonsuz bir döngüye giriyordu. Sonsuz döngü nedeniyle Kaynaklar paneli bozuldu.

JavaScript'i çalıştırmaya devam etmek geliştiriciler için çok fazla soruna neden oluyor ve oluşturucuyu bozuk bir durumda bırakabilir. Bu değişiklik, hata ayıklama davranışını Firefox gibi diğer tarayıcılarla uyumlu hale getirir.

Kesme noktasında yeniden yükleme iyileştirildi

Chromium sorunları: 1014415, 1004038, 1112863, 1134899

Konsol güncellemeleri

Konsol'da komut dosyası yürütme hatalarını işleme

Console'da komut dosyası değerlendirmesi sırasında oluşan hatalar artık window.onerror işleyicisini tetikleyen ve window nesnesinde "error" etkinlikleri olarak dağıtılan uygun hata etkinlikleri oluşturuyor.

Konsol'da komut dosyası yürütme hatalarını işleme

Chromium sorunu: 1295750

Enter tuşuyla canlı ifadeyi kaydetme

Bir canlı ifadeyi yazmayı tamamladığınızda Enter simgesini tıklayarak ifadeyi kaydedebilirsiniz. Daha önce Enter tuşuna basıldığında yeni satırlar ekleniyordu. Bu durum, DevTools'un diğer bölümleriyle tutarlı değildir.

Canlı ifade düzenleyicide yeni bir satır eklemek için bunun yerine Shift + Enter tuşlarını kullanın.

Enter tuşuyla canlı ifadeyi kaydetme

Chromium sorunu: 1260744

Kullanıcı akışı kaydını başlangıçta iptal etme

Kullanıcı akışı kaydının başlangıcında kaydı iptal edebilirsiniz. Daha önce, kaydı iptal etme seçeneği yoktu.

Kullanıcı akışı kaydını başlangıçta iptal etme

Chromium sorunu: 1257499

Devralınan vurgulu sözde öğeleri Stiller bölmesinde görüntüleme

Devralınan vurgu sözde öğelerini (ör. ::selection, ::spelling-error, ::grammar-error ve ::highlight) Stiller bölmesinde görüntüleyin. Daha önce bu kurallar gösterilmiyordu.

Özellikte belirtildiği gibi, birden fazla stil çakıştığında kazanan stil basamaklı olarak belirlenir. Bu yeni özellik, kuralların devralınmasını ve önceliğini anlamanıza yardımcı olur.

Devralınan vurgulu sözde öğeleri Stiller bölmesinde görüntüleme

Chromium sorunu: 1024156

Diğer öne çıkan özellikler

Bu sürümdeki bazı önemli düzeltmeler şunlardır:

  • Özellikler bölmesinde artık erişim özelliklerinin değeri varsayılan olarak gösterilir. Daha önce yanlışlıkla gizlenmişti. (1309087)
  • Stiller bölmesinde, geçersiz kılınan @support kuralları artık üstü çizili olarak gösteriliyor. Daha önce kurallarda üstü çizilme yoktu. (1298025)
  • CSS'yi düzenlerken birden fazla boş satır oluşmasına neden olan Kaynaklar panelindeki CSS biçimlendirme mantığı düzeltildi. (1309588)
  • Dairesel nesneler için sonsuza kadar devam etmemesi amacıyla, Konsol'daki bir nesnenin Yinelemeli olarak genişlet seçeneğini en fazla 100 olarak sınırlayın. (1272450)

[Deneysel] CSS değişikliklerini kopyalama

Bu denemeyle, Stiller bölmesinde CSS değişiklikleriniz yeşil renkle vurgulanır. Değiştirilen kuralların üzerine gelip yanındaki yeni kopyala düğmesini tıklayarak kopyalayabilirsiniz.

Bunun dışında, herhangi bir kuralı sağ tıklayıp Tüm CSS değişikliklerini kopyala'yı seçerek tüm CSS değişikliklerini beyanlara kopyalayabilirsiniz.

CSS değişikliklerinizi kolayca takip edip kopyalamanıza yardımcı olmak için Değişiklikler sekmesine yeni bir Kopyala düğmesi eklendi.

CSS değişikliklerini kopyalama

Chromium sorunu: 1268754

[Deneysel] Tarayıcı dışında renk seçme

Renk seçiciyi kullanarak tarayıcı dışında renk seçmek için bu deneysel çalışmayı etkinleştirin. Daha önce yalnızca tarayıcıda renk seçebiliyordunuz.

Renk seçiciyi açmak için Stiller bölmesinde herhangi bir renk önizlemesini tıklayın. Damlalığı kullanarak istediğiniz yerden renk seçin.

Tarayıcı dışında renk seçme

Chromium sorunu: 1245191

Ö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şmenize, en yeni web platformu API'lerini test etmenize 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.