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.
Normalde yaptığınız gibi bir kesme noktası ayarlayın. Örneğin, günlük noktası. Ardından kodu çalıştırın.
Düzenleyen, dağıtılan dosyanın bağlantısını alt kısımdaki durum çubuğuna yerleştirir. Benzer şekilde, dağıtılan CSS dosyaları için de bu işlemi yapar.
Konsol çekmecesini açın. Bu örnekte, günlük noktasının mesajının yanında Console, dağıtılan dosyanın değil, orijinal dosyanın bağlantısını gösterir.
Duraklatma noktası türünü normal olarak değiştirin ve kodu tekrar çalıştırın. Bu sefer yürütme duraklatılır.
Çağrı Yığını bölmesinde dağıtılan dosyanın değil, orijinal dosyanın adının gösterildiğini unutmayın.
Düzenleyici'nin alt kısmındaki durum çubuğunda, dağıtılan dosyanın bağlantısını tıklayın. Kaynaklar paneli sizi ilgili dosyaya yönlendirir.
DevTools, dağıtılan bir dosyayı açtığınızda //# sourceMappingURL yorumunu ve ilişkili orijinal dosyayı bulursa sizi bilgilendirir.
Düzenleyici'nin dağıtılan dosyayı otomatik olarak okunaklı hâle getirdiğini görebilirsiniz. Gerçekte, //# sourceMappingURL yorumu hariç tüm kodu tek bir satırda içerir.
eval() adlı kullanıcının #sourceURL ile yaptığı aramalar
#sourceURL, eval() çağrılarıyla çalışırken hata ayıklama işlemini basitleştirmenize olanak tanır. Bu yardımcı, //# sourceMappingURL mülküne çok benziyor. Daha fazla bilgi için Kaynak Haritası V3 spesifikasyonuna bakın.
//# sourceURL=/path/to/source.file yorumu, eval() kullanırken tarayıcıya kaynak dosyayı aramasını söyler. Bu, değerlendirmelerinizi, satır içi komut dosyalarınızı ve stillerinizi adlandırmanıza yardımcı olur.
Bu demo sayfasında test edin:
- Geliştirici Araçları'nı açın ve Kaynaklar paneline gidin.
- Sayfada, Kodu adlandırın: giriş alanına istediğiniz bir dosya adını girin.
- Derle düğmesini tıklayın. CoffeeScript kaynağından değerlendirilen toplamın yer aldığı bir uyarı gösterilir.
- Sayfa bölmesinde bulunan dosya ağacında, girdiğiniz özel dosya adını içeren yeni bir dosya açın. Kaynak dosyanın orijinal adını içeren
// #sourceURLyorumunun bulunduğu derlenmiş JavaScript kodunu içerir. - Kaynak dosyayı açmak için Düzenleyici'nin durum çubuğundaki bağlantıyı tıklayın.
