React Debugger Kullanımı
React Debugger Kullanımı (img: medium.com)

Yazılımda “debug” ya da “debugging” olarak adlandırılır. Debugging, yazılım geliştirme sürecinde hataları (bug’ları) bulma ve düzeltme işlemidir. Bu terim, bir programın çalışırken yanlış veya beklenmeyen davranışlar sergilemesine neden olan sorunları analiz edip çözme sürecini ifade eder.

İşlem sıralaması

  • Hata ayıklama araçları (debugger) kullanarak kod adım adım izlenir.
  • Log veya console gibi yöntemlerle hatalar tespit edilir.
  • Breakpoints ekleyerek belirli noktalarda kodun durmasını sağlar ve değişkenlerin durumunu gözden geçirir. (Breakpoints işlemini Chrome DevTools’dan takip edebilirsiniz.)

Debugging İşlemi Neden Kullanılır?

Yukarıda da ifade edildiği gibi yazılım sürecindeki hataları bulma ve düzeltme işlemidir. Aşağıda bazı kullanım nedenleri örnek verilmiştir.

  1. Hata Tespiti: Kodun belirli bir noktasında neler olduğunu adım adım izleyerek, beklenen ve gerçekleşen davranışları kıyaslayabilirsiniz. Bu, özellikle karmaşık işlemlerde hatanın nerede olduğunu bulmak için çok yararlıdır.
  2. Değişken Kontrolü: Kodun çalışma anında değişkenlerin hangi değerlere sahip olduğunu görmek, doğru işlemlerin gerçekleşip gerçekleşmediğini anlamaya yardımcı olur.
  3. Program Akışını İzleme: Kodun hangi sırayla çalıştığını izleyerek mantık hatalarını tespit edebilirsiniz.
  4. Performans Sorunları: Hangi işlemlerin yavaş çalıştığını veya beklenenden fazla zaman aldığını izlemek için kullanabilirsiniz.

React’ta debugger Kullanımı

React’ta debugger kullanarak kodumuzu adım adım inceleyebilir ve kontrolleri sağlayarak hataları kolaylıkla tespit edebiliriz.

const [count, setCount] = useState(0);

const increment = () => {
  debugger; // Kod burada durur.
  setCount(count + 1);
};

return (
  <button onClick={increment}>Increase</button>
);

Yukarıdaki örnek kodu çalıştırdıktan sonra Chrome Developer Tools aracını açalım. Hata ayıklama işlemlerini Source sekmesinden adım adım kodunuzu takip ederek, değişkenlerde hangi verilerin tutulduğunu dahi imleç ile ilgili değişken üzerine gelerek görüntüleyebilirsiniz.

Gönderilere yorum yazabilir veya @huseyineskan instagram hesabımdan benimle iletişime geçebilirsiniz.