TypeScript’te Debugging (Hata Ayıklama)

Kod yazmak bir şeydir, yazdığın kodun neden çalışmadığını bulmak başka bir şeydir. Yazılım geliştirmenin en kritik aşamalarından biri de debugging, yani hata ayıklama sürecidir. TypeScript ile çalışırken hataları fark etmek için kullanabileceğin çok güçlü araçlar vardır. Bu makalede, Visual Studio Code üzerinden nasıl adım adım hata ayıklama yapabileceğini öğreneceksin.

Debugging Nedir?

Debugging, bir programı satır satır çalıştırarak hangi satırda ne olduğunu anlamanı sağlayan süreçtir. Bu sayede hatalı davranışların nereden kaynaklandığını bulabilir ve düzeltebilirsin.

TypeScript projelerinde debugging sayesinde:

Değişkenlerin değerlerini görebilirsin,
Programın hangi satırda durduğunu izleyebilirsin,
Hatalı fonksiyonları tespit edebilirsin.

VS Code’da Debugging Ortamı Kurmak

1. `launch.json` Dosyasını Oluşturmak

Debugging işlemleri için önce Visual Studio Code’un nasıl çalışacağını belirten bir ayar dosyasına ihtiyacımız var: launch.json

Oluşturmak için:

Sol menüden “Run and Debug” sekmesine tıkla.
“create a launch.json file” seçeneğine tıkla.
“Node.js” seçeneğini seç.

Bu dosyada kodun çalıştırılmasıyla ilgili bilgiler yer alır. Örneğin kodun hangi dosyadan başlayacağı veya önce TypeScript derlemesi yapılması gerektiği gibi.

Örnek ayar:

"preLaunchTask": "tsc: build - tsconfig.json"

Bu satır sayesinde kod çalışmadan önce otomatik olarak derlenir.

2. Breakpoint (Durma Noktası) Ekleme

Breakpoint, programın çalışmasını belirli bir satırda duraklatmanı sağlar. Böylece program o satıra kadar çalışır ve durur, sen de o anki değerleri ve durumu gözlemleyebilirsin.

Nasıl eklenir?

Kod satırının sol kenarındaki boşluğa tıkla. Kırmızı bir nokta belirdiğinde breakpoint ayarlanmış olur.

Program çalıştığında o satıra gelince durur. Artık adım adım devam edebilirsin.

3. Kodun Satır Satır İzlenmesi

Breakpoint’te durduktan sonra, üstteki butonları kullanarak kodu satır satır işletebilirsin.

Buton	Anlamı
Step Over	Bir sonraki satıra geç
Step Into	Fonksiyonun içine gir
Step Out	Fonksiyondan dışarı çık
Restart	Debugging’i baştan başlat
Stop	Debugging’i durdur

Bu araçlar sayesinde karmaşık kodları bile rahatça izleyebilirsin.

4. Variables ve Watch Paneli

Kodun çalıştığı anda değişkenlerin o anki değerini görmek, debugging’in en büyük avantajlarından biridir.

Variables Paneli: Otomatik olarak tanımlı değişkenleri gösterir.
Watch Paneli: Senin manuel olarak izlemek istediğin değişkenleri gösterir.

Örneğin: let puan = 95; satırında puan değişkenini “Watch” penceresine ekleyerek sürekli takip edebilirsin.

5. Source Map (Kaynak Haritası) Nedir?

TypeScript dosyaları .ts uzantılıdır ama tarayıcı veya Node.js aslında .js dosyalarıyla çalışır. Debugging yaparken ise .ts dosyasındaki satırları izlemek isteriz. Bu bağlantıyı sağlayan şey source map dosyalarıdır.

Nasıl etkinleştirilir?

tsconfig.json dosyasında aşağıdaki ayarı aktif hale getir:

"sourceMap": true

Bu sayede .js.map uzantılı dosyalar oluşur ve .ts ile .js dosyaları birbiriyle eşleşir. Böylece hata ayıklarken doğrudan TypeScript dosyasını izleyebilirsin.

6. Diğer Faydalı Debug Ayarları

Debugging’i daha güvenli hale getirmek için şu ayarları da yapabilirsin:

"noEmitOnError": true
➤ Hatalı kod varsa .js dosyası oluşturulmaz.
"outDir": "./dist"
➤ Derlenmiş JavaScript dosyaları ayrı bir klasöre gider, proje düzenli olur.
"strict": true
➤ Tip hataları ve olası sorunlar daha erken fark edilir.

Sonuç

Debugging, yazdığın kodun nasıl çalıştığını anlamanın en etkili yollarından biridir. Sadece hata düzeltmek için değil, aynı zamanda öğrenmek için de harika bir araçtır. Özellikle TypeScript ile çalışıyorsan debugging özelliklerini iyi kullanmak seni bir adım öne geçirir.

Öğrendiğin tekniklerle artık bir programın: