CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Chrome DevTools

Chrome DevTools ile Node.js hata ayıklamayı öğrenirsin.

Chrome DevTools ile ayıklama

Terminal yerine görsel bir arayüz istiyorsan Chrome DevTools kullanırsın. node --inspect-brk dosya.js komutu Node.js'i bir hata ayıklama sunucusu olarak başlatır. Sonra Chrome'da chrome://inspect adresini açar ve inspect bağlantısına tıklarsın.

--inspect-brk bayrağı kodu ilk satırda durdurur; böylece erken başlayan kodları yakalarsın. Yalnızca --inspect kullanırsan kod normal çalışır, ayıklayıcı bağlanana kadar durmaz. DevTools'ta kesme noktaları koymak için satır numarasının solundaki oluk (gutter) tıklanır. Değişkenler panelde canlı görünür; fare ile üzerlerine gelince değerleri genişletilir. Bu yöntem, karmaşık nesneleri görsel olarak incelemek için uygundur.

Uzaktan bağlantı

DevTools, Node.js sürecine WebSocket üzerinden bağlanır. Varsayılan bağlantı noktası (port) 9229'dur. Birden çok işlem çalıştırıyorsan --inspect-brk=9230 ile farklı bir bağlantı noktası seçersin.

Uzaktaki bir sunucuda çalışan Node.js'i ayıklamak için --inspect=0.0.0.0:9229 yazarsın; bu, dış ağdan bağlantıya izin datar (yalnızca güvenilir ağlarda). Chrome'da chrome://inspect sayfasında Configure... düğmesi ile hedef sunucuyu eklersin. Bağlandıktan sonra yerel ayıklamanın tüm olanakları (kesme noktası, değişken inceleme, çağrı yığını) uzaktan da çalışır. Bu, üretim (production) sunucusundaki bir hatayı yerel makineden ayıklamak için kullanışlıdır.

Uygulama DevTools için betik yaz

function divide(a, b) { if (b === 0) throw new Error("Sıfıra bölme"); return a / b; } tanımla. debugger; satırı ekle. console.log("Hazır: " + divide(10, 2)) ile yazdır.

Başlangıç kodu

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

// kesme noktası ekle
// buraya yaz

// "Hazır: ..." yazdır
// buraya yaz

Örnek çözüm

index.js
function divide(a, b) {
  if (b === 0) throw new Error("Sıfıra bölme");
  debugger;
  return a / b;
}
console.log("Hazır: " + divide(10, 2));

Beklenen çıktı

Hazır: 5

Soru ve cevaplar

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

1 İnceleme bayrağını tamamla

Soru 
node --____-brk dosya.js
Cevap 
node --inspect-brk dosya.js

Açıklama: --inspect-brk bayrağı ilk satırda durur.

2 Parçayı rolüne eşle

Kavram Anlamı
--inspect-brk İlk satırda durur
chrome://inspect DevTools'u açar
9229 Varsayılan bağlantı noktası
WebSocket Bağlantı protokolü

3 DevTools arayüzünü ne açar?

index.js
chrome://inspect
  • chrome://inspect Doğru cevap
  • node --version
  • npm install
  • node dosya.js

Açıklama: chrome://inspect DevTools'u açar.

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