Tarayıcıda kullanılan hata ayıklama teknikleri

 (alan.norbauer.com)
5 puan yazan GN⁺ 2023-11-12 | 1 yorum | WhatsApp'ta paylaş

Tarayıcı hata ayıklayıcısından yararlanma ipuçları

  • Gelişmiş koşullu kesme noktaları

    • Yan etkileri olan ifadeler kullanarak koşullu kesme noktalarının işlevini genişletme
    • Logpoint/tracepoint ile yürütmeyi durdurmadan konsola log kaydedebilme
    • Çalışma sayısını saymak için console.count kullanma
    • Başlıca tarayıcılar logpoint/tracepoint'i destekler (Mayıs 2020 itibarıyla)

  • Watch penceresinden yararlanma

    • Watch penceresinde console.log kullanılabilir
    • DOM değişimi anında ifade çalıştırmak için DOM değişim kesme noktası ayarlayıp watch ifadesi ekleme

  • Çağrı yığınını izleme

    • Fonksiyon çağrı yığınını izleyerek uyuşmayan çağrıları bulma
    • Çağrı yığınını kontrol etmek için koşullu kesme noktasında console.trace kullanma

  • Program davranışını değiştirme

    • Program davranışı tarayıcı içinde anında değiştirilebilir
    • Fonksiyon parametrelerini override ederek davranışı ayarlama

  • Basit performans profilleme

    • Konsol zamanlama API'sini kullanarak kod çalışma süresini ölçme
    • Süre ölçümü için console.time('label') ve console.timeEnd('label') kullanma

  • Fonksiyon arity'sinden yararlanma

    • Kesme noktasını yalnızca belirli sayıda argümanla çağrıldığında etkinleştirme
    • Fonksiyon çağrılarında argüman sayısı uyumsuzluklarını bulmak için kullanma

  • Zamandan yararlanma

    • Sayfa yüklendikten belirli bir süre sonra kesme noktasını etkinleştirme
    • Kesme noktasını belli bir süre boyunca atlayıp yalnızca sonrasında etkinleştirme

  • CSS'ten yararlanma

    • Hesaplanmış CSS değerine göre kesme noktasını etkinleştirme

  • Yalnızca çift sayılı çağrılarda durdurma

    • Kesme noktasını yalnızca çift numaralı çalıştırmalarda etkinleştirme

  • Örnekleme yoluyla durdurma

    • Kesme noktasını yalnızca yürütmenin rastgele örneklerinde etkinleştirme

  • Belirli satırda durdurmama

    • Belirli bir satırda durmamak için "Never Pause Here" seçeneğini kullanma

  • Otomatik instance ID atama

    • Her sınıf instance'ına otomatik olarak benzersiz bir ID atama

  • Programatik olarak açıp kapatma

    • Koşullu kesme noktasını programatik olarak açıp kapatmak için global boolean kullanma

  • monitor() sınıf çağrısı

    • Sınıf metodu çağrılarını izlemek için Chrome'un monitor komutunu kullanma

  • Fonksiyon çağırma ve hata ayıklama

    • Konsolda debugger çağırdıktan sonra hata ayıklamak için fonksiyonu çağırma

  • URL değiştiğinde yürütmeyi durdurma

    • Tek sayfa uygulamalarında URL değişmeden önce yürütmeyi durdurma

  • Özellik okuma hata ayıklaması

    • Nesnenin bir özelliği her okunduğunda kesme noktasını etkinleştirme

  • copy() kullanımı

    • Tarayıcıdan doğrudan panoya bilgi kopyalamak için copy() konsol API'sini kullanma

  • HTML/CSS hata ayıklama

    • HTML/CSS sorunlarını teşhis etmek için JS konsolunu kullanma
    • JS devre dışıyken DOM'u inceleme
    • Koşullu olarak görünen DOM öğelerini inceleme
    • DOM snapshot kaydetme
    • Odaklanmış öğeyi izleme
    • Kalın yazı tipine sahip öğeleri bulma
    • O anda seçili öğeye referans verme
    • Olayları izleme

GN⁺ görüşü

Bu yazının en önemli yanı, geliştiricilerin tarayıcı hata ayıklayıcısını kullanarak kodu daha verimli biçimde hata ayıklayıp sorun çözebilmesi için çeşitli teknikler ve ipuçları sunmasıdır. Bu bilgiler yazılım geliştiricileri için çok yararlıdır; özellikle karmaşık hataları izlerken veya performans sorunlarını çözerken zaman kazandırdığı için ilgi çekicidir.

İlgili okumalar

1 yorum

 
GN⁺ 2023-11-12
Hacker News görüşleri

  • Tarayıcıya yerleşik hata ayıklama araçlarının gelişimi

    • Tarayıcıya yerleşik hata ayıklama araçları son birkaç on yılda büyük ölçüde gelişti.
    • Bir JavaScript geliştiricisi olarak, tarayıcıda sezgisel kod hata ayıklamayı mümkün kılan herkese teşekkür ediyorum.
    • Backend geliştirme yaparken ya da başka dillerle çalışırken, modern tarayıcıların hata ayıklama araç ekosistemini özlüyorum.

  • debugger ifadesinin kullanımı

    • debugger; ifadesini kullanmak, Chrome debugger'daki özyinelemeli stack'i yenmenin tek yolu.
    • Site ziyaretçilerinin kendi obfuscate edilmiş ana sayfalarını çözümlemesini engellemek için hata ayıklama tuzakları kullanan bir örnekten bahsediliyor.

  • NodeJS backend hata ayıklamanın zorlukları

    • Bir Python/Elixir programcısı olarak sık sık pdb.set_trace()/IEx.pry() kullanıyorum.
    • Karmaşık bir NodeJS backend'ini devralıp uygun hata ayıklama araçları olmadan çalışırken zorlandım.
    • console.log hata ayıklamaya geri dönmek zorunda kaldım ve bu oldukça ilkel hissettirdi.
    • Uygun bir hata ayıklama REPL'i olmamasına şaşırıyor ve yardım istiyor.

  • Werkzeug önerisi

    • Django backend geliştirmede Werkzeug kullanılması öneriliyor.
    • Her exception oluştuğunda tarayıcıda bir "PDB" shell'i kullanmayı sağlıyor.

  • IIFE'nin yerel değişkenlerine erişim yöntemi

    • Immediately Invoked Function Expression (IIFE) içindeki yerel değişkenlere nasıl erişileceğine dair bir soru.
    • Debugger'ın IIFE kapsamındaki kodu durdurmasına gerek kalmadan bunu yapmanın bir yolu araştırılıyor.

  • UI string'leri üzerinden hata ayıklama yöntemi

    • Network panelinde ağ isteklerinin kaydı başlatılır.
    • Sol kenar çubuğundaki arama kullanılarak bulunmak istenen kod/UI string'i girilir.
    • Bundle edilmiş js chunk dosyasında sonuç bulunur ve "Sources" içinde açılarak debugger ifadesi yerleştirilir.

  • Koşullu breakpoint kullanarak hata ayıklama

    • {configOption: true} ifadesini {get configOption() { debugger; return true; }} biçimine dönüştürmenin bir yolu soruluyor.

  • Chrome'a özgü 'Monitor Events for Element' özelliği

    • 'Monitor Events for Element' özelliğinden ve bunun Chrome'a özgü olduğundan bahsediliyor.
    • Firefox için bir alternatif olup olmadığı merak ediliyor.

  • queryObjects API'sinin yokluğu

    • Belirli bir constructor ile oluşturulmuş tüm nesnelerin listesini döndüren queryObjects API'sinden bahsediliyor.
    • Örneğin queryObjects(Function) kullanılarak heap'teki tüm fonksiyonların listesi alınabiliyor.

  • İzleme değişkenlerini kullanmanın zorluğu

    • İzleme değişkenlerini çalıştırmakta zorlanılıyor.
    • Yalnızca global değişkenlerin izlenebildiği varsayılıyor, ancak beklendiği gibi çalışmadığı için log'lar değerlerle dolduruluyor.
    • Konsolun değişkenleri ve ayar değerlerini görüntüleyip test edebileceği, Data.gui tarzı bir UI eklenmesi gerektiği görüşü ve buna ilgili bir CodePen bağlantısından bahsediliyor.