Chrome 106’daki geliştirici araçları, eklenen yeni özelliklerle iyileştirildi.
Hatayı kolayca bulamadığınızda hata ayıklama sıkıcı ve 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 ele alınan çok daha fazlasını yapabilirsiniz. Bu geliştirme araçları, özellikle artık kodlarını görselleştirmek ve hatalarını ayıklamak için etkileşimli ve basitleştirilmiş bir konsola sahip olan Angular, React ve Vue.js gibi JavaScript çerçeveleriyle çalışan geliştiriciler için çok önemlidir.
Bu yeni özelliklerden bazılarına daha yakından bakalım:
Chrome 106’daki yeni güncellemelerden tam olarak yararlanmak için varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta sürümlerini indirin. Kullanıcılarınızın en iyi müşteri deneyimine sahip olmasını sağlamak için web platformu API’lerinin test edilmesini ve sitenizdeki sorunları veya hataları hızla belirlemeyi sağlayan en son Geliştirici araçlarına erişebileceksiniz.
1. Yazan/Dağıtılana Göre Gruplandırılan Dosyalar
Artık dosyaları kaynak panelinde oluşturulan /dağıtılan olarak gruplayarak doğrudan uygulama bileşenlerinize gidebilirsiniz. Kaynak > 3 noktalı menü > Yazara/Dağıtılana Göre Grupla seçeneğine gidin . 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ı gezinme panelinde görünür durumdaydı, bu da tek bir dosya bulmayı zorlaştırıyordu.
2. Basitleştirilmiş Dosya Arama
Kaynak panelindeki aramanızı yalnızca ilgili dosyalarla sınırlayabilirsiniz. Chrome’un önceki sürümlerinde, çerçeve ve diğer üçüncü taraflar tarafından oluşturulan dosyalar arama sonuçlarında gösterilecek ve bu da arama öğesinin tanımlanmasını zorlaştıracaktı.
Bu güncelleme, Google arama hile sayfaları ile web tarayıcılarında aramanızı optimize etmenin devtools sürümüdür. Bu ayarı yapılandırmak için 3 noktalı menü > Yoksayma listesi kaynaklarını gizle seçeneğine gidin.
3. Üçüncü Taraf Komut Dosyalarını Gizle
Konsolunuzu dolduran üçüncü taraf komut dosyaları? Chrome 106, çerçeveler ve diğer üçüncü taraflar tarafından otomatik olarak oluşturulan komut dosyalarını gizlemenizi sağlamak için kaynak haritasına bir yoksayma listesi uzantısı ekledi.
Bu özelliği etkinleştirmek için Ayarlar > Yoksayma listesi > Bilinen üçüncü taraf komut dosyalarını otomatik olarak yoksayma listesine ekle seçeneğine gidin. Dosyaları tekrar açtığınızda, konsol yalnızca uygulamanızla ilişkili ilgili 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 konsolda bir hatayı tespit etmek için daha az zaman harcarsı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ü verir. Önceki sürümlerde sadece operasyona yol açan olaylar görülüyordu. En son devTools, tüm işlem zincirini ve bunların temel nedenlerini gösterir.
Google, Chrome 106’da bir console.createTask() yöntemi yapılandırmıştır . Bu yöntem, çerçevelerin konsolda yığın izlemeleri gerçekleştirmesini sağlar. Devtools kullanarak JavaScript hatalarını ayıklamak, krom kullanarak CSS hatalarını ayıklamak kadar kolaydır .
5. Performans Panelinde Etkileşimleri İzleyin
Uygulamanızın olası yanıt verme sorunlarını belirlemek için Performans panelindeki yeni Etkileşimleri izleyin. Chrome 106’da, tüm etkileşimler bir işlemden sonra Etkileşimler izinde gösterilir. Parça, etkileşimlerin kaynağını ve kimliklerini gösterir. İzleme, kaynağı tanımlamaya ve buna göre engellemeye yardımcı olur.
6. Performans Panelinde LCP Zamanlama Öngörüleri
En Büyük İçerikli Boyama (LCP) zamanlama ayrıntıları artık performans öngörüleri panelinde mevcuttur . LCP, web sayfasına yüklenmek için alınan görüntülerin veya metin bloklarının oluşturma süresi hakkında rapor veren hayati bir web performansı metriğidir. 2.5 saniye veya altı iyi bir performans puanıdır.
Analizleri görmek için performans paneli>3 noktalı menü-daha fazla geçiş ücreti>performans öngörüleri bölümüne gidin . Bir kaydı yeniden oynattığınızda, Ayrıntılar paneli yükleme zamanlamaları gösterecektir.
Chrome 106’daki Ek Güncellemeler
Chrome 106’daki diğer geliştirmeler şunları içerir:
Script kayıtlarınızı Kaydedici panelinden sorunsuz bir şekilde dışa aktarabilirsiniz . Önceki sürümlerde dışa aktarma düğmesinde bir sorun vardı.
Artık Stiller bölmesi SVG öğelerinde bir renk seçiciniz var.
Performans Öngörüleri panelinde mizanpajınızı bozan komut dosyalarını belirleyebilirsiniz .
LCP web yazı tiplerinin yollarını Performance Insights panelinde görüntüleyebilirsiniz.
Bu özellikler, tarayıcının geliştirme araçlarını kullanma şeklinizi iyileştirebilir.
Chrome 106’dan Ne Alırsınız
Chrome 106’daki geliştirme araçlarına yönelik en son iyileştirmeler, hata ayıklama sürecini daha hızlı hale getirir. Yeni güncellemeler, dosyaları gizlemenize, komut dosyalarını devre dışı bırakmanıza, kaydetmenize ve hata ayıklama sırasında uygulamanızın derinlemesine bir görünümüne sahip olmanıza olanak tanıyan basitleştirilmiş ve dinamik bir konsol aracılığıyla işlemleri görselleştirmeyi kolaylaştırır.
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 avantajların keyfini çıkarın.