ignoreList kaynak eşlemesi uzantısı

ignoreList kaynak eşlemesi uzantısıyla Chrome Geliştirici Araçları'ndaki hata ayıklama deneyimini iyileştirin.

Jecelyn Yeen

Chrome Geliştirici Araçları, geliştiricilerin hata ayıklama deneyimini iyileştirmeye yardımcı olmak için kaynak eşlemelerindeki ignoreList alanını ayrıştırır. Console'da aşağıdaki yığın izlemeye göz atın. Geliştirici Araçları, tüm üçüncü taraf kareleri otomatik olarak gizler ve yalnızca kodunuzla alakalı kareleri gösterir.

Resimde, Chrome Geliştirici Araçları'nın ignoreList desteklemesinden önceki ve sonraki yığın izlemeleri gösterilmektedir. Sonraki özellik, hata ayıklama sırasında sorunları daha hızlı tespit etmenize yardımcı olmak için alakasız üçüncü taraf çerçevelerini gizler.

ignoreList nedir?

Kaynak eşleme uzantıları, kaynak eşlemesi hakkında tamamlayıcı bilgileri depolayan ek alanlardır. Bu tür alanların başında x_ bulunur.

Chrome Geliştirici Araçları, oluşturulan kodu filtrelemek ve web geliştiricilerinin yalnızca yazdıkları koda odaklanmasını sağlamak için ignoreList alanını (varsa) kullanır. Örneğin, aşağıdaki kaynak eşlemesini inceleyin.

/* demo.js.map */

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

sources alanında, mappings girişi tarafından kullanılan orijinal kaynakların listesi gösterilir. Eşlemelerin nasıl çalıştığını öğrenmek için Kaynak haritaları nedir? başlıklı videoyu izleyin.

node_modules/…/frameworks.js ve node_modules/.../library.js dosyalarının üçüncü taraf komut dosyaları olduğu düşünülürse, sources alanındaki konumlarını belirtmek için ignoreList alanını belirtebilirsiniz. Chrome Geliştirici Araçları, bu bilgileri yoksayılan dosyalardaki çerçeveleri gizlemek için uygular.

Görüntü, yığın izlemeyi Console'da genişletmenizden önceki ve sonraki yığın izlerini gösterir. Yoksayılan kareler genişletildiğinde devre dışı olur.

Bu durum, ayrılma noktası hata ayıklaması sırasında Kaynaklar panelindeki Çağrı Yığını için de geçerlidir.

Geliştirici Araçları'nın arka planında varsayılan olarak etkinleştirilen ek bir ayar vardır: Bilinen üçüncü taraf komut dosyalarını yoksayılanlar listesine otomatik olarak ekle. Geliştirici Araçları > Ayarlar > Yoksayılanlar Listesi bölümünde bulabilirsiniz.

ignoreList kaynak eşlemesi alanı sayesinde, kodunuza odaklanmak için Kaynaklar panelinde yoksayılan dosyaları gizleme seçeneğiniz vardır.

ignoreList nasıl doldurulur?

Neyse ki Angular ve Nuxt gibi çerçeveler kaynak haritalarında ignoreList zaten yapılandırılıyor. En son sürüme geçirdiğinizde sorunsuz çalışır. Yığın izleme iyileştirmelerini zahmetsizce alırsınız.

Diğer yandan, Vite ve Toplayıcı gibi derleme araçları, bu aracı yapılandırmak için gereken ayarları sağlar. Bunun için bir web paketi eklentisi de var.

Çerçeve veya kitaplık sorumlusuysanız kullanıcılarınızın hata ayıklama deneyimini iyileştirmek için bu ayarları nasıl uygulayacağınızı anlamanız çok önemlidir. Angular ve Nuxt'ın bunu perde arkasında nasıl yaptığını görmek için aşağıdaki bölüme bakın.

Favori çerçeve ve derleme aracınız henüz desteklemiyorsa ne olur?

Çerçevelerle etkin bir şekilde çalışıyor ve bu yeni ortama ayak uyduracak araçlar geliştiriyoruz. Uygulama sahiplerine bu özellik hakkında bilgi vererek de yardımcı olabilirsiniz. Örneğin, ilgili depoda sorun bildiriminde bulunabilirsiniz.

Alternatif olarak, benzer bir sonuç elde etmek için doğrudan Geliştirici Araçları > Kaynaklar > Sayfa bölmesindeki dosya ağacından Alakasız Komut Dosyaları'nı Yoksayılanlar Listesi'ne manuel olarak ekleyebilirsiniz.

Örnek olaylar: Nuxt ve Angular uygulaması

Aşağıdaki iki örnek olayı inceleyin.

Nuxt cinsinden ignoreList

Nuxt sürüm 3.3.1'den itibaren, node_modules ve Nuxt buildDir içerikleri "hata ayıklayıcılar tarafından yoksayılacak" olarak işaretlenmiştir.

Bu, Vite and Rollup kullanılarak Nuxt'ın derleme yapılandırmasında yapılan bir değişiklik ile gerçekleştirildi:

/* 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)
        },
      }
})

Geliştirici Araçları ekibi, bunu mümkün kıldığı için Vite ve Nuxt ekiplerine teşekkür etmek istiyor. Bu uygulamanın başarısında büyük önem taşıyan çabalarınız ve işbirliğiniz için teşekkür ederiz. Katkılarınız için Vite ve Nuxt ekiplerine tekrar teşekkür ederiz!

Açısal olarak ignoreList

Angular 14.1.0 sürümünden itibaren node_modules ve webpack klasörlerinin içeriği "yoksayılacak" olarak işaretlenmiştir.

Bu, web paketinin Compiler modülüne bağlanan bir eklenti oluşturularak angular-cli ürününde yapılan bir değişiklik aracılığıyla gerçekleştirilmiştir.

Mühendislerimizin oluşturduğu web paketi eklentisi, PROCESS_ASSETS_STAGE_DEV_TOOLING aşamasına kancalar ekler ve kaynak haritalardaki ignoreList alanını web paketinin oluşturduğu ve tarayıcının yüklediği nihai öğelerle doldurur.

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)));

Geliştirici Araçları'ndaki diğer Angular hata ayıklama iyileştirmeleri hakkında daha fazla bilgi edinmek için Örnek Olay: Geliştirici Araçları ile Better Angular Hata Ayıklama konusuna bakın.

Chrome Geliştirici Araçları ekibi, bu uygulamanın başarısına yaptıkları paha biçilmez katkılardan dolayı Angular ekibine teşekkürlerimizi iletmek ister. Çabalarınız ve işbirliğiniz bizim için çok önemliydi. Sıkı çalışmalarınız için teşekkür ederiz. Bunu mümkün kıldıkları için Angular Ekibi'ne teşekkür ederiz.