Pastikan kode sisi klien Anda tetap dapat dibaca dan di-debug, bahkan setelah Anda menggabungkan, mengecilkan, atau mengompilasinya. Gunakan peta sumber untuk memetakan kode sumber ke kompilasi kode di panel Sumber.
Memulai praprosesor
Peta sumber dari praprosesor menyebabkan DevTools memuat file asli Anda selain yang diminifikasi.
Chrome akan benar-benar menjalankan kode yang diminifikasi, tetapi panel Sumber akan menampilkan kode yang Anda tulis. Anda dapat menyetel titik henti sementara dan menelusuri kode dalam file sumber, dan semua error, log, serta titik henti sementara akan dipetakan secara otomatis.
Hal ini memberi Anda tampilan untuk men-debug kode saat Anda menulisnya, bukan kode yang disajikan oleh server pengembangan Anda dan dieksekusi oleh browser.
Untuk menggunakan peta sumber di panel Sumber:
- Hanya gunakan praprosesor yang dapat menghasilkan peta sumber.
- Memverifikasi bahwa server web Anda dapat menayangkan peta sumber.
Menggunakan praprosesor yang didukung
Praprosesor umum yang digunakan bersama dengan peta sumber mencakup, tetapi tidak terbatas pada:
- Transpiler: Babel
- Compiler: TypeScript dan Dart
- Minifier: terser
- Bundler dan server pengembangan: Webpack, Vite, esbuild, dan Parcel
Untuk melihat daftar yang diperluas, lihat Peta sumber: Bahasa, alat, dan info lainnya.
Aktifkan peta sumber di Setelan
Di 
Setelan > Preferensi > Sumber, pastikan untuk mencentang 
Aktifkan peta sumber JavaScript.
Periksa apakah peta sumber berhasil dimuat
Lihat Referensi Developer: Melihat dan memuat peta sumber secara manual.
Proses debug dengan peta sumber
Setelah peta sumber siap dan diaktifkan, Anda dapat melakukan hal-hal berikut:
- Buka sumber situs Anda di panel Sumber.
Untuk berfokus hanya pada kode yang Anda tulis, kelompokkan file yang ditulis dan di-deploy di hierarki file. Kemudian, luaskan bagian
Authored dan buka file sumber asli Anda di Editor.
Tetapkan titik henti sementara seperti yang biasa Anda lakukan. Misalnya, logpoint. Kemudian jalankan kodenya.
Perhatikan bahwa Editor menempatkan link ke file yang di-deploy pada status bar di bagian bawah. Demikian pula, hal ini berlaku untuk file CSS yang di-deploy.
Buka panel samping Konsol. Dalam contoh ini, di samping pesan logpoint, Console akan menampilkan link ke file asli, bukan ke file yang di-deploy.
Ubah jenis titik henti sementara menjadi jenis titik henti sementara, lalu jalankan kode lagi. Eksekusi akan dijeda kali ini.
Perhatikan bahwa panel Call Stack menampilkan nama file asli, bukan file yang di-deploy.
Pada status bar di bagian bawah Editor, klik link ke file yang di-deploy. Panel Sumber akan mengarahkan Anda ke file yang sesuai.
Saat Anda membuka file yang di-deploy, DevTools akan memberi tahu Anda jika komentar //# sourceMappingURL dan file asli terkait ditemukan.
Perhatikan bahwa Editor secara otomatis mencetak file yang di-deploy. Pada kenyataannya, kolom ini berisi semua kode dalam satu baris, kecuali untuk komentar //# sourceMappingURL.
Beri nama panggilan eval() dengan #sourceURL
#sourceURL memungkinkan Anda menyederhanakan proses debug
saat menangani panggilan eval(). Helper ini terlihat sangat mirip dengan properti //# sourceMappingURL. Untuk informasi selengkapnya, lihat Spesifikasi Peta Sumber V3.
Komentar //# sourceURL=/path/to/source.file memberi tahu browser untuk mencari file sumber saat Anda menggunakan eval(). Hal ini membantu Anda memberi nama evaluasi serta skrip dan gaya inline.
Uji di halaman demo ini:
- Buka DevTools lalu buka panel Sources.
- Di halaman tersebut, masukkan nama file arbitrer ke dalam kolom input Name your code:.
- Klik tombol Compile. Notifikasi akan muncul dengan jumlah yang dievaluasi dari sumber CoffeeScript.
- Pada hierarki file di panel Halaman, buka file baru dengan nama file kustom yang Anda masukkan. File ini berisi kompilasi kode JavaScript yang memiliki komentar
// #sourceURLdengan nama asli file sumber. - Untuk membuka file sumber, klik link di status bar Editor.
