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

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

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. Renk kırpma uyarısı..

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.

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ı 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. İ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. Kesme noktalarını dosyaya göre gruplandırın..

  • 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 noktalarını devre dışı bırakmak için yeni seçenekler..

  • 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. Kesme noktası düzenleme iletişim kutusu..

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ında söz dizimi vurgulama özelliğini geliştirerek kodu okumanızı ve yapısını tanımanızı kolaylaştırdı. Angular HTML şablonları için söz dizimi vurgulama..

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) Özel sınıf üyeleriyle ifadeleri değerlendirme.

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