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 Konsol. DevTools otomatis menyembunyikan semua frame pihak ketiga, dan hanya menampilkan frame yang relevan dengan kode Anda.

Perbandingan hasil stack trace.
Gambar menampilkan stack trace sebelum dan setelah Chrome DevTools mendukung ignoreList. Opsi berikutnya akan menyembunyikan frame pihak ketiga yang tidak relevan untuk membantu Anda menemukan 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 tersedia), untuk memfilter kode yang dihasilkan dan memungkinkan developer web berfokus hanya pada kode yang mereka tulis. Misalnya, lihat source map 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 What are source maps? untuk mempelajari cara kerja pemetaan.

Mengingat bahwa dua 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 bingkai dari file yang diabaikan tersebut.

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

Hal ini juga berlaku untuk Call Stack di panel Sources selama proses debug titik henti sementara.

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

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

Sembunyikan sumber yang tercantum dalam daftar yang diabaikan.

Cara mengisi ignoreList

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

Di sisi lain, alat build seperti Vite dan Rollup menyediakan setelan untuk mengonfigurasinya. Tersedia juga plugin webpack untuk cara tersebut.

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

Bagaimana jika framework dan alat build favorit Anda belum mendukungnya?

Kami aktif menggunakan framework dan membuat alat untuk menghadirkan setelan baru ini. Anda juga dapat membantu dengan memberi tahu pengelola tentang fitur ini. Misalnya, Anda dapat melaporkan masalah di repositorinya.

Selain itu, Anda dapat menambahkan skrip yang tidak relevan ke Daftar Abaikan secara manual langsung dari hierarki file di DevTools > Sumber > Panel Halaman untuk mendapatkan hasil yang serupa.

Studi kasus: Implementasi Nuxt dan Angular

Lihatlah dua studi kasus berikut.

ignoreList di Nuxt

Mulai Nuxt v3.3.1, konten node_modules dan buildDir Nuxt telah ditandai sebagai "untuk 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 mewujudkan hal ini. Terima kasih atas upaya dan kerja sama Anda yang sangat penting bagi keberhasilan penerapan ini. Sekali lagi, terima kasih kepada tim Vite dan Nuxt atas kontribusi Anda!

ignoreList dalam Angular

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

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

Plugin webpack yang dibuat hook oleh engineer kami ke dalam tahap PROCESS_ASSETS_STAGE_DEV_TOOLING dan mengisi kolom ignoreList di peta sumber dengan aset akhir yang dihasilkan webpack dan yang 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 berterima kasih kepada tim Angular atas kontribusinya yang sangat berharga terhadap keberhasilan implementasi ini. Upaya dan kolaborasi Anda sangatlah penting, dan kami menghargai kerja keras Anda. Terima kasih, tim Angular, karena telah mewujudkan hal ini.