İstemci tarafı kodunuzu birleştirdikten, küçültdükten veya derledikten sonra bile okunabilir ve hata ayıklaması yapılabilir durumda tutun. Kaynak kodunuzu Kaynaklar panelindeki derlenmiş kodunuzla eşlemek için kaynak eşlemelerini kullanın.
Ön işlemcileri kullanmaya başlama
Ön işlemcilerden gelen kaynak haritalar, Geliştirici Araçları'nın küçültülmüş dosyalarınızın yanı sıra orijinal dosyalarınızı da yüklemesine neden olur.
Chrome aslında küçültülmüş kodunuzu çalıştırır, ancak Kaynaklar paneli, yazdığınız kodu gösterir. Kaynak dosyalarda kesme noktaları belirleyebilir ve kodu ilerletebilirsiniz. Böylece tüm hatalar, günlükler ve ayrılma noktaları otomatik olarak eşlenir.
Bu, geliştirme sunucunuz tarafından sunulan ve tarayıcı tarafından yürütülen kodun aksine, kodda hata ayıklama görünümünü verir.
Kaynak eşlemelerini Kaynaklar panelinde kullanmak için:
- Yalnızca kaynak haritaları oluşturabilen ön işlemcileri kullanın.
- Web sunucunuzun kaynak eşlemeleri sunabileceğini doğrulayın.
Desteklenen bir ön işlemci kullanın
Kaynak eşlemeleriyle birlikte kullanılan yaygın ön işlemciler aşağıdakileri içerir ancak bunlarla sınırlı değildir:
- Çeviriciler: Babel
- Derleyiciler: TypeScript ve Dart
- Küçültücüler: terser
- Paketciler ve geliştirme sunucuları: Webpack, Vite, esbuild ve Parcel
Genişletilmiş bir liste için Kaynak haritaları: Diller, araçlar ve diğer bilgiler başlıklı makaleyi inceleyin.
Kaynak eşlemelerini Ayarlar'da etkinleştir
Ayarlar > Tercihler > Kaynaklar bölümünde, 
JavaScript kaynak eşlemelerini etkinleştir seçeneğini işaretlediğinizden emin olun.
Kaynak eşlemelerinin başarıyla yüklenip yüklenmediğini kontrol etme
Geliştirici Kaynakları: Kaynak eşlemelerini manuel olarak görüntüleme ve yükleme başlıklı makaleyi inceleyin.
Kaynak eşlemeleriyle hata ayıklama
Kaynak haritaları hazır ve etkinken aşağıdakileri yapabilirsiniz:
- Kaynaklar panelinde web sitenizin kaynaklarını açın.
Yalnızca yazdığınız koda odaklanmak için yazar ve dağıtılan dosyaları dosya ağacında gruplandırın. Ardından
Yazıldı bölümünü genişletin ve orijinal kaynak dosyanızı Düzenleyici'de açın.
Normalde yaptığınız gibi bir ayrılma noktası ayarlayın. Örneğin, günlük noktası. Daha sonra kodu çalıştırın.
Düzenleyici'nin, dağıtılan dosyanın bağlantısını en alttaki durum çubuğuna yerleştirdiğine dikkat edin. Benzer şekilde, dağıtılan CSS dosyaları için de bunu yapar.
Console çekmecesini açın. Bu örnekte, günlük noktasının mesajının yanında Konsol, dağıtılan dosya yerine orijinal dosyanın bağlantısını gösterir.
Ayrılma noktası türünü normal bir türle değiştirin ve kodu tekrar çalıştırın. Yürütme bu kez duraklatılır.
Çağrı Grubu bölmesinde, dağıtılan dosya yerine orijinal dosyanın adı gösterildiğine dikkat edin.
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 götürür.
Geliştirici Araçları, dağıtılan bir dosyayı açtığınızda //# sourceMappingURL yorumunu ve ilişkili orijinal dosyayı bulup bulmadığınızı size bildirir.
Düzenleyici'nin dağıtılan dosyayı otomatik olarak güzel bir şekilde yazdırdığına dikkat edin. Aslında bu dosya, //# sourceMappingURL yorumu hariç tüm kodu tek bir satırda içerir.
#sourceURL ile eval() çağrılarını adlandırın
#sourceURL, eval() aramalarıyla ilgilenirken hata ayıklamayı basitleştirmenize olanak tanır. Bu yardımcı, //# sourceMappingURL özelliğine çok benziyor. Daha fazla bilgi için Kaynak Eşleme V3 spesifikasyonuna bakın.
//# sourceURL=/path/to/source.file yorumu, eval() kullandığınızda tarayıcıya kaynak dosyayı aramasını bildirir. Bu, değerlendirmelerinizi ve satır içi komut dosyalarınızı ve stillerinizi adlandırmanıza yardımcı olur.
Şu demo sayfasında test edin:
- Geliştirici Araçları'nı açın ve Kaynaklar paneline gidin.
- Sayfada Kodunuzu adlandırın: giriş alanına rastgele bir dosya adı girin.
- Derle düğmesini tıklayın. CoffeeScript kaynağından değerlendirilen toplamla birlikte bir uyarı görünür.
- Sayfa bölmesindeki dosya ağacında, girdiğiniz özel dosya adıyla yeni bir dosya açın. Bu dosya, kaynak dosyanın orijinal adıyla birlikte
// #sourceURLyorumunun yer aldığı derlenmiş JavaScript kodunu içerir. - Kaynak dosyayı açmak için Düzenleyici'nin durum çubuğundaki bağlantıyı tıklayın.
