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.

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 (ö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.

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 İçerik Güvenliği Politikası'nı (İGP) 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ı 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ü).

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

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.

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

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.

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

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.

Canlı ifadeyi Enter ile kaydedin

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.

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

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.

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

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.

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

Tarayıcının 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ı 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ı'ndaki Diğer seçenekler   Diğer > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını 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.

Chrome 127 sürümü

Chrome 126

Chrome 125 sürümü

Chrome 124 sürümü

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119 sürümü

Chrome 118 sürümü

Chrome 117 sürümü

Chrome 116

Chrome 115 sürümü

Chrome 114 sürümü

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109 sürümü

Chrome 108 sürümü

Chrome 107 sürümü

Chrome 106

Chrome 105 sürümü

Chrome 104 sürümü

Chrome 103 sürümü

Chrome 102 sürümü

Chrome 101

Chrome 100 sürümü

Chrome 99 sürümü

Chrome 98 sürümü

Chrome 97 sürümü

Chrome 96 sürümü

Chrome 95 sürümü

Chrome 94 sürümü

Chrome 93 sürümü

Chrome 92 sürümü

Chrome 91 sürümü

Chrome 90 sürümü

Chrome 89 sürümü

Chrome 88 sürümü

Chrome 87 sürümü

Chrome 86

Chrome 85 sürümü

Chrome 84

Chrome 83 sürümü

Chrome 82

Chrome 82 iptal edildi.

Chrome 81

Chrome 80 sürümü

Chrome 79 sürümü

Chrome 78 sürümü

Chrome 77

Chrome 76

Chrome 75 sürümü

Chrome 74 sürümü

Chrome 73

Chrome 72 sürümü

Chrome 71

Chrome 70

Chrome 68 sürümü

Chrome 67 sürümü

Chrome 66

Chrome 65 sürümü

Chrome 64 sürümü

Chrome 63 sürümü

Chrome 62 sürümü

Chrome 61 sürümü

Chrome 60 sürümü

Chrome 59 sürümü