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

Jecelyn Yeen

Önizleme özelliği: Yeni performans analizleri paneli

Web sitenizin performansıyla ilgili üzerine işlem yapılabilen ve kullanım alanına dayalı analizler almak 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 performans analizlerini Analizler bölmesinde 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 talimatlar içeren eğitimle 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ı belirleyip düzeltmesine yardımcı olan bir önizleme özelliğidir. Ekibimizin bu özellikle ilgili çalışmaları devam etmektedir. Bu esnada geri bildirimlerinizi alarak özelliği daha da geliştirmek isteriz.

Chromium sorunu: 1270700

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

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

Daha önce, 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ğ Önizlemesi sekmesinde daha iyi güvenlik

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

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

Tarayıcı, stil sayfası isteğini varsayılan olarak engelledi. Ancak sayfayı Ağ panelindeki Önizleme sekmesi üzerinden açtığınızda stil sayfası daha önce engellenmiyordu (bu nedenle arka plan kırmızıya dönüyordu). Beklendiği gibi engellenir (ikinci ekran görüntüsü).

Ağ Önizleme sekmesinde güvenliği artırma

Chromium sorunu: 833147

Kesme noktasında yeniden yükleme iyileştirildi

Hata ayıklayıcı, kesme noktasında yeniden yükleme yapıldığında komut dosyası yürütmeyi artık sonlandırıyor.

Örneğin, bu React demosunda ReactDOM kesme noktasında ayarlama ve yeniden yükleme yapılırken komut dosyası daha önce sonsuz döngüye giriyordu. Kaynaklar paneli, sonsuz döngü nedeniyle bozuldu.

JavaScript'in yürütülmeye devam etmesi, geliştiriciler için birçok soruna neden oluyor ve oluşturucuyu bozuk bir durumda bırakabiliyor. 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

Konsolda komut dosyası yürütme hatalarını işleme

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

Konsolda komut dosyası yürütme hatalarını işleme

Chromium sorunu: 1295750

Enter tuşuyla canlı ifade gönderme

Canlı ifade yazmayı bitirdikten sonra Enter simgesini tıklayarak ifadeyi kaydedebilirsiniz. Daha önce Enter tuşuna basıldığında yeni satırlar ekleniyordu. Bu durum, Geliştirici Araçları'nın diğer kısımlarıyla tutarsızdır.

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

Enter tuşuyla canlı ifade gönderme

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 vurgu sözde öğelerini 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.

Spesifikasyonda belirtildiği gibi, birden fazla stil çakıştığında hangi stilin kullanılacağını basamaklandırma belirler. Bu yeni özellik, kuralların devralınmasını ve önceliğini anlamanıza yardımcı olur.

Devralınan vurgu sözde öğelerini Stiller bölmesinde görüntüleme

Chromium sorunu: 1024156

Diğer önemli noktalar

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

  • Özellikler bölmesi artık varsayılan olarak değer içeren erişimci özelliklerini gösteriyor. Daha önce yanlışlıkla gizlenmişti. (1309087)
  • Stiller bölmesi artık geçersiz kılınan @support kurallarını üstü çizili olarak doğru şekilde gösteriyor. Daha önce kuralların üzeri çizilmiyordu. (1298025)
  • CSS düzenlenirken birden fazla boş satıra neden olan Kaynaklar panelindeki CSS biçimlendirme mantığı düzeltildi. (1309588)
  • Döngüsel nesnelerde sonsuza kadar devam etmemesi için Konsol'daki bir nesnenin Özyinelemeli olarak genişlet seçeneğini en fazla 100 ile sınırlayın. (1272450)

[Deneysel] CSS değişikliklerini kopyalama

Bu denemeyle birlikte, Stiller bölmesinde CSS değişiklikleriniz yeşil renkle vurgulanır. Değiştirilen kuralların üzerine gelip yanındaki yeni kopyalama 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 bildirimler arasında kopyalayabilirsiniz.

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

CSS değişikliklerini kopyalama

Chromium sorunu: 1268754

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

Renk seçiciyle tarayıcının dışından renk seçmek için bu denemeyi etkinleştirin. Daha önce yalnızca tarayıcıda bir renk seçebiliyordunuz.

Renk seçiciyi açmak için Stiller bölmesinde herhangi bir renk önizlemesini tıklayın. Herhangi bir yerden renk seçmek için damlalığı kullanın.

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, 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.