Tips DevTools: Apa yang dimaksud dengan peta sumber?

Sofia Emelianova
Sofia Emelianova

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

Saat menggunakan berbagai transpiler, minifier, dan bundler, 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 kode asli.

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 biasa, bahkan dengan titik henti sementara.

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

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

Selain itu, peta sumber dapat memiliki ekstensi. Jika Anda membuat alat dan kerangka kerja, 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: