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 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'dur.

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ı başlıklı makaleyi inceleyin.

Chromium sorunu: 1291284

Performans analizleri güncellemeleri

Performans Analizleri panelinde yakınlaştırma kontrolü iyileştirildi

DevTools artık oynatma çubuğu konumu yerine fare imlecinizle yakınlaştıracak.En son 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 iyileştirebileceğinizi öğrenmek için Performans Analizleri başlıklı makaleyi inceleyin.

Chromium sorunu: 1313382

Performans kaydını silmeyi onaylama

DevTools artık performans kaydını silmeden önce bir 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, 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ı dışında renk seçme

Geliştirici Araçları artık tarayıcı dışında renk seçmeyi desteklemektedir. Daha önce yalnızca tarayıcıda renk seçebiliyordunuz.

Stiller bölmesinde, renk seçiciyi açmak için herhangi bir renk önizlemesini tıklayın. Damlalığı kullanarak istediğiniz yerden renk seçin.

Tarayıcı dışında 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 kesme noktası koyun 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, sanal kimlik doğrulayıcılar için yeni Büyük blob'ları destekler onay kutusu eklendi.

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üzeltme
  • Çerçevenin metin konumu için yedek bilgileri kullanma
  • 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şmenize, en yeni web platformu API'lerini test etmenize 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.