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

Jecelyn Yeen

Yeni CSS uzunluğu yazma araçları

Geliştirici Araçları, CSS'deki uzunlukları güncellemek için daha kolay ancak esnek bir yöntem ekledi.

Stiller bölmesinde, uzunluk içeren CSS özelliklerini (ör. height, padding) bulun.

Birim türünün üzerine gelin. Birim türünün altı çizilir. Açılır listeden bir birim türü seçmek için bu seçeneği tıklayın.

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 birim artırmak veya azaltmak için sürüklerken Üst Karakter tuşunu basılı tutun.

Birim değerini metin olarak düzenlemeye devam edebilirsiniz. Değeri tıklayıp düzenlemeye başlamanız yeterlidir.

Chromium sorunları: 1126178, 1172993

Sorunlar sekmesindeki sorunları gizleme

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

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

Sorunlar menüsünü gizleme

Tüm gizli sorunlar, Gizli sorunlar bölmesine eklenir. Bölmeyi genişletin. Tüm gizlenmiş sorunları veya seçilen bir sorunu gösterebilirsiniz.

Gizli sorunlar bölmesi

Chromium sorunu: 1175722

Tesislerin gösterimi iyileştirildi.

DevTools, özellikleri aşağıdaki şekilde görüntülemeyi iyileştirir:

  • Console, Sources paneli ve �Properties bölmesinde her zaman kendi mülklerinizi önce kalınlaştırın ve sıralayın.
  • Özellikler bölmesinde özellikler görünümünü düzleştirin.

Örneğin, aşağıdaki snippet, user ve access olmak üzere 2 kendi özelliği olan bir URL nesnesi link oluşturur ve devralınan bir özelliğin search değerini günceller.

/* 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}`;

link öğesini Console'a kaydetmeyi deneyin. Kendi mülkleriniz artık kalın yazı tipiyle gösteriliyor ve ilk olarak sıralanıyor. Bu değişiklikler, özellikle çok sayıda devralınan özelliği olan Web API'leri (ör. URL) için özel özelliklerin tespit edilmesini kolaylaştırır.

Kendi mülkleriniz kalın yazı tipiyle gösterilir ve önce sıralanır.

Bu değişikliklerin yanı sıra, özellikle web bileşenleri için daha iyi bir DOM özellikleri hata ayıklama deneyimi sağlamak amacıyla Özellikler bölmesindeki özellikler de artık düzleştirildi.

Düzleştirme özellikleri

Chromium sorunları: 1076820, 1119900

Lighthouse panelinde Lighthouse 8.4

Lighthouse paneli artık Lighthouse 8.4'ü çalıştırıyor. Lighthouse artık Largest Containful Paint (LCP) öğesinin geç yüklenen bir resim olup olmadığını algılayacak ve loading özelliğinin kaldırılmasını önerecek.

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 panelindeki snippet'leri sıralama

Kaynaklar panelinin altındaki Snippet'ler bölmesinde yer alan snippet'ler artık alfabetik olarak sıralanıyor. Daha önce sıralanmıyordu.

Komutları daha hızlı çalıştırmak için snippet özelliğini kullanın. Bir ipucu için bu videoyu izleyin.

Kaynaklar panelindeki snippet'leri sıralama

Chromium sorunu: 1243976

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

Artık Ne var? sekmesinden DevTools sürüm notlarını 6 farklı dilde (Rusça, Çince, İspanyolca, Japonca, Portekizce ve Korece) okumak için tıklayabilirsiniz.

Chrome 94'ten itibaren Geliştirici Araçları'nda tercih ettiğiniz dili ayarlayabilirsiniz. Çevirilerle ilgili sorunlar bulursanız Diğer seçenekler > Yardım > Çeviri hatası bildir'i tıklayarak çeviri sorununu bildirin ve bu hizmeti iyileştirmemize yardımcı olun.

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

Chromium sorunları: 1246245, 1245481

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

Komut menüsünde dosya aramakta zorlanıyor musunuz? Komut Menüsü kullanıcı arayüzü artık daha iyi!

Windows ve Linux'ta Control+P, MacOS'te ise Command+P klavye kısayolunu kullanarak dosya aramak için Komut Menüsü'nü açın.

Komut Menüsü'ndeki kullanıcı arayüzü iyileştirmeleri devam ediyor. Daha fazla güncelleme 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, 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.