Resource Developer: Melihat dan memuat peta sumber secara manual

Sofia Emelianova
Sofia Emelianova
GitHub

Gunakan panel Resource Developer untuk memeriksa apakah DevTools berhasil memuat peta sumber. Jika diperlukan, Anda dapat memuatnya secara manual.

Ringkasan

Saat Anda membuka DevTools, DevTools akan mencoba memuat peta sumber, jika ada. Jika terjadi kegagalan, Konsol akan mencatat error yang mirip dengan yang berikut ini.

Error pemuatan peta sumber di Konsol.

Di panel Referensi Developer, Anda dapat melihat status pemuatan peta sumber dan bahkan memuat peta sumber secara manual.

Membuka Referensi Developer dan memeriksa status

Untuk memeriksa status pemuatan peta sumber:

  1. Buka DevTools, pastikan untuk mengaktifkan peta sumber, lalu buka > Alat lainnya > Referensi Developer.

  2. Dalam tabel, periksa nilai di kolom berikut:

    • Status untuk melihat apakah pemuatan peta sumber berhasil atau gagal.
    • Error untuk membaca pesan error, jika ada.

Kolom Status dan Error.

Memfilter resource menurut URL atau Error

Untuk berfokus pada peta sumber yang Anda minati, masukkan teks di kotak teks di bagian atas untuk memfilter peta sumber yang tidak berisi teks ini di URL atau pesan error.

Memfilter peta sumber yang tidak berisi 'js' di URL.

Memecahkan masalah pemuatan peta sumber

Secara default, DevTools meminta peta sumber, bukan situs. Permintaan tersebut dapat diperlakukan sebagai lintas-asal dan mungkin tidak berhasil.

Agar situs meminta peta sumber terlebih dahulu, di sudut kanan atas Referensi Developer, centang Kotak centang. Muat melalui situs.

Kotak centang 'Muat dari situs'

Jika Anda masih mengalami masalah saat memuat peta sumber, coba muat secara manual seperti yang dijelaskan di bawah.

Memuat peta sumber secara manual

Jika Anda mengalami kegagalan pemuatan atau, misalnya, ingin men-debug kode asli di situs dalam produksi yang tidak memiliki peta sumber, Anda dapat memuat peta sumber secara manual:

  1. Buat peta sumber menggunakan alat yang mendukungnya.
  2. Menghosting peta sumber secara lokal.
  3. Buka DevTools di halaman Anda dan pastikan untuk mengaktifkan peta sumber.

  4. Buka file yang di-deploy (diproses) di Sumber, klik kanan di Editor, lalu pilih Tambahkan peta sumber dari menu.

    Memilih 'Tambahkan peta sumber' dari menu.

  5. Di kotak teks, tentukan URL peta sumber, lalu klik Tambahkan.

    Menentukan URL peta sumber.

  6. Periksa apakah peta sumber muncul di Referensi Developer dan file asli (dipetakan dari file yang di-deploy) di hierarki file.

    Peta sumber yang dimuat secara manual akan membuat file asli muncul di hierarki file.

  7. Lanjutkan untuk men-debug file asli.