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

Jecelyn Yeen

Geliştirici Araçları'nı tercih ettiğiniz dilde kullanma

Chrome DevTools artık 80'den fazla dili destekliyor. Böylece, tercih ettiğiniz dilde çalışabilirsiniz.

Ayarlar'ı açın, ardından Tercihler > Dil açılır listesinde tercih ettiğiniz dili seçin ve DevTools'u yeniden yükleyin.

Tercihler" width="800" height="494">

Chromium sorunu: 1163928

Cihaz listesinde yeni Nest Hub cihazları

Artık Cihaz modunda Nest Hub ve Nest Hub Max'in boyutlarını simüle edebilirsiniz.

Cihaz araç çubuğunu aç/kapat'ı   Cihaz araç çubuğunu açma/kapatma  tıklayın ve cihaz listesinde Nest Hub veya Nest Hub Max'i seçin.

Cihaz modundaki Nest Hub cihazı

Chromium sorunu: 1223525

Kare ayrıntıları görünümündeki deneme süreçleri

Artık Uygulama paneli altındaki çerçeve ayrıntıları görünümünde bir sitenin deneme aşamasındaki özellikleri hakkında bilgi edinebilirsiniz.

Kaynak denemeleri, yeni veya deneysel özelliklere erişmenizi sağlar. Bu sayede, özellik herkesin kullanımına sunulmadan önce kullanıcılarınızın sınırlı bir süre boyunca deneyebileceği işlevler oluşturabilirsiniz.

Kaynak denemeleri içeren bir sayfa açın (ör. demo sayfası). Uygulama panelinde Kareler bölümüne gidin ve üstteki kareyi seçin.

Kare ayrıntıları görünümündeki deneme süreçleri

Chromium sorunu: 607555

Yeni CSS kapsayıcı sorguları rozeti

Kapsayıcı öğelerinin (@container @ kurallarının ölçütleriyle eşleşen üst öğeler) yanına yeni bir kapsayıcı rozeti eklenir. Seçilen kapsayıcının ve sorgu içeren tüm alt öğelerinin sayfada gösterilmesini açıp kapatmak için rozeti tıklayın.

CSS kapsayıcı sorguları rozeti

Chromium sorunu: 1146422

Ağ filtrelerini ters çevirmek için yeni onay kutusu

Ağ panelindeki filtreleri ters çevirmek için yeni Ters çevir onay kutusunu kullanın.

Örneğin, 404 durumuna sahip ağ isteklerini filtrelemek için "status-code: 404" yazabilirsiniz. Filtreyi olumsuzlamak için Ters çevir onay kutusunu etkinleştirin (404 durumu olmayan tüm ağ isteklerini gösterin).

Ağ filtrelerini ters çevirme

Chromium sorunu: 1054464

Konsol kenar çubuğunun desteği yakında sonlandırılacak

Filtre kullanıcı arayüzünü araç çubuğuna taşımak için Konsol kenar çubuğu kaldırılacak. Endişeleriniz veya geri bildiriminiz mi var? Bu sorun izleyici aracılığıyla bize bildirin.

Konsol kenar çubuğu desteğinin sonlandırılmasıyla ilgili mesaj

Chromium sorunu: 1232937

Sorunlar sekmesinde ve Ağ panelinde ham Set-Cookie üstbilgilerini görüntüleme

DevTools artık Set-Cookie üstbilgilerini Sorunlar sekmesinde gösteriyor.

Daha önce, Geliştirici Araçları Ağ panelinde hatalı biçimlendirilmiş çerezleri (yanlış Set-Cookie üstbilgisi) göstermiyordu. Ağ paneline eklenen yeni response-header-set-cookie filtresiyle kullanıcılar, ham Set-Cookie üstbilgi yanıtını filtreleyebilir. Geliştirici Araçları, Sorunlar sekmesindeki ham Set-Cookie üstbilgilerini Ağ paneline bağlar.

Sorunlar sekmesinde ve Ağ panelinde ham "Set-Cookie" üstbilgileri

Chromium sorunu: 1179186

Tutarlı bir şekilde, Console'da kendi özellikleri olarak yerel erişimcileri gösterin.

Konsol artık yerel erişimcileri kendi özellikleri olarak tutarlı bir şekilde gösteriyor.

Örneğin, Console'da new Int8Array([1, 2, 3]) ifadesi değerlendirilirken length, byteOffset gibi yerel erişimciler önizlemede gösterilmiyordu. Bu son güncellemeyle birlikte, yerel erişimciler önizlemede gösterilir ve değerler genişletildiğinde hemen değerlendirilir.

Tutarlı bir şekilde, Console'da kendi özellikleri olarak yerel erişimcileri gösterin.

Chromium sorunları: 1076820, ​​1199247

#sourceURL içeren satır içi komut dosyaları için uygun hata yığın izlemeleri

Geliştirici Araçları artık satır içi komut dosyalarını #sourceURL ile düzgün şekilde çözümlüyor ve hata ayıklama için uygun hata yığını izlemeleri gösteriyor.

Daha önce Geliştirici Araçları, #sourceURL içeren satır içi komut dosyaları için açılış <script> etiketine göre değil, çevreleyen dokümana göre yanlış konum gösteriyordu.

#sourceURL içeren satır içi komut dosyaları için uygun hata yığın izlemeleri

Chromium sorunları: 1183990, ​​578269

Hesaplanmış bölmesinde renk biçimini değiştirme

Artık Hesaplanan bölmesindeki herhangi bir öğenin renk biçimini değiştirmek için renk önizlemesini üst karakter tuşunu basılı tutarak tıklayabilirsiniz.

Renk biçimini değiştirmek için üst karakter tuşunu basılı tutarak renk önizlemesini tıklayın.

Chromium sorunu: 1226371

Özel ipuçlarını yerel HTML ipuçlarıyla değiştirme

DevTools artık tüm bileşenlerde yerel HTML ipuçlarını kullanıyor. Geliştirici Araçları, yerel HTML ipucu stilinin olmaması nedeniyle uzun süredir özel bir ipucu uygulamasına sahiptir.

Maalesef özel bir ipucu uygulamasını sürdürmek karmaşıktır ve düzenli olarak karmaşık hatalarla karşılaşırız.

Özel uygulamaların avantajlarını yeniden değerlendirdikten sonra, yerel HTML ipuçlarının Geliştirici Araçları için yeterli olduğunu ve ipuçlarının benimsenmesinin kullanıcılarımız için çok çeşitli sorunları önlediğini tespit ettik.

Geliştirici Araçları ipucu

Chromium sorunu: 1223391

[Deneysel] Sorunlar sekmesindeki sorunları gizleme

Sorunlar sekmesindeki sorunları gizlemek için Sorunlar menüsünü gizle denemesini etkinleştirin. Bu sayede, sizin için önemli olan konulara odaklanabilirsiniz.

Sorun sekmesinde, bir sorunun üzerine gelin, sağdaki sorun menüsünü Daha fazla tıklayın ve Buna benzer sorunları gizle'yi seçerek sorunu gizleyin.

Deneysel sorun gizleme içerik menüsü

Chromium sorunu: 1175722

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