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 dibuka, DevTools akan mencoba memuat peta sumber, jika ada. Jika terjadi kegagalan, Konsol akan mencatat error yang serupa dengan 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.

Buka Resource Developer dan periksa status

Untuk memeriksa status pemuatan peta sumber:

  1. Buka DevTools, pastikan untuk mengaktifkan peta sumber, lalu buka more_vert > 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.

Filter resource menurut URL atau Error

Untuk berfokus pada peta sumber yang menarik bagi Anda, masukkan teks dalam kotak teks di bagian atas untuk memfilter peta sumber yang tidak berisi teks ini dalam 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 cross-origin dan mungkin tidak berhasil.

Untuk membuat situs meminta peta sumber terlebih dahulu, di sudut kanan atas Referensi Developer, centang Kotak centang. Muat ke seluruh situs.

Halaman 'Muat melalui situs' kotak centang

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

Memuat peta sumber secara manual

Jika mengalami kegagalan pemuatan atau, misalnya, ingin men-debug kode asli di situs dalam produksi yang tidak memiliki peta sumber, Anda dapat memuatnya 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 dan klik Add.

    Menentukan URL peta sumber.

  6. Periksa apakah peta sumber muncul di Referensi Developer dan file asli (dipetakan dari 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.