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

Jecelyn Yeen

Yeni CSS uzunluğu oluşturma araçları

DevTools, CSS'de uzunlukları güncellemenin daha kolay ve esnek bir yolunu ekledi.

Stiller bölmesinde, uzunluğu olan CSS özelliklerini (ör. height, padding) arayın.

Fareyle birim türünün üzerine gelin ve birim türünün altını çizildiğini fark edin. Açılır menüden bir birim türü seçmek için tıklayın.

Fareyle birim değerinin üzerine geldiğinizde fare işaretçiniz yatay imlece dönüşür. Değeri artırmak veya azaltmak için yatay olarak sürükleyin. Değeri 10'a göre ayarlamak için sürüklerken Üst Karakter tuşunu basılı tutun.

Birim değerini metin olarak düzenlemeye devam edebilirsiniz. Bunun için değeri tıklayıp düzenlemeye başlayın.

Chromium sorunları: 1126178, 1172993

Sorunlar sekmesinde sorunları gizleme

Artık yalnızca sizin için önemli olan sorunlara odaklanmak amacıyla Sorunlar sekmesinde belirli sorunları gizleyebilirsiniz.

Sorunlar sekmesinde, gizlemek istediğiniz sorunun üzerine gelin. Diğer seçenekler   Daha fazla   > Bunun gibi sorunları gizle'yi tıklayın.

Sorunlar menüsünü gizle

Tüm gizli sorunlar Gizli sorunlar bölmesine eklenir. Bölmeyi genişletin. Gizlenmiş tüm sorunları veya belirli bir sorunu gizleyebilirsiniz.

Gizli sorunlar bölmesi

Chromium sorunu: 1175722

Tesislerin gösterilmesi iyileştirildi

DevTools, aşağıdakileri yaparak mülkleri daha iyi gösterir:

  • Konsol, Kaynaklar paneli ve Özellikler bölmesinde, kendi mülklerinizi her zaman kalın olarak gösterin ve önceden sıralayın.
  • Özellikler bölmesinde özellikleri düzleştirin.

Örneğin, aşağıdaki snippet'te user ve access olmak üzere 2 özelliği olan bir URL nesnesi link oluşturulur ve devralınan bir search özelliğinin değeri güncellenir.

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

Console'da link ile giriş yapmayı deneyin. Kendi mülkleriniz artık kalın olarak gösteriliyor ve ilk sırada sıralanıyor. Bu değişiklikler, özellikle birçok devralınmış özelliğe sahip Web API'leri (ör. URL) için özel mülkleri tespit etmeyi kolaylaştırır.

Kendi mülkleri kalın olarak gösterilir ve öncelikli olarak sıralanır.

Bu değişikliklerin yanı sıra, özellikle web bileşenleri için daha iyi bir DOM özelliği hata ayıklama deneyimi sunmak amacıyla Özellikler bölmesinde yer alan özellikler de düzleştirildi.

Mülkleri düzleştirme

Chromium sorunları: 1076820, 1119900

Lighthouse panelinde Lighthouse 8.4

Lighthouse panelinde artık Lighthouse 8.4 sürümü kullanılıyor. Lighthouse artık Largest Contentful Paint (LCP) öğesinin gecikmeli yüklenmiş bir resim olup olmadığını algılar ve loading özelliğinin öğeden kaldırılmasını önerir.

Güncellemeler hakkında daha fazla bilgi için Lighthouse 8.4'teki yenilikler başlıklı makaleyi inceleyin.

Lighthouse raporundaki yavaş yüklenmiş LCP denetimi

Chromium sorunu: 772558

Kaynaklar panelinde snippet'leri sıralama

Kaynaklar panelinin altındaki Kısa Parçalar bölmesinde yer alan kısa parçalar artık alfabetik olarak sıralanıyor. Daha önce sıralama yoktu.

Komutları daha hızlı çalıştırmak için snippet özelliğinden yararlanın. İpucu için bu videoyu izleyin.

Kaynaklar panelinde snippet'leri sıralama

Chromium sorunu: 1243976

Çevrilmiş sürüm notlarının yeni bağlantıları ve çeviri hatalarını bildirme

Artık DevTools sürüm notlarını tıklayarak Rusça, Çince, İspanyolca, Japonca, Portekizce ve Korece olmak üzere 6 başka dilde de okuyabilirsiniz.

Chrome 94'ten beri Geliştirici Araçları'nda tercih ettiğiniz dili ayarlayabilirsiniz. Çevirilerde sorunla karşılaşırsanız Diğer seçenekler > Yardım > Çeviri hatası bildir'i kullanarak çeviri sorunlarını bildirerek iyileştirmemize yardımcı olun.

Çevrilmiş sürüm notlarının yeni bağlantıları ve çeviri hatalarını bildirme

Chromium sorunları: 1246245, 1245481

Geliştirici Araçları komut menüsü için iyileştirilmiş kullanıcı arayüzü

Komut menüsünde dosya aramak zor oldu mu? Komut menüsü kullanıcı arayüzü artık geliştirildi.

Windows ve Linux'da Ctrl+P veya MacOS'te Command+P klavye kısayolunu kullanarak bir dosyayı aramak için Komut Menüsü'nü açın.

Komut menüsünde kullanıcı arayüzü iyileştirmeleri devam ediyor. Gelişmeler için takipte kalın.

Komut Menüsü

Chromium sorunu: 1201997

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