Ekstensi peta sumber ignoreList

Tingkatkan pengalaman proses debug di Chrome DevTools dengan ekstensi peta sumber ignoreList.

Jecelyn Yeen

Chrome DevTools mengurai kolom ignoreList di peta sumber untuk membantu meningkatkan pengalaman proses debug developer. Lihat stack trace berikut di Console. DevTools otomatis menyembunyikan semua frame pihak ketiga, dan hanya menampilkan frame yang relevan dengan kode Anda.

Perbandingan hasil stack trace.
Gambar ini menunjukkan stack trace sebelum dan setelah Chrome DevTools mendukung ignoreList. Opsi kedua menyembunyikan frame pihak ketiga yang tidak relevan untuk membantu Anda menentukan masalah dengan lebih cepat selama proses debug.

Apa itu ignoreList?

Ekstensi peta sumber adalah kolom tambahan yang menyimpan informasi pelengkap tentang peta sumber. Kolom tersebut diawali dengan x_.

Chrome DevTools menggunakan kolom ignoreList (jika disediakan), untuk memfilter kode yang dihasilkan dan memungkinkan developer web berfokus hanya pada kode yang mereka buat. Misalnya, lihat peta sumber berikut.

/* demo.js.map */

{
  "version": 3,
  "mappings": "AAAAA, ..."
  "sources": [
    "app.js",
    "components/Button.ts",
    "node_modules/.../framework.js",
    "node_modules/.../library.js",
    ...
  ],
  "ignoreList": [2, 3],
  ...
}

Kolom sources menampilkan daftar sumber asli yang digunakan oleh entri mappings. Tonton Apa yang dimaksud dengan peta sumber? untuk mempelajari cara kerja pemetaan.

Mengingat kedua file node_modules/…/frameworks.js dan node_modules/.../library.js adalah skrip pihak ketiga, Anda dapat menentukan kolom ignoreList untuk menunjukkan posisinya di kolom sources. Chrome DevTools akan menerapkan informasi ini untuk menyembunyikan frame dari file yang diabaikan tersebut.

Perbandingan pelacakan tumpukan yang diciutkan dan diperluas.
Gambar ini menunjukkan stack trace sebelum dan sesudah Anda meluaskan stack trace di Konsol. Frame yang diabaikan akan berwarna abu-abu saat diperluas.

Hal ini juga berlaku untuk Stack Panggilan di panel Sumber selama proses debug titik henti sementara.

Di balik layar, DevTools memiliki setelan tambahan yang diaktifkan secara default: Otomatis tambahkan skrip pihak ketiga yang diketahui ke daftar yang diabaikan. Anda dapat menemukannya di DevTools > Setelan > Daftar yang Diabaikan.

Dengan kolom peta sumber ignoreList, Anda memiliki opsi untuk menyembunyikan file yang diabaikan di panel Sources agar dapat berfokus pada kode Anda.

Menyembunyikan sumber yang tercantum dalam daftar abaikan.

Cara mengisi ignoreList

Kabar baiknya, framework seperti Angular dan Nuxt sudah mengonfigurasi ignoreList di peta sumbernya. Upgrade ke versi terbaru dan fitur ini dapat langsung digunakan. Anda akan mendapatkan peningkatan stack trace dengan mudah.

Di sisi lain, alat build seperti Vite dan Rollup menyediakan setelan untuk mengonfigurasinya. Ada juga plugin webpack untuk itu.

Jika Anda adalah pengelola framework atau library, Anda harus memahami cara menerapkan setelan ini untuk meningkatkan pengalaman proses debug pengguna. Lihat bagian berikut untuk mengetahui cara Angular dan Nuxt melakukannya di balik layar.

Bagaimana jika framework dan alat build favorit Anda belum mendukungnya?

Kami secara aktif bekerja sama dengan framework dan alat build untuk menerapkan setelan baru ini. Anda juga dapat membantu dengan memberi tahu pengelola tentang fitur ini. Misalnya, Anda dapat melaporkan masalah di repositori mereka.

Atau, Anda dapat secara manual menambahkan skrip yang tidak relevan ke Daftar yang Diabaikan langsung dari hierarki file di panel DevTools > Sources > Page untuk mencapai hasil yang serupa.

Studi kasus: Penerapan Nuxt dan Angular

Lihat dua studi kasus berikut.

ignoreList di Nuxt

Mulai dari Nuxt v3.3.1, konten node_modules dan Nuxt buildDir telah ditandai sebagai "akan diabaikan oleh debugger".

Hal ini dicapai melalui perubahan pada konfigurasi build Nuxt menggunakan Vite dan Rollup:

/* vite.config.ts */

const ctx: ViteBuildContext = {
  config: vite.mergeConfig(
  build: {
    rollupOptions: {
      output: {
        sourcemapIgnoreList: (relativeSourcePath) => {
          return relativeSourcePath.includes('/node_modules/') || relativeSourcePath.includes(ctx.nuxt.options.buildDir)
        },
      }
})

Tim DevTools ingin mengucapkan terima kasih kepada tim Vite dan Nuxt karena telah memungkinkan hal ini. Kami menghargai upaya dan kolaborasi Anda, yang sangat penting bagi keberhasilan penerapan ini. Sekali lagi, terima kasih kepada tim Vite dan Nuxt atas kontribusi Anda.

ignoreList di Angular

Mulai dari Angular v14.1.0, konten folder node_modules dan webpack telah ditandai sebagai "untuk diabaikan".

Hal ini dicapai melalui perubahan di angular-cli dengan membuat plugin yang terhubung ke modul Compiler webpack.

Plugin webpack yang dibuat oleh engineer kami terhubung ke tahap PROCESS_ASSETS_STAGE_DEV_TOOLING dan mengisi kolom ignoreList di peta sumber dengan aset akhir yang dihasilkan webpack dan dimuat browser.

const map = JSON.parse(mapContent) as SourceMap;
const ignoreList = [];

for (const [index, path] of map.sources.entries()) {
  if (path.includes('/node_modules/') || path.startsWith('webpack/')) {
    ignoreList.push(index);
  }
}

map[`ignoreList`] = ignoreList;
compilation.updateAsset(name, new RawSource(JSON.stringify(map)));

Untuk mempelajari lebih lanjut peningkatan proses debug Angular lainnya di DevTools, lihat Studi Kasus: Proses Debug Angular yang Lebih Baik dengan DevTools.

Tim Chrome DevTools ingin menyampaikan terima kasih kepada tim Angular atas kontribusi mereka yang sangat berharga bagi keberhasilan implementasi ini. Upaya dan kolaborasi Anda sangat penting, dan kami menghargai kerja keras Anda. Terima kasih, tim Angular, telah memungkinkan hal ini.