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.

Birim değerinin üzerine geldiğinizde fare işaretçiniz yatay imleç olarak değiştirilir. 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. Gizli sorunların tümünü veya birini gizleyebilirsiniz.

Gizli sorunlar bölmesi

Chromium sorunu: 1175722

Özelliklerin görüntülenmesi 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 önce sıralayın.
  • Özellikler bölmesinde özellikleri düzleştirin.

Örneğin, aşağıdaki snippet'te user ve access olmak üzere 2 kendi ö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ülkleri artık kalın yazı tipinde ve ilk sıralarda olacak. 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ülkleriniz 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 paneli şu anda Lighthouse 8.4'ü çalıştırı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 geç yüklenen 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 bunlar sıralanmıyordu.

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ı Rusça, Çince, İspanyolca, Japonca, Portekizce ve Korece dillerinde okumak için Yenilikler sekmesini tıklayabilirsiniz.

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

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

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.