İstemci taraflı kodunuzu birleştirdikten, küçültdükten veya derledikten sonra bile okunabilir ve hata ayıklaması yapabilirsiniz. Kaynak kodunuzu Kaynaklar panelinde derlenen 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ı da yüklemesine neden olur.
Chrome aslında küçültülmüş kodunuzu çalıştırır, ancak Kaynaklar paneli size yazdığınız kodu gösterir. Kaynak dosyalarda ayrılma noktaları ayarlayabilir ve kodda adım adım ilerleyebilirsiniz. Tüm hatalar, günlükler ve kesme noktaları otomatik olarak eşlenir.
Bu size, 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ü sunar.
Kaynaklar panelindeki kaynak eşlemelerini kullanmak için:
- Yalnızca kaynak eşlemeleri oluşturabilen ön işlemcileri kullanın.
- Web sunucunuzun kaynak eşlemeleri sunabildiğini doğrulayın.
Desteklenen bir ön işlemci kullanın
Kaynak eşlemeleriyle birlikte yaygın olarak kullanılan ön işlemcilerden bazıları şunlardır:
- Aktarıcılar: Babel
- Derleyiciler: TypeScript ve Dart
- Küçültücüler: terser
- Paketleyiciler ve geliştirme sunucuları: Webpack, Vite, esbuild ve Parcel
Genişletilmiş liste için Kaynak haritalar: Diller, araçlar ve diğer bilgiler konusuna bakın.
Ayarlar'da kaynak eşlemelerini etkinleştirin
Ayarlar > Tercihler > Kaynaklar bölümünde 
JavaScript kaynak eşlemelerini etkinleştir'i işaretlediğinizden emin olun.
Kaynak eşlemelerinin başarıyla yüklenip yüklenmediğini kontrol edin
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
Kaynak eşlemeleri hazır ve etkin durumdayken şunları yapabilirsiniz:
- Kaynaklar panelinde web sitenizin kaynaklarını açın.
Yalnızca yazdığınız koda odaklanmak için oluşturulan ve dağıtılan dosyaları dosya ağacında gruplandırın. Ardından,
Yazarlar 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ı. Ardından kodu çalıştırın.
Düzenleyici'nin, dağıtılan dosyanın bağlantısını alt taraftaki durum çubuğuna yerleştirdiğine dikkat edin. Benzer şekilde, dağıtılan CSS dosyaları için de bu durum geçerlidir.
Konsol çekmecesini açın. Bu örnekte, günlük noktası mesajının yanında konsolda, dağıtılan dosyanın bağlantısı değil, orijinal dosyanın bağlantısı gösterilmektedir.
Ayrılma noktası türünü normal olarak değiştirin ve kodu tekrar çalıştırın. Yürütme bu kez duraklatılır.
Çağrı Yığını bölmesinde, dağıtılan dosyanın adı değil, orijinal dosyanın adı gösterilir.
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.
Dağıtılan herhangi bir dosyayı açtığınızda Geliştirici Araçları, //# sourceMappingURL yorumunu ve ilişkili orijinal dosyayı bulup bulmadığını size bildirir.
Editor'ın dağıtılan dosyayı otomatik olarak okunaklı hâle getirdiğine dikkat edin. Aslında, //# sourceMappingURL yorumu hariç tüm kodu tek bir satırda içerir.
eval() aramalarını #sourceURL ile adlandırın
#sourceURL, eval() çağrılarıyla çalışırken hata ayıklamayı basitleştirir. Bu yardımcı, //# sourceMappingURL özelliğine çok benziyor. Daha fazla bilgi için Kaynak Harita V3 spesifikasyonu konusuna bakın.
//# sourceURL=/path/to/source.file yorumu, eval() kullandığınızda tarayıcının kaynak dosyayı aramasını sağlar. 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 Kodunuzu adlandırın: giriş alanına rastgele bir dosya adı girin.
- Compile (Derle) düğmesini tıklayın. CoffeeScript kaynağından değerlendirilen toplamın yer aldığı bir uyarı görüntülenir.
- 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ını içeren
// #sourceURLyorumunu içeren derlenmiş JavaScript kodunu içerir. - Kaynak dosyayı açmak için Düzenleyici'nin durum çubuğundaki bağlantıyı tıklayın.
