Çoğu tarayıcıda yerleşik geliştirici araçları bulunur. Bu geliştirici araçları genellikle bir konsol içerir. Konsol, o anda çalışan sayfayla ilgili size bilgi verir.
Konsola kaydedilen mesajlar, sayfayı oluşturan web geliştiricilerinden veya tarayıcının kendisinden gelir.
Tüm konsol mesajlarının bir önem düzeyi bulunur:
Verbose, Info, Warning veya Error.
Error mesajı, sayfanızda çözmeniz gereken bir sorun olduğu anlamına gelir.
Lighthouse tarayıcı hatası denetimi nasıl başarısız oluyor?
Lighthouse, konsolda günlüğe 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ıştığından emin olmak için Lighthouse'un bildirdiği her tarayıcı hatasını düzeltin.
Chrome Geliştirici Araçları, hataların nedenini izlemenize yardımcı olacak birkaç araç içerir:
- Geliştirici Araçları Konsolu, her hata metninin altında sorunlu kodun yürütülmesine neden olan çağrı yığınını gösterir.
- Her hatanın sağ üst köşesindeki bir bağlantı, hataya neden olan kodu gösterir.
Örneğin, bu ekran görüntüsünde iki hatanın olduğu bir sayfa gösterilmektedir:
Örnekteki ilk hata console.error() için yapılan bir çağrıdan gelen web geliştiricisinden gelir.
İkinci hata tarayıcıdan gelir ve sayfanın
komut dosyalarından birinde kullanılan bir değişkenin var olmadığını belirtir.
Geliştirici Araçları Konsolu, her hata metninin altında hatanın göründüğü çağrı yığınını belirtir.
Örneğin, ilk hata için Console, init işlevini çağıran ve doStuff işlevini çağıran bir (anonymous) işlevinin bulunduğunu belirtir.
Bu hatanın sağ üst tarafındaki pen.js:9 bağlantısını tıkladığınızda ilgili kod gösterilir.
Bu şekilde her hata için ilgili kodu incelemek, olası sorunları belirleyip çözmenize yardımcı olabilir.
Bir hatanın nedenini bulamıyorsanız arama motoruna hata metnini girmeyi deneyin. Sorununuza çözüm bulamıyorsanız Stack Overflow'da bir soru sormayı deneyin.
Bir hatayı düzeltemiyorsanız sorundan haberdar olduğunuzu kodda açıkça belirtmek için ilgili hatayı try…catch ifadesi içine alabilirsiniz.
Hatayı daha incelikli bir şekilde ele almak için catch blokunu da kullanabilirsiniz.