Bu sayfa, Cloud Translation API ile çevrilmiştir.

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. CSS renk tanımı örnekleri.

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

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. Renk gamı sınır çizgisi.

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ölmesindeki bir renk kartelasını tıklayın. Renkleri, renk biçimleri arasında dönüştürme.

Dönüşüm 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 bir uyarı simgesi yerleştirir. Bu simge, kırpmayla ilgili sizi uyarır. Renk kırpma uyarısı.

Ayrıca yeni kısayol ile ekranınızdan renk seçebilirsiniz. Damlalığı etkinleştirmek için "c" tuşuna, 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.

Damlalığı etkinleştirin.

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

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 şunlardır: - Her iki duraklatma istisnası seçeneği de Ayrılma noktaları bölmesine taşındı ve daha açıklayıcı olması için metinle etiketlendi. İstisna seçeneklerini duraklat.

Kesme noktaları dosyaya göre gruplanır, satır veya sütun numaralarına göre sıralanır ve daraltılabilir.
Fareyle bir ayrılma noktasının veya dosyanın üzerine geldiğinizde 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. Kaydedici kısayolları.

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

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. Yeni bir kayıt komutu oluşturun.

Chromium sorunu: 1339771

Angular için daha iyi söz dizimi vurgulama

Geliştirici Araçları, Angular HTML şablonları için 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ı. Uygulama panelindeki önbellekler.

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ı'ndaki Diğer seçenekler > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresinden tweet atabilirsiniz.
Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.