Ekstensi peta sumber ignoreList

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

Jecelyn Yeen

Chrome DevTools mengurai kolom ignoreList dalam peta sumber untuk membantu meningkatkan pengalaman proses debug developer. Lihat pelacakan tumpukan berikut di Konsol. DevTools otomatis menyembunyikan semua bingkai pihak ketiga, dan hanya menampilkan bingkai yang relevan dengan kode Anda.

Perbandingan hasil pelacakan tumpukan.
Gambar ini menampilkan pelacakan tumpukan sebelum dan sesudah Chrome DevTools mendukung ignoreList. Versi berikutnya menyembunyikan bingkai 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 hanya berfokus 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 Apa itu 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 stack trace yang diciutkan dan diperluas.
Gambar ini menampilkan 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 memiliki setelan tambahan yang diaktifkan secara default: Otomatis menambahkan skrip pihak ketiga yang dikenal ke daftar yang diabaikan. Anda dapat menemukannya di DevTools > Setelan > Daftar Abaikan.

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

Sembunyikan sumber 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 langsung berfungsi. Anda mendapatkan peningkatan pelacakan tumpukan dengan mudah.

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

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

Bagaimana jika framework dan alat build favorit Anda belum mendukungnya?

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

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

Studi kasus: Implementasi Nuxt dan Angular

Lihat dua studi kasus berikut.

ignoreList di Nuxt

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

Hal ini dicapai melalui perubahan 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. Terima kasih atas upaya dan kolaborasi Anda, yang sangat penting untuk 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 angular-cli dengan membuat plugin yang terhubung ke modul Compiler webpack.

Plugin webpack yang dibuat oleh engineer kami sebagai hook ke dalam tahap PROCESS_ASSETS_STAGE_DEV_TOOLING dan mengisi kolom ignoreList di peta sumber dengan aset akhir yang dihasilkan webpack dan dimuat oleh 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 mengucapkan terima kasih kepada tim Angular atas kontribusinya yang tak ternilai bagi keberhasilan implementasi ini. Upaya dan kolaborasi Anda sangat penting, dan kami menghargai kerja keras Anda. Terima kasih, tim Angular, atas keberhasilan Anda.