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

Jecelyn Yeen

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

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

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

Bu örnekte, 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 süresinin ötesinde ö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ı akışı ölçümü modunu destekliyor:

  • Gezinme raporları, tek bir sayfa yükleme işlemini analiz eder. En yaygın rapor türü gezinmedir. Mevcut sürümden önceki tüm Lighthouse raporları, gezinme raporlarıdır.
  • Zaman aralıkları raporları, genelde kullanıcı etkileşimlerini içeren herhangi bir zaman dilimini analiz eder.
  • Anlık görüntü raporları, genellikle kullanıcı etkileşiminden 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. Zaman aralığı modunu seçin ve Zaman aralığını başlat'ı tıklayın. Kaydırın ve sepete birkaç ürün ekleyin. İşlemi tamamladığınızda kullanıcı etkileşimlerinin Lighthouse raporunu oluşturmak için Bitiş zaman aralığı'nı 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ı başlıklı makaleyi inceleyin.

Chromium sorunu: 1291284

Performans analizleriyle ilgili güncellemeler

Performans analizleri panelinde iyileştirilmiş yakınlaştırma kontrolü

DevTools artık oynatma başlığı konumuna göre değil, fare imlecinize göre 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.

İşleme dönüştürülebilir analizler elde etmeyi ve paneli kullanarak web sitenizin performansını artırmayı öğrenmek için Performans Analizleri'ne bakın.

Chromium sorunu: 1313382

Performans kaydını silmeyi onaylama

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

Performans kaydını silmeyi 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, dar bir ekranda Geliştirici Araçları'nı açtığınızda Erişilebilirlik bölmesi, Daha fazla göster düğmesinin altında gizlenir. Sık sık erişilebilirlik sorunlarını ayıklıyorsanız artık daha kolay erişim için panoyu öne sürükleyebilirsiniz.

Nesne panelindeki bölmeleri yeniden sıralama

Chromium sorunu: 1146146

Tarayıcının dışından renk seçme

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

Stiller bölmesinde, renk seçiciyi açmak için herhangi bir renk önizlemesini tıklayın. Herhangi bir yerden renk seçmek için damlalığı kullanın.

Tarayıcının dışından 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ğerlerin önizlemesini doğru şekilde gösteriyor.

Bu örnekte, double işlevinin bir giriş parametresi a ve bir değişkeni x var. return satırına bir kesme noktası yerleştirin ve 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 satır içi değer önizlemesi iyileştirildi.

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 yeni bir Büyük blob'ları 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ılabiliyor:

  • Control / Command + üst karakter + Y tuşlarına basarak gezinme kenar çubuğunu (sol) açıp kapatma
  • Control / Command + üst karakter + H tuşlarına basarak hata ayıklayıcı kenar çubuğunu (sağ) açıp kapatın.

Kaynaklar paneli için yeni klavye kısayolları

Chromium sorunları: 1226363

Kaynak eşlemeleriyle ilgili iyileştirmeler

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

Genel hata ayıklama deneyimini iyileştirmek için kaynak haritalarıyla ilgili birkaç düzeltme aşağıda verilmiştir:

  • Satır içi komut dosyaları ve kaynak konumu için konum ile uzaklık arasındaki eşlemeyi düzeltme
  • Çerçevenin metin konumu için yedek bilgiler kullanma
  • Göreceli URL'leri çerçevenin URL'siyle düzgün şekilde çözün

Chromium sorunları: 1319828, 1318635, 1305475

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