Müşteri tarafı kodunuzu birleştirdikten, küçülttükten veya derledikten sonra bile okunabilir ve hata ayıklama yapılabilir durumda tutun. Kaynaklar panelinde kaynak kodunuzu derlenmiş kodunuzla eşlemek için kaynak eşlemelerini kullanın.
Ön işlemcileri kullanmaya başlama
Ön işlemcilerden gelen kaynak eşlemeleri, Geliştirici Araçları'nın küçültülmüş dosyalarınıza ek olarak orijinal dosyalarınızı yüklemesine neden olur.
Chrome, küçültülmüş kodunuzu çalıştırır ancak Kaynaklar panelinde, yazdığınız kod gösterilir. Kaynak dosyalarda kod adımlarını ayarlayabilir ve kodda adım adım ilerleyebilirsiniz. Bu durumda tüm hatalar, günlükler ve kod noktaları otomatik olarak eşlenir.
Bu sayede, geliştirme sunucunuz tarafından sunulan ve tarayıcı tarafından yürütülen kod yerine, kodu yazdığınız şekilde hata ayıklayabilirsiniz.
Kaynaklar panelinde kaynak haritaları kullanmak için:
- Yalnızca kaynak haritası oluşturabilen önişleyicileri kullanın.
- Web sunucunuzun kaynak haritalar yayınlayabileceğini doğrulayın.
Desteklenen bir önişleyici kullanma
Kaynak haritalarla birlikte kullanılan yaygın önişleyiciler aşağıdakileri içerir ancak bunlarla sınırlı değildir:
- Derleyiciler: Babel
- Derleyiciler: TypeScript ve Dart
- Kod sıkıştırıcılar: terser
- Paketleyiciler ve geliştirme sunucuları: Webpack, Vite, esbuild ve Parcel
Daha kapsamlı bir liste için Kaynak haritalar: Diller, araçlar ve diğer bilgiler başlıklı makaleyi inceleyin.
Ayarlar'da kaynak eşlemelerini etkinleştirme
Ayarlar > Tercihler > Kaynaklar bölümünde 
JavaScript kaynak haritaları'nı işaretlediğinizden emin olun.
Kaynak haritalarının başarıyla yüklenip yüklenmediğini kontrol etme
Geliştirici Kaynakları: Kaynak haritalarını manuel olarak görüntüleme ve yükleme başlıklı makaleyi inceleyin.
Kaynak eşlemeleriyle hata ayıklama
Hazır ve etkin kaynak haritalarla şunları yapabilirsiniz:
- Kaynaklar panelinde web sitenizin kaynaklarını açın.
Yalnızca yazdığınız koda odaklanmak için yazılan ve dağıtılan dosyaları dosya ağacında gruplandırın. Ardından
Yazar bölümünü genişletin ve orijinal kaynak dosyanızı Düzenleyici'de açın.