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

Jecelyn Yeen

Stiller bölmesiyle HD renk hata ayıklama

Web'e yeni CSS renk türleri ve alanları geliyor. DevTools'un, geliştiricilerin yüksek çözünürlüklü 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.

Stiller bölmesi artık CSS Color Level 4 spesifikasyonunda belirtilen 12 yeni renk alanını ve 7 yeni renk gamını destekliyor. Web'de kullanılabilen renk seçenekleri hakkında kapsamlı bilgi için Yüksek Tanımlı CSS Renk Kılavuzu'na bakın.

color(), lch(), oklab() ve color-mix() ile CSS renk tanımlarına ilişkin örnekleri aşağıda bulabilirsiniz. CSS renk tanımları örnekleri.

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

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çilen rengin gamını daha net anlamak için sRGB ve display-p3 gamlarını ayıran bir gama sınırı çizgisi de eklendi. Gamut sınır çizgisi.

DevTools, renkleri renk biçimleri arasında 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 Stiller bölmesinde bir renk örneğini Shift + tıklayın. Renkleri renk biçimleri arasında dönüştürme.

Dönüştürme işlemi yaparken, dönüştürülen öğenin alana sığıp sığmadığını bilmek önemlidir. Geliştirme Araçları, bu kırpma konusunda sizi uyarmak için dönüştürülen rengin yanına bir uyarı simgesi yerleştirir. Renk kırpma uyarısı.

Ayrıca, yeni kısayol ile ekranınızdan renk seçebilirsiniz. Renk seçiciyi 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ışında olan color(display-p3 1 0 1) rengini örneklemeye çalışırsanız damlalık aracı, rengi sRGB alanındaki en yakın renge (magenta color(display-p3 0.92 0.2 0.97)) kırpar.

Damlalığı etkinleştirin.

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

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

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

Yeniden tasarlanan Kesme Noktaları bölmesi, yaygın olarak kullanılan özelliklere (özellikle kesme noktalarını devre dışı bırakma, düzenleme ve kaldırma) hızlı erişmenizi sağlar.

Öne çıkan bazı noktalar: - Her iki duraklatma istisnası seçeneği de Kesme noktaları bölmesine taşındı ve daha anlaşılır olması için metinle etiketlendi. Duraklatma istisnası seçenekleri.

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

  • Bir kesme noktasının veya dosyanın üzerine gelindiğinde kesme noktalarını devre dışı bırakma, kaldırma ve düzenleme seçenekleri gösterilir. Kesme noktalarını devre dışı bırakmak için yeni seçenekler.

  • Kesme noktası düzenleyiciyi açmak için kesme noktasını düzenle düğmesini tıklayın. Buradan kesme noktası koşulunu girebilir veya logpoint'e geçebilirsiniz. Kesme noktası düzenleme iletişim kutusu.

Geliştirici Araçları ile nasıl hata ayıklayacağınızı öğrenmek için JavaScript hata ayıklama referansına 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 yeniden 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ıklayın. Kaydedici kısayolları

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

Farklı bir panelde çalışıyorsanız ve kullanıcı 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

DevTools, Angular HTML şablonları için söz dizimi vurgulamayı geliştirerek kodu okumanızı ve yapısını tanımanızı kolaylaştırdı. Angular HTML şablonlarında söz dizimi vurgulama.

Chromium sorunları: 1385374, 1385678

Önbellekleri Uygulama panelinde yeniden düzenleme

Önbellek Depolama 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şındı. Uygulama panelindeki önbellekler.

Chromium sorunu: 1407166

Diğer önemli noktalar

Bu sürümdeki önemli düzeltmelerden bazıları şunlardır:

  • Geliştirici Araçları, kaynak eşlemeleri 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ıyor. (1381853)
  • Kaynak harita ve kesme noktası güvenilirliğini artırmak için çeşitli düzeltmeler yapıldı. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
  • Hata ayıklamayı kolaylaştırmak için DevTools artık özel sınıf üyeleriyle ifadelerin değerlendirilmesini destekliyor. (1381806) Özel sınıf üyeleri içeren ifadeleri değerlendirme.

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