Hatayı kolayca bulamadığınızda hata ayıklama sıkıcı ve hatta daha da sinir bozucu olabilir. Chrome 106 geliştirici araçları (devtools), hata ayıklama sürecini basitleştirerek daha kolay ve hızlı hale getirecek şekilde ayarlanmıştır.

Artık dosyaları kolayca sıralayabilir, aramanızı optimize edebilir, üçüncü taraf komut dosyalarını gizleyebilir, ayrıntılı performans raporlarına erişebilir ve bu makalede açıklanan çok daha fazlasını yapabilirsiniz. Bu geliştirme araçları, özellikle aşağıdakiler gibi JavaScript çerçeveleriyle çalışan geliştiriciler için önemlidir: Artık görselleştirmek ve hata ayıklamak için etkileşimli ve basitleştirilmiş bir konsola sahip olan Angular, React ve Vue.js onların kodu.

Bu yeni özelliklerden bazılarına daha yakından bakalım:

Chrome 106'daki yeni güncellemelerden tam olarak yararlanmak için Chrome'u indirin Kanarya, Dev, veya Beta sürümlerini varsayılan geliştirme tarayıcınız olarak kullanın. Web platformu API'lerinin test edilmesini sağlayan ve kullanıcılarınızın en iyi müşteri deneyimini yaşamasını sağlamak için sitenizdeki sorunları veya hataları hızlı bir şekilde tanımlayan en son Geliştirici araçlarına erişebileceksiniz.

instagram viewer

1. Yazanlara/Dağıtılanlara Göre Gruplanan Dosyalar

Artık dosyaları şu adreste gruplandırarak doğrudan uygulama bileşenlerinize gidebilirsiniz: yazılmış/konuşlandırılmış üzerinde kaynak panel. git Kaynak > 3 noktalı menü > Yazana/Dağıtılana Göre Grupla. Artık dosyaları açtığınızda panelde sadece konuşlandırılmış dosyalarınızı görebilirsiniz.

Önceki Chrome sürümlerinde, tüm kaynak kod dosyaları navigasyon panel, tek bir dosya bulmayı zorlaştırıyor.

2. Basitleştirilmiş Dosya Arama

Aramanızı kaynak panelde yalnızca ilgili dosyalarla sınırlayabilirsiniz. Chrome'un önceki sürümlerinde, çerçeve ve diğer üçüncü taraflarca oluşturulan dosyalar arama sonuçlarında gösteriliyor ve bu da arama öğesinin tanımlanmasını zorlaştırıyordu.

Bu güncelleme, web tarayıcılarında aramanızı optimize etmenin devtools sürümüdür. Google arama hile sayfaları. Bu ayarı yapılandırmak için şuraya gidin: 3 noktalı menü > Yoksayma listesi kaynaklarını gizle.

Üçüncü taraf komut dosyaları konsolunuzu dolduruyor mu? Chrome 106, çerçeveler ve diğer üçüncü taraflarca otomatik olarak oluşturulan komut dosyalarını gizlemenizi sağlamak için kaynak haritaya bir yok sayma listesi uzantısı ekledi.

Bu özelliği etkinleştirmek için şu adrese gidin: Ayarlar > Yoksay listesi > Bilinen üçüncü taraf komut dosyalarını otomatik olarak ekle yoksay listesine. Dosyaları yeniden açtığınızda, konsol yalnızca uygulamanızla ilişkili dosyaları gösterecektir. Artık kodunuzu dikkatiniz dağılmadan görebilirsiniz.

4. Ayrıntılı Yığın İzleri

Chrome 106'daki yeni bir özellik sayesinde konsoldaki bir hatayı tespit etmek için daha az zaman harcayacaksınız. Chrome Geliştirici araçları, size eşzamansız işlemlerin ve bunların temel nedenlerinin ayrıntılı bir görünümünü sunar. Önceki sürümlerde, yalnızca işleme neden olan olaylar görülebiliyordu. En son devTools, tüm işlem zincirini ve bunların temel nedenlerini gösterir.

Google bir yapılandırdı console.createTask() Chrome 106'daki yöntem. Bu yöntem, çerçevelerin konsolda yığın izlemeleri gerçekleştirmesini sağlar. Devtools kullanarak JavaScript hatalarını ayıklamak kadar kolaydır krom kullanarak CSS hata ayıklama.

5. Performans Panelinde Etkileşimleri İzleme

Şuradaki yeni Etkileşimleri izleyin: Verim uygulamanızın olası yanıt verme sorunlarını belirlemek için panel. Chrome 106'da, bir işlemden sonra tüm etkileşimler Etkileşimler kanalında gösterilir. İz, etkileşimlerin kaynağını ve kimliklerini gösterir. İzleme, kaynağı tanımlamaya ve buna göre onu durdurmaya yardımcı olur.

6. Performans Panelindeki LCP Zamanlama Öngörüleri

bu En Büyük İçerikli Boya (LCP) zamanlama ayrıntıları şu anda şu adreste mevcuttur: performans bilgileri paneli. LCP görüntülerin veya metin bloklarının web sayfasına yüklenmesi için gereken oluşturma süresini raporlayan hayati bir web performans ölçüsüdür. 2,5 saniye veya altı, iyi bir performans puanıdır.

Analizleri görmek için şuraya gidin: performans paneli>3 noktalı menü-daha fazla geçiş ücreti>performans içgörüleri. Bir kaydı tekrar oynattığınızda, Detaylar panel yükleme zamanlamasını gösterecektir.

Chrome 106'daki Ek Güncellemeler

Chrome 106'daki diğer geliştirmeler şunları içerir:

  • Komut dosyası kayıtlarınızı sorunsuz bir şekilde dışa aktarabilirsiniz. Ses kayıt cihazı panel. Önceki sürümlerde dışa aktarma düğmesinde bir sorun vardı.
  • Artık bir renk seçiciniz var. stiller bölmesi SVG öğeleri.
  • Düzeninizi bozan komut dosyalarını Performans Bilgileri panel.
  • LCP web yazı tipleri için yolları Performans Bilgileri panel.

Bu özellikler, tarayıcının geliştirme araçlarını kullanma şeklinizi geliştirebilir.

Chrome 106'dan Ne Alırsınız?

Chrome 106'daki geliştirici araçlarına yönelik en son iyileştirmeler, hata ayıklama sürecini hızlandırır. Yeni güncellemeler, işlemleri basitleştirilmiş ve dinamik bir konsol aracılığıyla görselleştirmeyi kolaylaştırır. dosyaları gizlemenize, komut dosyalarını devre dışı bırakmanıza, kaydetmenize ve uygulamanızı derinlemesine görmenize olanak tanır. hata ayıklama

Chrome 106'nın eklemeleri, uygulamanızı yönetmenize ve performansını optimize etmenize olanak tanır. Devam edin ve Chrome 106'nın en son sürümüne güncelleyerek bu avantajlardan yararlanın.