Pembuat Peta Sumber
Hasilkan file Source Map v3 dari sumber JavaScript asli Anda dan versinya yang diperkecil atau dikaburkan. Alat ini memberi token pada kedua input, menyelaraskan token yang cocok untuk membuat pemetaan posisi yang akurat, dan mengkodekannya menggunakan Base64-VLQ untuk peta sumber JSON yang valid. Termasuk pelacakan pengidentifikasi, penyematan konten sumber opsional, tabel pratinjau pemetaan, dan penampil JSON mentah. Semua pemrosesan bersifat lokal dan pribadi.
Mengapa Menggunakan Generator Peta Sumber Kami?
- Pembuatan Source Map v3: Hasilkan file Source Map v3 standar dari kode JavaScript asli dan yang diperkecil. Menghasilkan pemetaan berkode VLQ yang valid, referensi file sumber, larik nama, dan konten sumber opsional untuk rekonstruksi sumber lengkap. Kompatibel dengan browser, bundler, dan alat debugging.
- Pemrosesan Lokal-Browser 100%: Semua pembuatan peta sumber terjadi sepenuhnya di browser Anda. Kode sumber asli dan JavaScript yang diperkecil tidak akan pernah meninggalkan perangkat Anda. Tidak ada unggahan ke server mana pun, tidak perlu mendaftar, dan tidak ada batasan penggunaan. Sepenuhnya gratis selamanya.
- Pratinjau Pemetaan Terperinci: Lihat tabel pemetaan lengkap yang menunjukkan setiap posisi yang dihasilkan dan file, baris, dan kolom aslinya yang sesuai. Jelajahi JSON peta sumber mentah, periksa segmen VLQ yang didekodekan, dan verifikasi keakuratan pemetaan sebelum mengunduh atau menyalin.
- Generasi Instan dengan Statistik: Peta sumber dihasilkan secara real-time saat Anda mengetik atau menempelkan kode. Lihat segera berapa banyak pemetaan yang dibuat, ukuran file peta sumber, rasio kompresi, dan jumlah file sumber serta pengidentifikasi bernama. Salin atau unduh file .map yang dihasilkan dengan satu klik.
Kasus Penggunaan Umum untuk Generator Peta Sumber
- Men-debug Kode Produksi yang Dikaburkan: Buat peta sumber untuk bundel JavaScript yang dikaburkan sehingga Anda dapat men-debug masalah produksi dengan nama variabel asli, struktur file, dan komentar. Hubungkan peta sumber ke alat pemantauan kesalahan Anda (Sentry, Datadog, New Relic) untuk mendapatkan pelacakan tumpukan yang dapat dibaca dari kesalahan produksi yang diperkecil.
- Integrasi Saluran Kebingungan: Saat menerapkan kebingungan JS (penggantian nama variabel, pengkodean string, perataan aliran kontrol) sebagai bagian dari saluran pembangunan Anda, buat peta sumber yang memetakan keluaran yang dikaburkan kembali ke kode yang telah dikaburkan sebelumnya. Hal ini memungkinkan proses debug dengan kode yang dapat dibaca saat mengirimkan JavaScript yang dilindungi.
- Proses Debug Browser DevTools: Lampirkan peta sumber yang dihasilkan ke bundel JavaScript yang Anda terapkan sehingga Chrome DevTools, Alat Pengembang Firefox, dan Safari Web Inspector dapat menampilkan kode sumber asli di panel Sumber. Tetapkan titik henti sementara, periksa variabel, dan telusuri kode asli Anda bahkan saat browser menjalankan JavaScript yang diperkecil.
- Artefak Peta Sumber CI/CD: Hasilkan peta sumber selama pipeline CI/CD Anda dan unggah ke layanan pelacakan kesalahan tanpa memaparkannya kepada pengguna akhir. Alat ini membantu Anda memahami format peta sumber dan menguji alur pembuatan Anda sebelum berintegrasi dengan alat pembangunan Anda.
- Pendidikan & Penelitian Format Peta Sumber: Pahami cara kerja Source Map v3 dengan melihat pemetaan berkode VLQ yang dihasilkan secara real-time dari kode Anda sendiri. Alat ini sangat baik untuk mempelajari format peta sumber, pengkodean VLQ, pemetaan garis/kolom, dan bagaimana nama dan sumber direferensikan.
- Deobfuscation Pelacakan Tumpukan Manual: Jika Anda memiliki pelacakan tumpukan produksi yang dikaburkan/diperkecil tetapi kehilangan peta sumber, rekonstruksi pemetaan secara manual dengan menempelkan kode asli dan yang diperkecil. Peta sumber yang dihasilkan dapat digunakan dengan Source Map Unminifier untuk memulihkan posisi kode asli yang tepat.
Apa itu Peta Sumber?
Peta sumber adalah file yang memetakan kode yang diubah, diperkecil, atau dikaburkan kembali ke sumber aslinya. Format Source Map v3 menggunakan pengkodean Base64-VLQ (Variable Panjang Quantity) untuk menyimpan pemetaan posisi secara ringkas. Setiap pemetaan mencatat baris/kolom yang dihasilkan dan file, baris, dan kolom aslinya yang terkait, ditambah nama pengidentifikasi opsional. Saat browser atau debugger memuat peta sumber bersama kode yang diperkecil, browser atau debugger dapat menampilkan kode sumber asli dengan nama variabel, organisasi file, dan komentar yang benar — sehingga proses debug kode produksi dapat dilakukan.
Cara Kerja Generator Peta Sumber Kami
- Masukkan Kode Asli: Tempelkan kode sumber JavaScript asli yang dapat dibaca ke panel kiri. Ini adalah versi pra-minifikasi/pra-obfuscation yang ingin Anda petakan.
- Masukkan Kode yang Diperkecil/Dikaburkan: Tempelkan kode JavaScript yang diperkecil atau dikaburkan ke panel kanan. Generator akan membandingkan setiap posisi baris dan karakter untuk membuat pemetaan yang akurat antara kedua versi.
- Pembuatan Peta Sumber: Alat ini menghasilkan file JSON Peta Sumber v3 yang valid yang berisi pemetaan berkode VLQ, daftar file sumber, susunan nama untuk pengidentifikasi, dan opsional konten sumber asli lengkap (sourcesContent) untuk rekonstruksi lengkap. Anda dapat menyalin JSON atau mendownloadnya sebagai file .map.
Detail Format Peta Sumber v3
- Versi: Format peta sumber saat ini berada pada versi 3, ditentukan oleh Spesifikasi Peta Sumber. Bidang versi selalu 3 .
- Pemetaan: Bidang pemetaan berisi string berkode VLQ yang dipisahkan dengan titik koma (untuk jeda baris) dan koma (untuk segmen individual dalam satu baris). Setiap segmen mengkodekan hingga 5 nilai: kolom yang dihasilkan, indeks sumber, baris asli, kolom asli, dan indeks nama — semuanya disimpan sebagai offset relatif untuk kompresi optimal.
- Sumber: Serangkaian jalur file sumber asli yang direferensikan oleh indeks dalam pemetaan. Anda dapat menentukan nama file sumber khusus untuk struktur proyek Anda.
- Nama: Serangkaian nama pengidentifikasi (nama variabel, nama fungsi, dll.) yang muncul dalam kode asli dan kode yang dihasilkan, direferensikan oleh indeks dalam pemetaan.
- sourceContent: Array opsional yang berisi kode sumber asli lengkap untuk setiap file sumber. Saat ini, debugger dapat menampilkan kode asli yang tepat tanpa memerlukan akses ke file asli di disk.
- Pengkodean VLQ: Base64-VLQ adalah pengkodean panjang variabel kompak di mana setiap karakter mewakili 6 bit (0-63). Bit kelanjutan (bit 6) menandakan apakah lebih banyak karakter mengikuti nilai yang sama. Tanda tersebut dikodekan sebagai bit paling tidak signifikan (1 = negatif, 0 = positif), sehingga memungkinkan offset negatif dalam pemetaan relatif.
Privasi, Keamanan & Ketersediaan
Kode JavaScript Anda diproses seluruhnya di dalam browser Anda. Tidak ada kode yang diunggah ke server mana pun, disimpan, dicatat, atau dibagikan dengan pihak ketiga. Alat ini tidak memerlukan pembuatan akun, tidak perlu mendaftar, dan tidak menerapkan batasan ukuran kode. Ini sepenuhnya gratis tanpa tingkatan premium, batasan penggunaan, atau biaya tersembunyi. Anda dapat menggunakannya sesering yang diperlukan untuk menghasilkan peta sumber, debugging, atau tujuan pendidikan.
Pertanyaan yang Sering Diajukan
Peta sumber adalah file yang memetakan kode JavaScript yang diubah, diperkecil, atau dikaburkan kembali ke sumber aslinya. Hal ini memungkinkan debugger dan alat pemantauan kesalahan untuk menampilkan kode sumber asli bahkan ketika browser menjalankan JavaScript yang diperkecil. Membuat peta sumber sangat penting untuk men-debug JavaScript produksi, berintegrasi dengan layanan pelacakan kesalahan seperti Sentry, dan menjaga produktivitas pengembang saat menerapkan kode yang dioptimalkan.
Source Map v3 adalah format standar saat ini untuk peta sumber. Ia menggunakan pengkodean Base64-VLQ (Variable Panjang Quantity) untuk menyimpan pemetaan posisi secara kompak. Formatnya mencakup: versi (selalu 3), file (nama file keluaran), sumber (jalur file sumber asli), nama (nama pengidentifikasi), pemetaan (data posisi yang dikodekan VLQ), sourceContent (kode sumber asli opsional), dan sourceRoot (awalan jalur opsional). Pengkodean VLQ memungkinkan setiap segmen pemetaan mewakili hingga 5 nilai (kolom yang dihasilkan, indeks sumber, baris asli, kolom asli, indeks nama) menggunakan offset relatif untuk kompresi optimal.
Pengkodean VLQ (Variable Panjang Quantity) merepresentasikan angka menggunakan jumlah variabel karakter Base64. Setiap karakter mengkodekan 6 bit, dengan bit ke-6 (bit lanjutan) menunjukkan apakah nilai berlanjut ke karakter berikutnya. Tanda dikodekan dalam bit paling tidak signifikan (0 = positif, 1 = negatif). Hal ini memungkinkan angka kecil (yang biasa terjadi pada offset posisi peta sumber) dikodekan hanya dengan 1-2 karakter, sedangkan angka yang lebih besar dapat menggunakan lebih banyak karakter.
Generator bekerja dengan memberi token pada kode JavaScript asli dan yang diperkecil, lalu menyelaraskan token berdasarkan nilai konten untuk membuat pemetaan posisi. Untuk setiap token yang cocok, ini mencatat posisi baris/kolom yang dihasilkan dan file, baris, dan kolom asli yang sesuai. Pengidentifikasi (nama variabel, nama fungsi) dilacak dalam array nama. Pemetaan dikodekan menggunakan Base64-VLQ dengan offset relatif untuk kompresi maksimum sesuai spesifikasi Source Map v3.
sourceContent adalah bidang opsional di peta sumber yang menyematkan kode sumber asli lengkap untuk setiap file yang direferensikan. Jika disertakan, alat debugger dan deobfuscation dapat menampilkan kode asli persisnya tanpa memerlukan akses ke file asli di disk atau koneksi jaringan. Kelemahannya adalah meningkatkan ukuran file peta sumber karena sumber aslinya tertanam secara inline.
Ya. Peta sumber yang dihasilkan sepenuhnya kompatibel dengan Chrome DevTools, Alat Pengembang Firefox, dan Safari Web Inspector. Untuk menggunakan peta sumber, letakkan file .map di samping file JavaScript Anda (misalnya, script.js dan script.js.map), tambahkan komentar //# sourceMappingURL=script.js.map di akhir file JavaScript Anda, atau sematkan peta sumber sebagai URL data.
Generator menangani ini secara otomatis. Peta sumber dirancang untuk memetakan kode yang mungkin memiliki struktur garis yang sangat berbeda. Generator membuat pemetaan untuk setiap token yang cocok, mencatat baris/kolom asli yang tepat untuk setiap posisi yang dihasilkan. Garis yang tidak memiliki pemetaan asli yang sesuai tidak memiliki entri pemetaan, yang valid sesuai spesifikasi.
Sangat. Semua pembuatan peta sumber terjadi sepenuhnya di dalam browser Anda. Kode sumber asli dan JavaScript yang diperkecil tidak pernah meninggalkan perangkat Anda dan tidak pernah dikirim ke server mana pun. Tidak diperlukan akun, tidak ada data yang disimpan, dan tidak ada pelacakan yang terjadi. Hal ini membuat alat ini aman untuk menghasilkan peta sumber untuk kode JavaScript berpemilik, aplikasi komersial, atau proyek yang sensitif terhadap keamanan.
Bundler seperti Webpack, Rollup, Vite, dan ESBuild menghasilkan peta sumber secara otomatis selama proses pembangunan. Alat ini dirancang untuk kasus-kasus ketika Anda perlu membuat peta sumber secara terpisah — misalnya, jika Anda kehilangan peta sumber asli, jika Anda memiliki kebingungan khusus yang tidak didukung oleh bundler Anda, jika Anda ingin memahami format peta sumber, atau jika Anda perlu membuat peta sumber untuk skrip yang diperkecil atau digabungkan secara manual.
Ya, 100% gratis. Tidak ada pendaftaran, tidak ada tingkat premium, tidak ada batasan penggunaan, dan tidak ada batasan ukuran kode. Alat ini sepenuhnya berjalan di browser Anda dan akan selalu gratis untuk digunakan di Aback Tools.