Çoğu tarayıcıda yerleşik geliştirici araçları bulunur. Bu geliştirici araçları genellikle bir konsol içerir. Konsol, şu anda çalışan sayfa hakkında bilgi verir.
Konsola kaydedilen mesajlar, sayfayı oluşturan web geliştiricilerden veya tarayıcının kendisinden gelir.
Tüm konsol mesajlarının bir önem düzeyi vardır: Verbose, Info, Warning veya Error.
Error mesajı, sayfanızda çözmeniz gereken bir sorun olduğu anlamına gelir.
Lighthouse tarayıcı hatası denetimi neden başarısız olur?
Lighthouse, konsola kaydedilen tüm tarayıcı hatalarını işaretler:
Tarayıcı hatalarını düzeltme
Sayfanızın tüm kullanıcılarınız için beklendiği gibi çalışmasını sağlamak amacıyla Lighthouse'un bildirdiği her tarayıcı hatasını düzeltin.
Chrome Geliştirici Araçları, hataların nedenini bulmanıza yardımcı olacak birkaç araç içerir:
- Geliştirici Araçları Konsolu, her hatanın metninin altında sorunlu kodun yürütülmesine neden olan çağrı yığınını gösterir.
- Her hatanın sağ üst kısmındaki bağlantı, hataya neden olan kodu gösterir.
Örneğin, bu ekran görüntüsünde iki hata içeren bir sayfa gösterilmektedir:
Örnekte, ilk hata console.error() adresine yapılan bir çağrıdan kaynaklanan bir web geliştiriciden geliyor.
İkinci hata tarayıcıdan kaynaklanır ve sayfanın komut dosyalarından birinde kullanılan bir değişkenin mevcut olmadığını gösterir.
Geliştirici Araçları Konsolu, her hatanın metninin altında hatanın göründüğü çağrı yığınını belirtir.
Örneğin, Console ilk hata için (anonymous) işlevinin init işlevini, bu işlevin de doStuff işlevini çağırdığını belirtir.
Bu hatanın sağ üst kısmındaki pen.js:9 bağlantısını tıkladığınızda ilgili kodu görürsünüz.
Her hatayla ilgili kodu bu şekilde incelemek, olası sorunları belirlemenize ve çözmenize yardımcı olabilir.
Bir hatanın nedenini bulamıyorsanız hata metnini arama motoruna girmeyi deneyin. Sorununuzun çözümünü bulamıyorsanız Stack Overflow'da soru sormayı deneyin.
Bir hatayı düzeltemiyorsanız sorunun farkında olduğunuzu kodda açıkça belirtmek için hatayı try...catch ifadesiyle sarmalayabilirsiniz.
Hatayı daha iyi işlemek için catch bloğunu da kullanabilirsiniz.