Bu sayfa, Cloud Translation API ile çevrilmiştir.

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ı odaklı 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üklenme sayısını ölçelim.

Yeni performans analizleri paneli

Kayıt tamamlandıktan sonra Analizler bölmesinde performans analizlerini görürsünüz. Sorunu ve olası düzeltmeleri anlamak için her bir analiz öğesini tıklayın (ör. Oluşturma engelleme isteği, düzen kayması).

Adım adım açıklamalı eğitimle daha fazla bilgi edinmek için Performans analizleri paneli dokümanlarını inceleyin.

Bu, web geliştiricilerinin (özellikle performans uzmanı olmayanların) potansiyel performans sorunlarını belirleyip düzeltmelerine yardımcı olan bir önizleme özelliğidir. Ekibimizin bu özellikle ilgili çalışmaları devam etmektedir. Daha fazla geliştirme için geri bildirimlerinizi bekliyoruz.

Chromium sorunu: 1270700

Açık ve koyu tema emülasyonu için yeni kısayollar

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

Önceden, Oluşturma sekmesinde temaları emüle etmek için daha fazla adım kullanılıyordu.

Açık ve koyu tema emülasyonu için yeni kısayollar

Chromium sorunu: 1314299

Ağ Önizlemesi sekmesinde gelişmiş güvenlik

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

Örneğin, ilk ekran görüntüsünde karma içerik bulunan bir sayfa gösteriliyor. 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şti (dolayısıyla arka plan kırmızıya dönmüştü). Artık beklendiği gibi engellendi (ikinci ekran görüntüsü).

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

Chromium sorunu: 833147

Kesme noktasında yeniden yükleme iyileştirildi

Hata ayıklayıcı, artık kesme noktasında yeniden yükleme yaparken komut dosyasının yürütülmesini sonlandırıyor.

Örneğin, bu React demosinde ReactDOM ayrılma noktasında ayar ve yeniden yükleme sırasında komut dosyası daha önce sonsuz bir döngüye girmiştir. Kaynaklar paneli, sonsuz döngü nedeniyle bozuldu.

JavaScript'i yürütmeye devam etmek geliştiriciler için çok fazla soruna neden olur ve oluşturucunun çalışmamasına neden olabilir. Bu değişiklik, hata ayıklama davranışını Firefox gibi diğer tarayıcılarla uyumlu hale getirmektedir.

Kesme noktasında yeniden yükleme iyileştirildi

Chromium sorunları: 1014415, 1004038, 1112863, 1134899

Konsol güncellemeleri

Console'da komut dosyası yürütme hatalarını ele alma

Konsolda komut dosyası değerlendirmesi sırasında karşılaşılan hatalar artık window.onerror işleyicisini tetikleyen uygun hata etkinlikleri oluşturuyor ve pencere nesnesinde "error" etkinlikleri olarak gönderiliyor.

Console'da komut dosyası yürütme hatalarını ele alma

Chromium sorunu: 1295750

Enter ile canlı ifadeyi kaydedin

Canlı ifade yazmayı bitirdikten sonra uygulamak için Enter simgesini tıklayabilirsiniz. Önceden, Enter tuşuna basıldığında yeni satırlar giriliyordu. Bu, Geliştirici Araçları'nın diğer bölümleriyle tutarsızdır.

Canlı ifade düzenleyicisinde yeni bir satır eklemek için bunun yerine Shift + Enter kısayolunu kullanın.

Enter ile canlı ifadeyi kaydedin

Chromium sorunu: 1260744

Kullanıcı işlemleri akışı kaydını başlangıçta iptal edin

Kullanıcı akışı kaydının başlangıcında kaydı iptal edebilirsiniz. Önceden kaydı iptal etme seçeneği sunulmuyordu.

Kullanıcı işlemleri akışı kaydını başlangıçta iptal edin

Chromium sorunu: 1257499

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

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

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

Not: Şu anda bu özelliği etkinleştirmek için Chrome'u --enable-blink-features=HighlightInheritance işaretiyle çalıştırmanız gerekmektedir.

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

Chromium sorunu: 1024156

Öne çıkan çeşitli unsurlar

Bu sürümde yapılan bazı dikkate değer düzeltmeler şunlardır:

Özellikler bölmesinde, erişimci özellikleri artık varsayılan olarak değere sahip olacak şekilde görüntülenir. Dosya daha önce yanlışlıkla gizlenmişti. (1309087)
Stiller bölmesi artık geçersiz kılınan @support kurallarını düzgün şekilde üstü çizili olarak göstermektedir. Daha önce kuralların üstü çizili değildi. (1298025)
Kaynaklar panelinde, CSS düzenlenirken birden fazla boş satıra neden olan CSS biçimlendirme mantığı düzeltildi. (1309588)
Konsol'daki bir nesnenin Yinelemeli olarak genişlet seçeneğini en fazla 100 olacak şekilde sınırlandırın. Böylece nesne, dairesel nesnelerde sonsuza kadar uygulanmayacaktır. (1272450)

[Deneysel] CSS değişikliklerini kopyalama

Bu denemede, 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 kuralı kopyalayabilirsiniz.

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

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

CSS değişikliklerini kopyala

Chromium sorunu: 1268754

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

Renk seçiciyle tarayıcının dışında bir renk seçmek için bu denemeyi etkinleştirin. Önceden, yalnızca tarayıcı içinde bir renk seçebiliyordunuz.

Stiller bölmesinde, herhangi bir renk önizlemesini tıklayarak renk seçiciyi açın. İstediğiniz yerden renk seçmek için damlalık aracını 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, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.