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

Jecelyn Yeen

Kaydedici panelindeki çift tıklama ve sağ tıklama etkinliklerini kaydedin

Kaydedici paneli artık çift tıklama ve sağ tıklama etkinliklerini yakalayabilir.

Kaydedici panelinde çift tıklama ve sağ tıklama etkinliklerini yakalama

Bu örnekte bir kayıt başlatın ve aşağıdaki adımları uygulamayı deneyin:

  • Kartı büyütmek için çift tıklayın
  • Kartı sağ tıklayın ve bağlam menüsünden bir işlem seçin

Kaydedici'nin bu etkinlikleri nasıl yakaladığını anlamak için adımları genişletin:

  • Çift tıklama, type: doubleClick olarak yakalanır.
  • Sağ tıklama etkinliği type: click olarak yakalanır ancak button özelliği secondary olarak ayarlanır. Normal bir fare tıklamasının button değeri primary'dır.

Chromium sorunları: 1300839, 1322879, 1299701, 1323688

Lighthouse panelinde yeni zaman aralığı ve anlık görüntü modu

Artık web sitenizin performansını sayfa yükleme dışında ölçmek için Lighthouse'u kullanabilirsiniz.

Lighthouse panelinde yeni zaman aralığı ve anlık görüntü modu

Lighthouse paneli artık 3 kullanıcı işlemleri akışı ölçüm modunu desteklemektedir:

  • Gezinme raporları tek bir sayfa yükleme işlemini analiz eder. Gezinme, en yaygın rapor türüdür. Mevcut sürümden önceki tüm Lighthouse raporları gezinme raporlarıdır.
  • Etkileşim süreleri raporları, genellikle kullanıcı etkileşimlerini içeren herhangi bir zaman dilimini analiz eder.
  • Anlık görüntü raporları, genellikle kullanıcının sayfayla etkileşime geçmesinden sonra olmak üzere sayfayı belirli bir durumda analiz eder.

Örneğin, bu demo sayfasında alışveriş sepetine ürün ekleme performansını ölçelim. Dönem modunu seçin ve Dönem başlat'ı tıklayın. Ekranı kaydırarak alışveriş sepetine birkaç ürün ekleyin. İşlemi tamamladığınızda, kullanıcı etkileşimlerinin Lighthouse raporunu oluşturmak için Dönemi sonlandır'ı tıklayın.

Zaman aralığı modu

Her modun benzersiz kullanım alanları, avantajları ve sınırlamaları hakkında bilgi edinmek için Lighthouse'taki kullanıcı akışları bölümüne bakın.

Chromium sorunu: 1291284

Performans analizleri güncellemeleri

Performans Analizleri panelindeki iyileştirilmiş yakınlaştırma denetimi

DevTools artık oynatma çubuğu konumu yerine fare imlecinizle yakınlaştıracak.En yeni imleç tabanlı yakınlaştırma özelliğiyle farenizi parçanın herhangi bir yerine taşıyabilir ve istediğiniz alanı hemen yakınlaştırabilirsiniz.

Paneli kullanarak nasıl işlem yapılabilir analizler elde edebileceğinizi ve web sitenizin performansını nasıl artırabileceğinizi öğrenmek için Performans Analizleri başlıklı makaleyi inceleyin.

Chromium sorunu: 1313382

Performans kaydını silmek için onaylayın

DevTools artık performans kaydını silmeden önce bir onay iletişim kutusu gösteriyor.

Performans kaydını silme işlemini onaylama

Chromium sorunu: 1318087

Nesne panelindeki bölmeleri yeniden sıralama

Artık Öğeler panelindeki bölmeleri tercihinize göre yeniden sıralayabilirsiniz.

Örneğin, DevTools'u dar bir ekranda açtığınızda Erişilebilirlik bölmesi Daha fazla göster düğmesinin altına gizlenir. Erişilebilirlik sorunlarında sık sık hata ayıklama yapıyorsanız artık daha kolay erişmek için bölmeyi öne sürükleyebilirsiniz.

Nesne panelindeki bölmeleri yeniden sıralama

Chromium sorunu: 1146146

Tarayıcının dışında bir renk seçme

Geliştirici Araçları artık tarayıcının dışında renk seçmeyi destekliyor. Daha önce, yalnızca tarayıcı içinden bir renk seçebiliyordunuz.

Stiller bölmesinde herhangi bir renk önizlemesini tıklayarak renk seçiciyi açın. İstediğiniz yerden renk seçmek için damlalık aracını kullanın.

Tarayıcının dışında bir renk seçme

Chromium sorunu: 1245191

Hata ayıklama sırasında satır içi değer önizlemesi iyileştirildi

Hata ayıklayıcı artık satır içi değer önizlemesini doğru şekilde gösteriyor.

Bu örnekte, double işlevinin bir a giriş parametresi ve x değişkeni vardır. return satırına bir ayrılma noktası ekleyip kodu çalıştırın. Satır içi önizlemede a ve x değerleri doğru şekilde gösteriliyor. Daha önce hata ayıklayıcı, satır içi önizlemede x değerini göstermiyordu.

Hata ayıklama sırasında iyileştirilmiş satır içi değer önizlemesi

Chromium sorunu: 1316340

Sanal kimlik doğrulayıcılar için büyük blob'ları destekleme

WebAuthn sekmesinde artık sanal kimlik doğrulayıcılar için Büyük blob'u destekler onay kutusu bulunuyor.

Bu onay kutusu varsayılan olarak devre dışıdır. Bu özelliği yalnızca yerleşik anahtarları destekleyen ctap2 protokolüne sahip kimlik doğrulayıcılar için etkinleştirebilirsiniz.

Sanal kimlik doğrulayıcılar için büyük blob'ları destekleme

Chromium sorunu: 1321803

Kaynaklar panelinde yeni klavye kısayolları

Kaynaklar panelinde artık iki yeni klavye kısayolu kullanılabilir:

  • Denetimli / Komut + Üst Karakter + Y tuşlarını kullanarak gezinme kenar çubuğunu (solda) açın veya kapatın.
  • Denetleyici / Komut + Üst Karakter + H tuşlarını kullanarak hata ayıklayıcı kenar çubuğunu (sağda) açın veya kapatın.

Kaynaklar paneli için yeni klavye kısayolları

Chromium sorunları: 1226363

Kaynak harita iyileştirmeleri

Geliştiriciler daha önce aşağıdaki işlemler sırasında rastgele hatalarla karşılaşıyordu:

Genel hata ayıklama deneyimini iyileştirmek için kaynak haritalarda yapılan birkaç düzeltmeyi aşağıda bulabilirsiniz:

  • Satır içi komut dosyaları ve kaynak konum için konum ile ofset arasındaki eşlemeyi düzeltin
  • Çerçevenin metin konumu için yedek bilgileri kullanın
  • Bağlantılı URL'leri çerçevenin URL'siyle doğru şekilde çözme

Chromium sorunları: 1319828, 1318635, 1305475

Ö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 özellikleri, güncellemeleri veya Geliştirici Araçları ile ilgili diğer konuları görüşmek 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.