ignoreList kaynak haritası uzantısıyla Chrome Geliştirici Araçları'ndaki hata ayıklama deneyimini iyileştirin.
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 göz atın. Geliştirici Araçları, tüm üçüncü taraf karelerini otomatik olarak gizler ve yalnızca kodunuzla alakalı kareleri gösterir.
ignoreList'ı desteklemesinden önce ve sonra yığın izlemeleri gösterilmektedir. Bu seçenek, 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 haritasıyla ilgili tamamlayıcı bilgileri depolayan ek alanlardır. Bu tür alanların önüne x_ ön eki eklenir.
Chrome Geliştirici Araçları, oluşturulan kodu filtrelemek ve web geliştiricilerin yalnızca kendi yazdıkları koda odaklanmasına olanak tanımak için ignoreList alanını (varsa) kullanır. Örneğin, aşağıdaki kaynak haritaya 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ı, bu bilgileri uygulayarak çerçeveleri göz ardı edilen dosyalardan gizler.
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, perde arkasında varsayılan olarak etkin olan ek bir ayar vardır: Bilinen üçüncü taraf komut dosyalarını yoksayılanlar listesine otomatik olarak ekle. DevTools > Ayarlar > Yoksay Listesi'nde bulabilirsiniz.
ignoreList kaynak eşleme alanıyla, kodunuza odaklanmak için Kaynaklar panelinde yoksayılan dosyaları gizleyebilirsiniz.
ignoreList nasıl doldurulur?
Angular ve Nuxt gibi çerçeveler, ignoreList öğesini kaynak haritalarında zaten yapılandırıyor. En son sürüme yükseltin. Hemen çalışır. 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 koruyucusuysanız kullanıcılarınızın hata ayıklama deneyimini iyileştirmek için bu ayarların nasıl uygulanacağını anlamanız önemlidir. Angular ve Nuxt'ın bunu perde arkasında nasıl yaptığını öğrenmek için aşağıdaki bölüme bakın.
En sevdiğiniz çerçeve ve derleme aracı henüz desteklemiyorsa ne olur?
Bu yeni ayarları kullanıma sunmak için çerçevelerle aktif olarak çalışır ve araçlar geliştiririz. Ayrıca, bu özellik hakkında bakım ekibini bilgilendirerek de yardımcı olabilirsiniz. Örneğin, depolarında sorun kaydı oluşturabilirsiniz.
Alternatif olarak, benzer bir sonuç elde etmek için DevTools > Kaynaklar > Sayfa bölmesinde bulunan 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 örnek olaya 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şaretlendi.
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)
},
}
})
DevTools ekibi, bunu mümkün kıldığı için Vite ve Nuxt ekiplerine teşekkürlerini sunmak ister. Bu uygulamanın başarılı olması için gerekli olan çaba 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, webpack'ın Compiler modülüne bağlanan bir eklenti oluşturarak angular-cli'te yapılan bir değişiklik sayesinde başarıldı.
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 Angular hata ayıklama iyileştirmeleri hakkında daha fazla bilgi edinmek için Kasus Çalışması: 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 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. Bunu mümkün kıldığınız için teşekkürler Angular Ekibi.