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

Jecelyn Yeen

Stiller bölmesiyle HD rengi hata ayıklama

Web'de yeni CSS renk türleri ve alanları kullanıma sunuluyor. Geliştirici Araçları'nın, geliştiricilerin Yüksek Çözünürlüklü renkleri oluşturmasına, dönüştürmesine ve hata ayıklamasına yardımcı olacak yeni araçlar kullanıma sunması da aynı derecede heyecan verici.

Stiller bölmesi artık CSS Renk Düzeyi 4 spesifikasyonunda belirtildiği gibi 12 yeni renk alanını ve 7 yeni renk gamını desteklemektedir. Web'deki renk seçeneklerini kapsamlı bir şekilde anlamak için Yüksek Çözünürlüklü CSS Renk Kılavuzu'na bakın.

Aşağıda color(), lch(), oklab() ve color-mix() ile CSS renk tanımlarına dair örnekler verilmiştir.

color-mix() işlevini kullanırken, Hesaplanan bölmesinde son renk çıkışını görüntüleyebilirsiniz.

Renk seçici, daha fazla özellik içeren tüm yeni renk alanlarını destekler. Örneğin, color(display-p3 1 0 1) renk kartelasını tıklayın. Seçtiğiniz renk gamının daha net bir şekilde anlaşılması için sRGB ile display-p3 gamlarını ayırt eden bir gam sınır çizgisi de eklendi.

Geliştirici Araçları, renk biçimleri arasında renkleri dönüştürmeyi destekler. Dönüşüm pop-up'ına erişmek için Renk Biçimini Değiştir simgesini kullanın veya Shift işaretini kullanıp Stiller bölmesinde bir renk kartelasını tıklayın.

Dönüştürme işlemi sırasında, dönüşümün alana sığacak şekilde kırpılıp kesilmediğini bilmek önemlidir. Geliştirici Araçları, dönüştürülen rengin yanına bu kırpma hakkında sizi uyaran bir uyarı simgesi yerleştirir. .

Ayrıca yeni kısayol ile ekranınızdan renk seçebilirsiniz. "c" tuşuna basın. için damlalık özelliğini etkinleştirin ve devre dışı bırakmak için Escape tuşuna basın. Damlalık aracı, yalnızca sRGB renk alanındaki renkleri örnekler. Örneğin, sRGB renk alanının dışındaki color(display-p3 1 0 1) rengini örneklemeye çalışırsanız, damlalık aracı rengi sRGB alanındaki en yakın renge, yani macenta color(display-p3 0.92 0.2 0.97) değerine kırpar.

Son olarak, yeni HD renk biçimine yer açmak için Renk biçimi ayarı kullanımdan kaldırıldı.

Chromium sorunları: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409, 1392054

Geliştirilmiş kesme noktası kullanıcı deneyimi

Yeniden tasarlanan Ayrılma Noktaları bölmesi, özellikle ayrılma noktalarını devre dışı bırakma, düzenleme ve kaldırma gibi yaygın olarak kullanılan özelliklere hızlı bir şekilde erişebilmenizi sağlar.

Bazı önemli noktaları aşağıda bulabilirsiniz: - Duraklatma istisnalarının her ikisi de Ayrılma noktaları bölmesine taşındı ve daha açıklayıcı olması için metinle etiketlendi.

• Kesme noktaları dosyaya göre gruplanır, satır veya sütun numaralarına göre sıralanır ve daraltılabilir. .

• Bir ayrılma noktasının veya dosyanın üzerine gelindiğinde ayrılma noktalarını devre dışı bırakmak, kaldırmak ve düzenlemek için yeni seçenekler vardır. .

• Kesme noktası düzenleyicisini açmak için kesme noktasını düzenle düğmesini tıklayın. Buradan, ayrılma noktası koşulunu girebilir veya bir günlük noktasına geçebilirsiniz. .

Geliştirici Araçları ile nasıl hata ayıklama yapılacağını öğrenmek için JavaScript hata ayıklama referansı bölümüne bakın.

Chromium sorunları: 1407586, 1402891, 1402893

Özelleştirilebilir Kaydedici kısayolları

Kullanıcı akışlarını daha hızlı kaydetmek ve tekrar oynatmak için klavye kısayollarını kullanın.

Kaydedici, kullanıcı akışlarının daha hızlı kaydedilmesi ve tekrar oynatılması için birkaç kullanışlı klavye kısayolu sunar.

Kısayolları hatırlamıyor musunuz? Sorun değil, tüm kısayolları istediğiniz zaman görüntülemek için ? düğmesini tıklayabilirsiniz.

Bu kısayolları Ayarlar menüsünden de özelleştirebilirsiniz.

Farklı bir panelde çalışıyor ve kullanıcı işlemleri akışı kaydı başlatmak istiyorsanız başlamak için Geliştirici Araçları'ndaki Komut Menüsü'nden Yeni kayıt oluştur komutunu kullanın.

Chromium sorunu: 1339771

Angular için daha iyi söz dizimi vurgulama

Geliştirici Araçları, Angular HTML şablonlarında söz dizimi vurgulama özelliğini geliştirerek kodu okumanızı ve yapısını tanımanızı kolaylaştırdı. .

Chromium sorunları: 1385374, 1385678

Uygulama panelinde önbellekleri yeniden düzenleme

Önbellek Depolama bölmesi artık Uygulama panelinin Depolama bölümünde bulunabilir. Geri-ileri önbellek bölmesi, Arka Plan Hizmetleri bölümüne taşındı.

Chromium sorunu: 1407166

Çeşitli öne çıkan anlar

Bu sürümde yer alan bazı önemli düzeltmeler şunlardır:

• Geliştirici Araçları, kaynak eşlemelerini yüklerken Önbelleği devre dışı bırak ayarına uyacak şekilde güncellendi. (1407084)
• Öğeler paneli artık arama sonuçlarındaki ilk eşleşen öğeye anında otomatik olarak odaklanır. (1381853)
• Kaynak eşlemesi ve kesme noktaları güvenilirliğini iyileştirmek için çeşitli düzeltmeler. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
• Hata ayıklamayı daha kolay hale getirmek için Geliştirici Araçları artık ifadelerin gizli sınıf üyeleriyle değerlendirilmesini destekliyor. (1381806)

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