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

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 menüsünden 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'ı tıklayın Cihaz araç çubuğunu açma/kapatma  cihaz listesinin altından Nest Hub veya Nest Hub Max'i seçin.

Cihaz modundaki Nest Hub cihaz

Chromium sorunu: 1223525

Çerçeve ayrıntıları görünümünde kaynak denemeleri

Artık uygulama panelinin altındaki çerçeve ayrıntıları görünümünde bir sitenin orijin denemeleriyle ilgili bilgi edinebilirsiniz.

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

Kaynak denemelerinin bulunduğu bir sayfa açın (ör. demo sayfası). Uygulama panelinde Kareler bölümüne gidip en üstteki kareyi seçin.

Çerçeve ayrıntıları görünümünde kaynak denemeleri

Chromium sorunu: 607555

Yeni CSS kapsayıcı sorguları rozeti

Kapsayıcı öğelerinin (@container at-kurullarının ölçütleriyle eşleşen üst öğeler) yanına yeni bir kapsayıcı rozeti eklenir. Seçilen kapsayıcının ve sayfadaki tüm sorgulayan alt öğelerinin yer paylaşımını görüntülemek için rozeti tıklayın.

CSS kapsayıcı sorguları rozeti

Chromium sorunu: 1146422

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

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

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

Ağ filtrelerini tersine çevirme

Chromium sorunu: 1054464

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

Filtre kullanıcı arayüzü araç çubuğuna taşınacağından Konsol kenar çubuğu kaldırılacak. Endişeleriniz veya geri bildiriminiz var mı? Bu sorun takip aracı üzerinden bize bildirin.

Konsol kenar çubuğu için desteğin sonlandırılması mesajı

Chromium sorunu: 1232937

Sorunlar sekmesinde ve Ağ panelinde ham Set-Cookie üstbilgilerini gösterme

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

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

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

Chromium sorunu: 1179186

Console'da yerel erişim araçlarını kendi mülkleri olarak tutarlı bir şekilde görüntüleme

Konsol artık yerel erişim araçlarını kendi özellikleri olarak tutarlı bir şekilde gösterir.

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

Console'da yerel erişim araçlarını kendi mülkleri olarak tutarlı bir şekilde görüntüleme

Chromium sorunları: 1076820, ​​1199247

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

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

Daha önce DevTools, #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ış konumu gösteriyordu.

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

Chromium sorunları: 1183990, ​​578269

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

Artık Üst Karakter tuşunu basılı tutarak renk önizlemesini tıklayarak Hesaplanmış bölmesinde herhangi bir öğenin renk biçimini değiştirebilirsiniz.

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

Chromium sorunu: 1226371

Özel ipuçları yerine yerel HTML ipuçları kullanma

DevTools artık tüm bileşenlerde yerel HTML ipuçları kullanıyor. Yerel HTML ipucu stili olmadığından Geliştirici Araçları'nda uzun süredir özel ipucu uygulaması kullanılıyordu.

Maalesef özel ipucu uygulamasını sürdürmek karmaşık bir işlemdir 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 DevTools için yeterli olduğunu ve ipuçlarının kullanılmasının kullanıcılarımız için çok çeşitli sorunları önlediğini tespit ettik.

Geliştirici Araçları ipucusu

Chromium sorunu: 1223391

[Deneysel] Sorunlar sekmesinde sorunları gizleme

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

Sorun sekmesinde, fareyle bir sorunun üzerine gelin, sağdaki sorun menüsünü Daha fazla tıklayın ve Bunun gibi 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, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize 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.

Geliştirici Araçları'ndaki yenilikler

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