Kaynak eşlemeleriyle dağıtılmak yerine orijinal kodunuzda hata ayıklama

Meggin Kearney
Meggin Kearney
Paul Bakaus
Paul Bakaus
Sofia Emelianova
Sofia Emelianova

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:

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'a dokunun. Ayarlar > Tercihler > Kaynaklar bölümünde Onay kutusu. 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:

  1. Kaynaklar panelinde web sitenizin kaynaklarını açın.
  2. 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 Oluşturuldu. Yazar bölümünü genişletin ve orijinal kaynak dosyanızı Düzenleyici'de açın.

    Orijinal dosya, Yazar bölümünde açılır.

  3. Normalde yaptığınız gibi bir kesme noktası ayarlayın. Örneğin, günlük noktası. Ardından kodu çalıştırın.

    Yazılı bir dosyada ayarlanan günlük noktası.

  4. 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.

    Durum çubuğunda dağıtılan CSS dosyalarının bağlantısı.

  5. 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.

    Orijinal dosyanın bağlantısını içeren konsol mesajı.

  6. 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.

    Yürütme, normal bir kesme noktasında duraklatıldı.

    Çağrı Yığını bölmesinde dağıtılan dosyanın değil, orijinal dosyanın adının gösterildiğini unutmayın.

  7. 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.

sourceMappingURL yorumunu içeren dağıtılan dosya.

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:

  1. Geliştirici Araçları'nı açın ve Kaynaklar paneline gidin.
  2. Sayfada, Kodu adlandırın: giriş alanına istediğiniz bir dosya adını girin.
  3. Derle düğmesini tıklayın. CoffeeScript kaynağından değerlendirilen toplamın yer aldığı bir uyarı gösterilir.
  4. 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 // #sourceURL yorumunun bulunduğu derlenmiş JavaScript kodunu içerir.
  5. Kaynak dosyayı açmak için Düzenleyici'nin durum çubuğundaki bağlantıyı tıklayın.

sourceURL yorumu ve durum çubuğundaki kaynak dosyanın bağlantısı.