ignoreList
kaynak eşlemesi 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ş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.
![Yığın izleme sonuçlarının karşılaştırması.](https://developer.chrome.com/static/docs/devtools/x-google-ignore-list/image/a-comparison-stack-trace-fe12240f6af81.png?authuser=5&hl=tr)
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.
![Daraltılmış ve genişletilmiş yığın izlemenin karşılaştırması.](https://developer.chrome.com/static/docs/devtools/x-google-ignore-list/image/a-comparison-collapsed-f1d55a3171404.png?authuser=5&hl=tr)
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.