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. Konsolda aşağıdaki yığın izlemeye bakın. Geliştirici Araçları, tüm üçüncü taraf çerçevelerini otomatik olarak gizler ve yalnızca kodunuzla alakalı kareleri gösterir.

Yığın izleme sonuçlarının karşılaştırması.
Bu resimde, Chrome Geliştirici Araçları'nın ignoreList desteklenmesinden önceki ve sonraki yığın izlemeleri gösterilmektedir. Daha sonra, hata ayıklama sırasında sorunları daha hızlı belirlemenize yardımcı olmak için alakasız üçüncü taraf çerçeveleri gizlenir.

ignoreList nedir?

Kaynak eşleme uzantıları, kaynak haritasıyla ilgili tamamlayıcı bilgileri depolayan ek alanlardır. Bu tür alanların başında x_ öneki bulunur.

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

/* 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? konulu videoyu izleyin.

node_modules/…/frameworks.js ve node_modules/.../library.js adlı iki dosya üçü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ı.
Bu resimde, Console'da yığın izleme (stack trace) genişletildikten önceki ve sonraki yığın izlemeler gösterilmektedir. Yoksayılan kareler genişletildiğinde devre dışı bırakılır.

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

Arka planda, Geliştirici Araçları'nda varsayılan olarak etkin olan ek bir ayar bulunur: Bilinen üçüncü taraf komut dosyalarını yoksayılanlar listesine otomatik olarak ekle. Geliştirici Araçları'nda bulabilirsiniz > Ayarlar > Yoksayma Listesi.

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

Yoksayılanlar listesindeki kaynakları gizle.

ignoreList alanını doldurma

Ancak iyi bir haberimiz var. Angular ve Nuxt gibi çerçeveler, ignoreList öğesini halihazırda kaynak eşlemelerinde yapılandırıyor. En son sürüme yükseltin ve kullanıma hazır şekilde kullanabilirsiniz. Yığın izleme iyileştirmelerini kolayca elde edersiniz.

Diğer yandan, Vite ve Rollup gibi derleme araçları, yapılandırma için ayarlar sağlar. Bunun için bir webpack eklentisi de vardır.

Bir çerçeve veya kitaplık bakımcısıysanı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'ın bunu sahne arkasında 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 desteklemiyorsa ne olur?

Çerçevelerle etkin bir şekilde çalışıyor ve bu yeni ayarları yapmak için araçlar geliştiriyoruz. Ürün geliştiricilerine bu özellikle ilgili bilgi vererek de yardımcı olabilirsiniz. Örneğin, depoda bir sorun oluşturabilirsiniz.

Alternatif olarak da doğrudan Geliştirici Araçları'ndaki dosya ağacından alakasız komut dosyalarını yoksayılanlar listesine manuel olarak ekleyebilirsiniz > Kaynaklar > Sayfa bölmesini kullanarak benzer bir sonuç elde edebilirsiniz.

Örnek olaylar: Nuxt ve Angular uygulaması

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

Nuxt'ta ignoreList

Nuxt 3.3.1 sürümü itibarıyla node_modules ve Nuxt buildDir içeriği, "hata ayıklayıcılar tarafından yoksayılacak" olarak işaretlenmiştir.

Bu, Vite and Rollup kullanılarak Nuxt'un derleme yapılandırmasında yapılan bir değişiklik ile elde edildi:

/* 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ılı olması için vazgeçilmez olan, ç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 ederim.

Açısal ignoreList

Açısal v14.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 üzerinde yapılan bir değişiklik ile elde edildi.

Mühendislerimizin oluşturduğu web paketi eklentisi, PROCESS_ASSETS_STAGE_DEV_TOOLING aşamasına kancalar oluşturur 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 Açısal hata ayıklama iyileştirmeleri hakkında daha fazla bilgi edinmek için Örnek Olay: Geliştirici Araçları ile Daha İyi Açısal Hata Ayıklama bölümüne bakın.

Chrome Geliştirici Araçları ekibi, bu uygulamanın başarısına katkılarından dolayı Angular ekibine teşekkürlerimizi sunar. Çalışmalarınız ve işbirliğiniz bizim için çok önemliydi. Sıkı çalışma için teşekkür ederiz. Angular ekibine, bunu mümkün kıldığı için teşekkür ederiz.