ignoreList kaynak eşlemesi uzantısı

ignoreList kaynak eşleme 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ştirmek için kaynak haritalarındaki ignoreList alanını ayrıştırır. Konsol'da aşağıdaki yığın izlemeye (stack trace) göz atın. Geliştirici Araçları, tüm üçüncü taraf çerçevelerini otomatik olarak gizler ve yalnızca kodunuzla alakalı çerçeveleri gösterir.

Yığın izleme sonuçlarının karşılaştırması.
Resimde, Chrome Geliştirici Araçları ignoreList özelliğini desteklemeden önceki ve sonraki yığın izlemeleri gösterilmektedir. İkincisi, 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şleme hakkında tamamlayıcı bilgileri depolayan ek alanlardır. Bu tür alanların önüne x_ eklenir.

Chrome Geliştirici Araçları, oluşturulan kodu filtrelemek ve web geliştiricilerin yalnızca kendi yazdıkları koda odaklanmasını sağlamak için ignoreList alanını (sağlanmışsa) kullanır. Örneğin, aşağıdaki kaynak haritasını 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ı, mappings girişi tarafından kullanılan orijinal kaynakların listesini gösterir. Eşlemelerin işleyiş şeklini öğrenmek için Kaynak haritaları nedir? başlıklı videoyu izleyin.

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

Daraltılmış ve genişletilmiş yığın izlemenin karşılaştırması.
Resimde, Console'da yığın izlemeyi genişletmeden önceki ve sonraki yığın izlemeler gösterilmektedir. Yoksayılan kareler genişletildiğinde devre dışı bırakılır.

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

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

ignoreList kaynak eşleme alanı sayesinde, kodunuza odaklanmak için Kaynaklar panelinde yoksayılan dosyaları gizleyebilirsiniz.

Yoksayılanlar listesindeki kaynakları gizle

ignoreList nasıl doldurulur?

İyi haber şu ki Angular ve Nuxt gibi çerçeveler, kaynak haritalarında ignoreList öğesini zaten yapılandırıyor. En yeni sürüme yükselttiğinizde hemen kullanmaya başlayabilirsiniz. Yığın izleme (stack trace) iyileştirmelerini zahmetsizce elde edersiniz.

Öte yandan, Vite ve Rollup gibi derleme araçları, bunu yapılandırmak için ayarlar sağlar. Bunun için bir webpack eklentisi de vardır.

Ç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 önemlidir. Angular ve Nuxt'un bunu arka planda nasıl yaptığını görmek için aşağıdaki bölüme bakın.

En sevdiğiniz çerçeve ve derleme aracı henüz bu özelliği desteklemiyorsa ne yapabilirsiniz?

Bu yeni ayarları uygulamak için çerçeveler ve derleme araçlarıyla aktif olarak çalışıyoruz. Ayrıca, bu özellik hakkında yöneticileri bilgilendirerek de yardımcı olabilirsiniz. Örneğin, projenin deposunda bir sorun bildirebilirsiniz.

Alternatif olarak, benzer bir sonuç elde etmek için DevTools > Sources (Kaynaklar) > Page (Sayfa) panelindeki dosya ağacından alakasız komut dosyalarını yoksayılanlar listesine manuel olarak ekleyebilirsiniz.

Örnek olaylar: Nuxt ve Angular uygulaması

Aşağıdaki iki başarılı örneğe göz atın.

Nuxt'ta ignoreList

Nuxt v3.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 ve Rollup kullanılarak Nuxt'un derleme yapılandırmasında yapılan bir değişiklik ile sağlandı:

/* 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, bu özelliği mümkün kılan Vite ve Nuxt ekiplerine teşekkür eder. Bu uygulamanın başarılı olmasında önemli rol oynayan çabalarınız ve işbirliğiniz için teşekkür ederiz. Katkılarından dolayı Vite ve Nuxt ekiplerine tekrar teşekkür ederiz.

Angular'da 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, webpack'in Compiler modülüne bağlanan bir eklenti oluşturarak angular-cli üzerinde yapılan bir değişiklikle gerçekleştirildi.

Mühendislerimizin oluşturduğu webpack eklentisi, PROCESS_ASSETS_STAGE_DEV_TOOLING aşamasına bağlanır ve kaynak haritalardaki ignoreList alanını, webpack'in 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 Daha İyi Angular Hata Ayıklama başlıklı makaleyi inceleyin.

Chrome Geliştirici Araçları ekibi, bu uygulamanın başarısına yaptıkları değerli katkılardan dolayı Angular ekibine teşekkür eder. Çabalarınız ve işbirliğiniz bizim için çok önemliydi. Sıkı çalışmanız için teşekkür ederiz. Bunu mümkün kıldığı için Angular ekibine teşekkür ederiz.