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

Önizleme özelliği: Yeni Performans analizleri paneli

Web sitenizin performansı hakkında 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 uygun yeni bir kayıt başlatın. Örneğin, bu demo sayfasının sayfa yüklemesini ölçelim.

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 (ör. Oluşturma engelleme isteği, düzen kayması) tıklayın.

Adım adım açıklamalı eğitimle daha fazla bilgi edinmek için Performans analizleri paneli belgelerine gidin.

Bu, web geliştiricilerinin (özellikle performans uzmanları olmayanlar) potansiyel performans sorunlarını belirleyip düzeltmelerine yardımcı olan bir önizleme özelliğidir. Ekibimizin bu özellikle ilgili çalışmaları devam ediyor. Geliştirilebilecek konular için sizden geri bildirimlerinizi rica ediyoruz.

Chromium sorunu: 1270700

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

Artık Stiller bölmesindeki yeni kısayolları kullanarak 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 daha fazla adım gerektiriyordu.

Chromium sorunu: 1314299

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

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

Örneğin, ilk ekran görüntüsünde karma içerik barındıran 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 sekmesini kullanarak açtığınızda stil sayfası daha önce engellenmemiştir (dolayısıyla arka plan kırmızıya dönmüştür). Artık beklediğiniz gibi engellendi (ikinci ekran görüntüsü).

Chromium sorunu: 833147

Kesme noktasında iyileştirilmiş yeniden yükleme

Hata ayıklayıcı artık kesme noktasında yeniden yükleme yaparken komut dosyası yürütme işlemini sonlandırıyor.

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

JavaScript'i yürütmeye devam etmek, geliştiriciler açısından çok fazla soruna neden olur ve oluşturucuyu bozuk 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

Console'daki komut dosyası yürütme hatalarını düzeltme

Console'da 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 nesnesine "error" etkinlikleri olarak gönderiliyor.

Chromium sorunu: 1295750

Canlı ifadeyi Enter ile kaydedin

Canlı bir ifade yazmayı tamamladığınızda Enter düğmesini tıklayarak uygulayabilirsiniz. Daha önce, Enter tuşuna basmak yeni satırların eklenmesini sağlıyordu. Bu durum, Geliştirici Araçları'nın diğer bölümleriyle tutarlı değildir.

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

Chromium sorunu: 1260744

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

Kullanıcı işlemleri akışı kaydına başlarken kaydı iptal edebilirsiniz. Daha önce, kaydı iptal etme seçeneği bulunmuyordu.

Chromium sorunu: 1257499

Stiller bölmesinde devralınan öne çıkan sözde öğeleri göster

Devralınan öne çıkarılan 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 kazanan stili basamakla belirler. Bu yeni özellik, kuralların devralınmasını ve önceliğini anlamanıza yardımcı olur.

Chromium sorunu: 1024156

Çeşitli öne çıkan anlar

Bu sürümde yer alan bazı önemli düzeltmeler şunlardır:

• Özellikler bölmesi artık varsayılan olarak değere sahip erişimci özelliklerini görüntüler. Daha önce yanlışlıkla gizlenmişti. (1309087)
• Stiller bölmesinde, geçersiz kılınan @support kuralları artık üstü çizili olarak düzgün şekilde gösteriliyor. Daha önce, kuralların üstü çizilmiyordu. (1298025)
• Kaynaklar panelindeki CSS düzenlenirken birden fazla boş satıra neden olan CSS biçimlendirme mantığı düzeltildi. (1309588)
• Konsoldaki bir nesnenin Yinelemeli olarak genişlet seçeneğini en fazla 100 olacak şekilde sınırlayın. Böylece dairesel nesnelerde sonsuza kadar devam etmiş olursunuz. (1272450)

[Deneysel] CSS değişikliklerini kopyalama

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

Bunun yerine, bildirimlerdeki tüm CSS değişikliklerini kopyalamak için herhangi bir kuralı sağ tıklayıp Tüm CSS değişikliklerini kopyala'yı seçebilirsiniz.

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

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. Daha önce, yalnızca tarayıcı içinden bir renk seçebiliyordunuz.

Stiller bölmesinde, renk seçiciyi açmak için herhangi bir renk önizlemesini tıklayın. İstediğiniz yerden renk seçmek için damlalık aracını kullanın.

Chromium sorunu: 1245191

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji ürünü web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.

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

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

• Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
• Geliştirici Araçları sorunlarını bildirmek için Diğer seçenekler'i > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
• @ChromeDevTools adresinden tweet atabilirsiniz.
• Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

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