Pastikan kode sisi klien Anda dapat dibaca dan di-debug meskipun setelah Anda menggabungkan, meminifikasi, atau mengompilasi kode tersebut. Gunakan peta sumber untuk memetakan kode sumber ke kode yang dikompilasi di panel Sumber.
Mulai menggunakan preprocessor
Peta sumber dari preprocessor menyebabkan DevTools memuat file asli Anda selain file yang diminifikasi.
Chrome akan benar-benar menjalankan kode yang diminifikasi, tetapi panel Sumber akan menampilkan kode yang Anda tulis. Anda dapat menetapkan titik henti sementara dan menelusuri kode dalam file sumber, dan semua error, log, dan titik henti sementara akan dipetakan secara otomatis.
Hal ini memberi Anda tampilan proses debug kode saat Anda menulisnya, bukan kode yang ditayangkan oleh server pengembangan dan dijalankan oleh browser.
Untuk menggunakan peta sumber di panel Sumber:
- Hanya gunakan preprocessor yang dapat menghasilkan peta sumber.
- Pastikan server web Anda dapat menayangkan peta sumber.
Menggunakan preprocessor yang didukung
Preprocessor umum yang digunakan bersama dengan peta sumber mencakup, tetapi tidak terbatas pada:
- Transpiler: Babel
- Compiler: TypeScript dan Dart
- Pengecil: terser
- Bundler dan server pengembangan: Webpack, Vite, esbuild, dan Parcel
Untuk mengetahui daftar yang diperluas, lihat Peta sumber: Bahasa, alat, dan info lainnya.
Mengaktifkan peta sumber di Setelan
Di 
Setelan > Preferensi > Sumber, pastikan untuk memeriksa 
Peta sumber JavaScript.
Memeriksa apakah peta sumber berhasil dimuat
Lihat Referensi Developer: Melihat dan memuat peta sumber secara manual.
Melakukan proses debug dengan peta sumber
Dengan peta sumber yang siap dan diaktifkan, Anda dapat melakukan hal berikut:
- Buka sumber situs Anda di panel Sumber.
Untuk berfokus hanya pada kode yang Anda tulis, kelompokkan file yang ditulis dan di-deploy dalam hierarki file. Kemudian, luaskan bagian Authored
dan buka file sumber asli Anda di Editor.