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

Jecelyn Yeen

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

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ğ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ı 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.

Chromium sorunu: 1314299

Ağ Önizlemesi sekmesinde güvenlik iyileştirmesi

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 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ı Ağ 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 içerik artık engellenmiş durumda (ikinci ekran görüntüsü).

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.

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.

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.

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.

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.

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.

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.

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

• crbug.com adresinden bize geri bildirim ve özellik isteği gönderin.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak bir Geliştirici Araçları sorununu bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları'yla ilgili ipuçları konulu YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.