Resource Developer: Melihat dan memuat peta sumber secara manual

Sofia Emelianova
Sofia Emelianova
GitHub

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

Saat Anda membukanya, 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 Console.

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

Membuka Resource Developer dan memeriksa status

Untuk memeriksa status pemuatan peta sumber:

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

  2. Pada 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 Anda minati, masukkan teks dalam 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

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

Untuk membuat peta sumber permintaan situs terlebih dahulu, di sudut kanan atas Referensi Developer, centang Kotak centang. Aktifkan pemuatan melalui target.

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 Anda 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 source maps.

  4. Buka file yang diterapkan (diproses) di Sources, klik kanan di Editor, dan pilih Add source map dari menu.

    Memilih 'Tambahkan peta sumber' dari menu.

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

    Menentukan URL peta sumber.

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

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

  7. Lanjutkan ke men-debug file asli.