Buat kode sisi klien tetap dapat dibaca dan di-debug bahkan setelah Anda menggabungkan, meminifikasi, atau mengompilasinya. Gunakan peta sumber untuk memetakan kode sumber ke kode yang dikompilasi di panel Sumber.
Mulai menggunakan praprosesor
Peta sumber dari praprosesor menyebabkan DevTools memuat file asli Anda di samping yang diminifikasi.
Chrome akan menjalankan kode yang diminifikasi, tetapi panel Sumber akan menunjukkan kode yang Anda tulis. Anda bisa menyetel titik henti sementara dan menelusuri kode dalam file sumber dan semua error, log, serta titik henti sementara akan dipetakan secara otomatis.
Ini akan memberi Anda tampilan men-debug kode saat Anda menulisnya, berbeda dengan kode yang disediakan oleh server pengembangan dan dieksekusi oleh browser.
Untuk menggunakan peta sumber di panel Sumber:
- Hanya gunakan praprosesor yang dapat menghasilkan peta sumber.
- Verifikasi bahwa server web Anda dapat menyajikan peta sumber.
Menggunakan praprosesor yang didukung
Praprosesor umum yang digunakan bersama dengan peta sumber termasuk, tetapi tidak terbatas pada:
- Transpiler: Babel
- Compiler: TypeScript dan Dart
- Minifier: terser
- Bundler dan server pengembangan: Webpack, Vite, esbuild, dan Parcel
Untuk 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
Dengan peta sumber 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 di hierarki file. Lalu, luaskan bagian
Authored dan buka file sumber asli di Editor.
Tetapkan titik henti sementara seperti biasa. Misalnya, logpoint. Kemudian jalankan kodenya.
Perhatikan bahwa Editor menempatkan link ke file yang di-deploy di status bar di bagian bawah. Hal yang sama berlaku untuk file CSS yang di-deploy.
Buka panel samping Konsol. Dalam contoh ini, di samping pesan logpoint, Console menampilkan link ke file asli, bukan yang di-deploy.
Ubah jenis titik henti sementara menjadi jenis titik henti sementara dan jalankan kode lagi. Eksekusi dijeda kali ini.
Perhatikan bahwa panel Call Stack menampilkan nama file asli, bukan yang di-deploy.
Pada status bar di bagian bawah Editor, klik link ke file yang di-deploy. Panel Sources 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, kode 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 Source Map 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 pada halaman demo ini:
- Buka DevTools dan buka panel Sources.
- Di halaman, 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.
