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

Jecelyn Yeen

Stil bölmesiyle HDR renginde hata ayıklama

Web'e yeni CSS renk türleri ve boşlukları geliyor. DevTools'un, geliştiricilerin yüksek çözünürlüklü renk oluşturmasına, dönüştürmesine ve hata ayıklamasına yardımcı olacak yeni araçlar sunması da aynı derecede heyecan verici.

Stiller bölmesi artık CSS Renk Düzeyi 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 edinmek için Yüksek Çözünürlüklü CSS Renk Kılavuzu'na göz atın.

color(), lch(), oklab() ve color-mix() içeren CSS renk tanımları örnekleri aşağıda verilmiştir. 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 renk karışımı sonucu.

Renk seçici, daha fazla özellikle tüm yeni renk alanlarını destekler. Örneğin, color(display-p3 1 0 1) renginin kartelasını tıklayın. Ayrıca, seçtiğiniz rengin gamutunu daha net bir şekilde anlamak için sRGB ve display-p3 gamutlarını ayıran bir gamut sınır çizgisi de eklendi. Bir 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 Shift + Stiller bölmesinde bir renk paletini tıklayın. Renkleri renk biçimleri arasında dönüştürme.

Dönüşüm işlemini yaparken, dönüşümün alana sığacak şekilde kırpılıp kırpılmadığını bilmeniz önemlidir. DevTools, dönüştürülen rengin yanına bu kırpma işlemiyle ilgili sizi uyaran bir uyarı simgesi yerleştirir. Renk kırpma uyarısı.

Ayrıca, yeni kısayol sayesinde ekranınızdan renk seçebilirsiniz. Damlalığı etkinleştirmek için "c", 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 (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ının desteği sonlandırıldı. Renk biçimi ayarı için desteğin sonlandırılması.

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

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

Yeniden tasarlanan Duraklatma noktaları bölmesi, özellikle duraklatma noktalarını devre dışı bırakma, düzenleme ve kaldırma gibi sık kullanılan özelliklere hızlıca erişmenize olanak tanır.

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

  • Kesme noktaları dosyaya 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.

  • Fareyle bir kesme noktasının veya dosyanın üzerine geldiğinizde kesme noktalarını devre dışı bırakma, kaldırma ve düzenlemeye yönelik yeni seçenekler vardır. Kesme noktalarını devre dışı bırakmak için yeni seçenekler.

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

DevTools ile nasıl hata ayıklayacağınızı öğrenmek için JavaScript hata ayıklama referansı başlıklı makaleyi inceleyin.

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

Hatta bu kısayolları Ayarlar menüsünden ö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 DevTools'daki 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ı için söz dizimi vurgulama.

Chromium sorunları: 1385374, 1385678

Uygulama panelinde önbellekleri yeniden düzenleme

Önbellek Depolama Alanı bölmesi artık Uygulama panelinin Depolama bölümünde, Geri/ileri önbellek bölmesi ise Arka Plan Hizmetleri bölümüne taşındı. Uygulama panelindeki önbellekler.

Chromium sorunu: 1407166

Diğer öne çıkan özellikler

Bu sürümdeki 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 eşleşen ilk öğeye anında otomatik olarak odaklanır. (1381853)
  • Kaynak haritayı ve kesme noktalarının güvenilirliğini iyileştirmeye yönelik çeşitli düzeltmeler. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
  • DevTools, hata ayıklama işlemini kolaylaştırmak için artık ifadeleri özel sınıf üyeleriyle değerlendirmeyi 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, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve sitenizdeki sorunları kullanıcılarınızdan önce 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 başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.