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:
- Neden çalışmadığını,
- Hangi satırda takıldığını,
- Hangi değişkenin yanlış değeri aldığını
kolayca bulabilir ve çözebilirsin.
Devam Et!
Debugging temellerini öğrendiğine göre artık TypeScript’in veri tiplerini ve gelişmiş özelliklerini keşfetmeye hazırsın.
Bir sonraki adımda seni TypeScript’in temel veri türleri bekliyor.