CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Source map

Source map ile transpile edilmiş kodda hata ayıklamayı öğrenirsin.

Source map nedir?

Node.js genellikle TypeScript veya Babel ile derlenen (transpile) kod çalıştırır. Derlenmiş kod satır numaraları orijinal kaynakla uyuşmaz; hata yığınları (stack trace) anlamsız görünür. Source map bu eşlemeyi tutar ve ayıklayıcıya orijinal kaynağı gösterir.

node --enable-source-maps dosya.js bayrağı source map desteğini açar. Hata yığınlarında derlenmiş konum yanında orijinal konum da görünür: at fonksiyonAdı (kaynak.ts:10:5). Bu, TypeScript projelerinde hatayı orijinal dosyada bulmayı kolaylaştırır. Source map dosyaları genellikle .js.map uzantısındadır ve derleme sırasında üretilir. Node.js bunları otomatik bulur ve yükler; ek yapılandırma gerekmez.

Hata yığınlarını okuma

Source map etkinleştirildiğinde hata yığınları iki konum gösterir: derlenmiş (dist/dosya.js:42:7) ve orijinal (src/dosya.ts:10:5). Sen orijinal konuma bakarak hatayı düzeltirsin.

Örnek yığın: Error: geçersiz değer\n at calculate (src/hesap.ts:10:5)\n at ana (src/index.ts:25:3). Bu, hatanın hesap.ts'in 10. satırında originating edildiğini ve index.ts'in 25. satırından çağrıldığını gösterir. Source map olmadan yığın yalnızca dist/hesap.js gösterirdi; bu dosya derlenmiş olduğu için okunması zordur. Source map ayrıca kesme noktalarını da orijinal satırlara koymanı sağlar; DevTools otomatik eşler.

Uygulama Hata yığını oluşturan betik yaz

function calculate(value) { if (value < 0) throw new Error("Negatif değer"); return value * 2; } tanımla. try { calculate(5); calculate(-1); } ile çağır. catch (e) { console.log("Hata: " + e.message); } ile yakala. console.log("Tamamlandı") ekle.

Başlangıç kodu

index.js
// calculate fonksiyonunu tanımla
// buraya yaz

// try ile çağır
// buraya yaz

// catch ile yakala
// buraya yaz

// "Tamamlandı" yazdır
// buraya yaz

Örnek çözüm

index.js
function calculate(value) {
  if (value < 0) throw new Error("Negatif değer");
  return value * 2;
}
try {
  calculate(5);
  calculate(-1);
} catch (e) {
  console.log("Hata: " + e.message);
}
console.log("Tamamlandı");

Beklenen çıktı

Hata: Negatif değer
Tamamlandı

Soru ve cevaplar

Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.

1 source map bayrağını tamamla

Soru 
node --enable-____-maps dosya.js
Cevap 
node --enable-source-maps dosya.js

Açıklama: --enable-source-maps bayrağı source map desteğini açar.

2 Source map neyi gösterir?

index.js
Error at calculate (src/calc.ts:10:5)
  • Yalnızca derlenmiş dosya konumunu
  • Yalnızca bellek adresini
  • Çalışma süresini
  • Orijinal kaynak dosyasındaki konumu Doğru cevap

Açıklama: Source map orijinal kaynak konumunu gösterir.

3 Kavramı rolüne eşle

Kavram Anlamı
source map Orijinal kaynağa eşleme
--enable-source-maps Bayrağı açar
.js.map Map dosya uzantısı
stack trace Çağrı yığını

Orta seviye bölümündeki tüm dersler

1 Events

  1. EventEmitter
  2. on ve emit
  3. önce
  4. removeListener
  5. error olayı
  6. Özet - Events

2 Stream'ler

  1. Stream nedir?
  2. Readable stream
  3. Writable stream
  4. pipe
  5. Transform stream
  6. Özet - Stream'ler

3 HTTP sunucusu

  1. http.createServer
  2. Request ve response
  3. Routing
  4. JSON yanıtı
  5. Query string
  6. Özet - HTTP sunucusu

4 Proje: Yardımcı kütüphane

  1. Modül tasarımı
  2. String yardımcıları
  3. Sayı yardımcıları
  4. Tarih yardımcıları
  5. Birleştirme

5 Express temelleri

  1. Express nedir?
  2. express()
  3. app.get
  4. app.post
  5. app.listen
  6. Özet - Express temelleri

6 Middleware

  1. Middleware nedir?
  2. app.use
  3. Router middleware
  4. Error middleware
  5. Body parser
  6. Özet - Middleware

7 Routing

  1. Rota parametreleri
  2. Query parametreleri
  3. express.Router
  4. Rota grupları
  5. Method chaining
  6. Özet - Routing

8 Proje: Quiz uygulaması

  1. Quiz modeli
  2. Soru ekleme
  3. Quiz oynatma
  4. Skor hesaplama
  5. Birleştirme

9 Async desenler

  1. Async iteration
  2. Async generators
  3. Concurrency limit
  4. Retry pattern
  5. Debounce ve throttle
  6. Özet - Async desenler

10 Buffer ve binary

  1. Buffer nedir?
  2. Buffer.from
  3. Buffer concat
  4. toString ve encoding
  5. Buffer slice
  6. Özet - Buffer

11 Process ve CLI

  1. process.argv
  2. process.env
  3. process.exit
  4. process.stdin/stdout
  5. Child process
  6. Özet - Process

12 Proje: Kütüphane API'si

  1. Model tasarımı
  2. Express uygulaması
  3. CRUD rotaları
  4. Middleware
  5. Birleştirme

13 npm ve paketler

  1. npm install
  2. package.json scripts
  3. devDependencies
  4. Semver
  5. npm publish
  6. Özet - npm

14 Hata yönetimi

  1. Error sınıfı
  2. try/catch
  3. Özel error
  4. error middleware
  5. Unhandled rejection
  6. Özet - Hata yönetimi

15 Test temelleri

  1. node:test
  2. assert
  3. describe ve it
  4. Before ve after
  5. Mock
  6. Özet - Test temelleri

16 Hata ayıklama

  1. node inspect
  2. Chrome DevTools
  3. console metotları
  4. util.inspect
  5. Source map
  6. Özet - Hata ayıklama

17 Tarih ve saat

  1. Date nesnesi
  2. Date metotları
  3. Intl.DateTimeFormat
  4. performance.now
  5. setTimeout ve setInterval
  6. Özet - Tarih ve saat

18 Crypto

  1. crypto modülü
  2. createHash
  3. randomBytes
  4. HMAC
  5. AES
  6. Özet - Crypto

19 URL ve query string

  1. URL nesnesi
  2. URLSearchParams
  3. URL özellikleri
  4. URL.resolve
  5. querystring
  6. Özet - URL ve query string

20 Orta seviye finali

  1. Proje tasarımı
  2. Express API
  3. fs kalıcılık
  4. Middleware
  5. Birleştirme