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, uzunluktaki herhangi bir CSS özelliğini (ör. height, padding) arayın.

Birim türünün üzerine gelin ve birim türünün altının çizili olduğuna dikkat edin. Açılır listeden bir birim türü seçmek için bu başlığı 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 oranında ayarlamak 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şlayabilirsiniz.

Chromium sorunları: 1126178, 1172993

Sorunlar sekmesinde sorunları gizleyin

Artık Sorunlar sekmesinde belirli sorunları gizleyerek yalnızca sizin için önemli olan sorunlara odaklanabilirsiniz.

Sorunlar sekmesinde, gizlemek istediğiniz sorunun üzerine gelin. Diğer seçenekler'i tıklayın > Buna benzer sorunları gizle.

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

Chromium sorunu: 1175722

Özelliklerin görüntülenmesi iyileştirildi

Geliştirici Araçları, mülklerin görünümünü şu şekilde iyileştirir:

• Konsol, Kaynaklar paneli ve Özellikler bölmesinde her zaman ilk olarak kendi özelliklerini kalın hale getirin ve sıralayın.
• Özellikler bölmesinde özellik görünümünü birleştirin.

Örneğin, aşağıdaki snippet 2 kendi mülkü olan bir URL nesnesi link oluşturur: user ve access ve devralınan search mülkünün 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}`;

Console'da link adresini günlüğe kaydetmeyi deneyin. Kendi mülkleri artık kalın yazı tipinde ve ilk sıralarda olacak. Bu değişiklikler, özellikle devralınan birçok mülke sahip Web API'leri (ör. URL) için özel özelliklerin belirlenmesini kolaylaştırır.

Bu değişikliklerin dışında, DOM özellikleriyle ilgili hata ayıklama deneyimini iyileştirmek için (özellikle Web bileşenleri) daha iyi bir hata ayıklama deneyimi sunmak amacıyla Özellikler bölmesindeki özellikler artık birleştirilmiştir.

Chromium sorunları: 1076820, 1119900

Lighthouse 8.4 panelindeki Lighthouse 8.4

Lighthouse paneli şu anda Lighthouse 8.4'ü çalıştırıyor. Lighthouse artık Largest Containful Paint (LCP) öğesinin geç yüklenmiş bir resim olup olmadığını algılar ve bu öğeden loading özelliğini kaldırmanızı önerir.

Güncellemeler hakkında daha fazla bilgi edinmek için Lighthouse 8.4'teki yenilikler sayfasına göz atın.

Chromium sorunu: 772558

Kaynaklar panelinde snippet'leri sıralama

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

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

Chromium sorunu: 1243976

Çevrilmiş sürüm notlarına yönlendiren yeni bağlantılar ve çeviri hatası bildirin

Artık Yenilikler sekmesinde Geliştirici Araçları sürüm notlarını tıklayarak Rusça, Çince, İspanyolca, Japonca, Portekizce ve Korece olmak üzere 6 farklı dilde okuyabilirsiniz.

Chrome 94 sürümünden itibaren, Geliştirici Araçları'nda tercih ettiğiniz dili ayarlayabilirsiniz. Çevirilerle ilgili herhangi bir sorun tespit ettiyseniz Diğer seçenekler > üzerinden çeviri ile ilgili sorun bildiriminde bulunarak içeriği iyileştirmemize yardımcı olun. Yardım > Çeviri hatası bildirin.

Chromium sorunları: 1246245, 1245481

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

Komut Menüsünde dosya aramakta zorlandınız mı? Güzel bir haberimiz var. Komut Menüsü kullanıcı arayüzü artık iyileştirildi.

Windows ve Linux'ta Ctrl+P veya macOS'te Command+P klavye kısayoluyla dosya aramak için Komut Menüsü'nü açın.

Komut Menüsü'ndeki kullanıcı arayüzü iyileştirmeleri hâlâ devam ediyor. Daha fazla güncelleme için bizi takip etmeye devam edin!

Chromium sorunu: 1201997

Önizleme kanallarını indirme

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

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

• Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
• Geliştirici Araçları sorunlarını bildirmek için Diğer seçenekler'i > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
• @ChromeDevTools adresinden tweet atabilirsiniz.
• Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.