ignoreList
kaynak eşleme 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. 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ı.](https://developer.chrome.google.cn/static/docs/devtools/x-google-ignore-list/image/a-comparison-stack-trace-fe12240f6af81.png?authuser=9&hl=tr)
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ı.](https://developer.chrome.google.cn/static/docs/devtools/x-google-ignore-list/image/a-comparison-collapsed-f1d55a3171404.png?authuser=9&hl=tr)
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.
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.