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

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

Jecelyn Yeen

Stiller bölmesiyle HD renkte hata ayıklama

Yeni CSS renk türleri ve alanları web'de kullanıma sunuluyor! Geliştirici Araçları'nın, geliştiricilerin Yüksek Tanımlı renk oluşturmasına, dönüştürmesine ve hatalarını ayıklamasına yardımcı olacak yeni araçlar sunması da aynı derecede heyecan verici.

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

color(), lch(), oklab() ve color-mix() kullanılan CSS renk tanımlarının örneklerini aşağıda bulabilirsiniz. CSS renk tanımlarıyla ilgili örnekler.

color-mix() işlevini kullanırken nihai renk çıkışını Hesaplanan bölmesinde görüntüleyebilirsiniz. rengi karıştırma sonucunu görebilirsiniz.

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 ve display-p3 gamlarını ayıran bir gam sınır çizgisi de eklendi. Gamut sınır çizgisi.

Geliştirici Araçları, renkleri renk biçimleri arasında dönüştürmeyi destekler. Dönüştürme pop-up penceresine erişmek için Renk Biçimini Değiştir simgesini veya Shift simgesini tıklayıp Stiller bölmesindeki bir renk kartelasını tıklamanız yeterlidir.

Dönüştürme sırasında, dönüşümün alana sığacak şekilde kırpılıp kırpılmadığını bilmek önemlidir. Geliştirici Araçları, dönüştürülen rengin yanına bu kırpma işlemiyle ilgili uyarı simgesi yerleştirir. Renk kırpma uyarısı.

Ayrıca, yeni kısayolla ekranınızdan renk seçebilirsiniz. Damlalığı etkinleştirmek için "c" tuşuna, devre dışı bırakmak içinse Escape tuşuna basın. Damlalık aracı, yalnızca sRGB renk alanındaki renkleri örnekler. Örneğin, sRGB renk alanının dışında olan 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) olacak şekilde 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ılmıştır. Renk biçimi ayarı kullanımdan kaldırılıyor.

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

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

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

Öne çıkan bazı 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.

Ayrılma noktaları dosyaya göre gruplandırılır, satır veya sütun numaralarına göre sıralanır ve daraltılabilir.
Fareyle bir kesme 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 bulunur.
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ıklayacağınızı öğrenmek için JavaScript hata ayıklama referansı konusuna bakın.

Chromium sorunları: 1407586, 1402891, 1402893

Özelleştirilebilir Kaydedici kısayolları

Kullanıcı akışlarını daha hızlı kaydetmek ve yeniden 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 kullanışlı birkaç 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ıklayın. Kaydedici kısayolları.

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

Farklı bir panelde çalışıyor ve bir 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 kayıt komutu oluştur.

Chromium sorunu: 1339771

Angular için daha iyi söz dizimi vurgulama

Geliştirici Araçları, Angular HTML şablonları için söz dizimi vurgulamasını 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 Alanı bölmesi artık Uygulama panelinin Depolama bölümünde bulunabilir. Geri-ileri önbellek bölmesi ise Arka Plan Hizmetleri bölümüne taşınmıştır. Önbellekler'i tıklayın.

Chromium sorunu: 1407166

Öne çıkan çeşitli unsurlar

Bu sürümde yapılan bazı dikkate değer düzeltmeler şunlardır:

Geliştirici Araçları, kaynak haritaları yüklerken Önbelleği devre dışı bırak ayarını dikkate alacak şekilde güncellenmiştir. (1407084)
Öğeler paneli artık arama sonuçlarındaki ilk eşleşen öğeye anında otomatik odaklama yapıyor. (1381853)
Kaynak eşleme ve kesme noktası güvenilirliğini iyileştirmek için çeşitli düzeltmeler yapıldı. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
Hata ayıklamayı daha iyi kolaylaştırmak için Geliştirici Araçları artık ifadeleri özel sınıf üyeleriyle değerlendirmeyi destekliyor. (1381806)

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

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

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.