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 panelindeki çift tıklama ve sağ tıklama etkinliklerini kaydedin

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

  • Büyütmek için kartı çift tıklayın
  • Kartı sağ tıklayıp içerik 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 panelindeki yeni zaman aralığı ve anlık görüntü modu

Artık sayfa yüklemenin ötesinde web sitenizin performansını ölçmek için Lighthouse'u kullanabilirsiniz.

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

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

  • Gezinme raporları, tek bir sayfa yüklemesini analiz eder. Gezinme, en sık kullanılan rapor türüdür. Geçerli sürümden önceki tüm Lighthouse raporları gezinme raporlarıdır.
  • Zaman aralıkları raporları, genellikle kullanıcı etkileşimlerini içeren rastgele bir dönemi analiz eder.
  • Anlık görüntü raporları, sayfayı belirli bir durumda, genellikle kullanıcı etkileşimde bulunduktan sonra analiz eder.

Örneğin, bu demo sayfasında alışveriş sepetine ürün ekleme performansını ölçelim. Zaman aralığı modunu seçin ve Başlangıç zaman aralığı'nı tıklayın. Ekranı kaydırıp alışveriş sepetine birkaç ürün ekleyin. İşiniz bittiğinde kullanıcı etkileşimlerinin Lighthouse raporunu oluşturmak için Zaman aralığını 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 analizi güncellemeleri

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

Geliştirici Araçları artık video yer imlecinin konumuna değil, fare imlecininize göre yakınlaştırma yapacak.İmleç tabanlı en yeni yakınlaştırma özelliğiyle, farenizi kanalın herhangi bir yerine hareket ettirebilir ve istediğiniz alana hemen yakınlaştırabilirsiniz.

Uygulanabilir analizler elde etmeyi ve panelden web sitenizin performansını iyileştirmeyi öğrenmek için Performans Analizleri'ne bakın.

Chromium sorunu: 1313382

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

Geliştirici Araçları artık performans kaydını silmeden önce bir onay iletişim kutusu gösteriyor.

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

Chromium sorunu: 1318087

Nesneler panelindeki bölmeleri yeniden sıralama

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

Örneğin, Geliştirici Araçları'nı dar bir ekranda açtığınızda Daha fazla göster düğmesinin altında Erişilebilirlik bölmesi gizlenir. Erişilebilirlik sorunlarıyla ilgili sık sık hata ayıklıyorsanız artık daha kolay erişim için bölmeyi öne sürükleyebilirsiniz.

Nesneler 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, bir renk seçiciyi açmak için herhangi bir renk önizlemesini tıklayı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 iyileştirilmiş satır içi değer önizlemesi

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

Bu örnekte, double işlevinde a giriş parametresi ve x değişkeni bulunmaktadır. return satırına bir ayrılma noktası ekleyip kodu çalıştırın. Satır içi önizleme, a ve x değerlerini doğru şekilde gösteriyor. 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. Bunu 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 panelindeki yeni klavye kısayolları

Kaynaklar panelinde artık iki yeni klavye kısayolu var:

  • Gezinme kenar çubuğunu (sol) Control / Command + Üst Karakter + Y tuşlarına basarak açın/kapatın
  • Hata ayıklayıcı kenar çubuğunu (sağ) Control / Command + Üst Karakter + H tuşlarını kullanarak açın/kapatın

Kaynaklar paneli için yeni klavye kısayolları

Chromium sorunları: 1226363

Kaynak eşleme iyileştirmeleri

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

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

  • Satır içi komut dosyaları ve kaynak konumu için konum ile ofset arasındaki eşlemeyi düzelt
  • Çerçevenin metin konumu için yedek bilgileri kullanın
  • Çerçevenin URL'si ile göreli URL'leri doğru şekilde çözümleme

Chromium sorunları: 1319828, 1318635, 1305475

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