Tips DevTools: Apa yang dimaksud dengan peta sumber?

Sarah Emelianova
Sofia Emelianova

Peta sumber memungkinkan Anda membuat kode tetap dapat dibaca dan di-debug bahkan setelah Anda menggabungkan dan diminifikasi, tanpa memengaruhi performa.

Saat menggunakan berbagai transpiler, minifier, dan pemaket, kode yang Anda deploy berbeda dengan kode yang Anda tulis. Untuk meningkatkan performa jaringan, alat ini mengompresi kode menjadi satu baris, menghapus karakter yang tidak perlu, dan mempersingkat variabel.

Kode yang diminifikasi dan yang asli.

Ada banyak alat yang dapat menghasilkan peta sumber untuk menyertai kode Anda.

Peta sumber.

Chrome DevTools membaca kode dan peta sumber yang di-deploy, serta memungkinkan Anda men-debug kode seperti biasanya, bahkan dengan titik henti sementara.

Menggunakan titik henti sementara di DevTools dalam file sumber yang ditulis.

Untuk lebih memahami cara kerja peta sumber, lihat visualisasi peta sumber.

Selain itu, peta sumber dapat memiliki ekstensi. Jika Anda membuat alat dan framework, pertimbangkan untuk mendukungnya. Lihat Studi Kasus: Proses Debug Angular yang Lebih Baik dengan DevTools, tempat Tim DevTools dan Angular meningkatkan pengalaman proses debug di DevTools dengan mendukung ekstensi x_google_ignoreList.

Untuk mempelajari lebih lanjut, lihat: