يمكنك تحسين تجربة تصحيح الأخطاء في "أدوات مطوري البرامج في Chrome" باستخدام إضافة خريطة المصادر ignoreList
.
تحلّل "أدوات مطوري البرامج في Chrome" الحقل ignoreList
في خرائط المصادر للمساعدة في تحسين تجربة تصحيح الأخطاء للمطوّرين. يمكنك إلقاء نظرة على تتبُّع تسلسل استدعاء الدوال البرمجية التالي في وحدة التحكّم. تخفي "أدوات مطوري البرامج" تلقائيًا جميع الإطارات التابعة لجهات خارجية ولا تعرض سوى الإطارات ذات الصلة بالرمز البرمجي الخاص بك.
![مقارنة بين نتائج تتبُّع تسلسل استدعاء الدوال البرمجية](https://developer.chrome.com/static/docs/devtools/x-google-ignore-list/image/a-comparison-stack-trace-fe12240f6af81.png?authuser=6&hl=ar)
ignoreList
في "أدوات مطوري البرامج في Chrome" وبعدها. ويؤدي استخدام الإصدار الأحدث إلى إخفاء الإطارات التابعة لجهات خارجية غير الملائمة لمساعدتك في تحديد المشاكل بشكلٍ أسرع أثناء تصحيح الأخطاء.
ما هو ignoreList
؟
إضافات خرائط المصدر هي حقول إضافية تخزِّن معلومات تكميلية حول خريطة المصدر. تبدأ هذه الحقول بـ x_
.
تستخدم "أدوات مطوري البرامج في Chrome" الحقل ignoreList
(إذا تم توفيره) لفلترة الرموز التي تم إنشاؤها والسماح لمطوّري البرامج على الويب بالتركيز فقط على الرمز الذي ينشئونه. على سبيل المثال، يمكنك الاطّلاع على خريطة المصادر التالية.
/* 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
قائمة بالمصادر الأصلية التي يستخدمها الإدخال mappings
. شاهِد مقالة ما المقصود بخرائط المصدر؟ للتعرّف على آلية عمل عمليّات الربط.
بما أنّ الملفين node_modules/…/frameworks.js
وnode_modules/.../library.js
هما نصان برمجيان تابعان لجهة خارجية، يمكنك تحديد الحقل ignoreList
للإشارة إلى موضعهما في الحقل sources
. وستطبّق "أدوات مطوري البرامج في Chrome" هذه المعلومات لإخفاء الإطارات من تلك الملفات التي تم تجاهلها.
![مقارنة بين تتبُّع تسلسل استدعاء الدوال البرمجية المصغَّر والموسّع.](https://developer.chrome.com/static/docs/devtools/x-google-ignore-list/image/a-comparison-collapsed-f1d55a3171404.png?authuser=6&hl=ar)
وينطبق هذا أيضًا على Call Stack في لوحة Sources (المصادر) أثناء تصحيح أخطاء نقاط الإيقاف.
وراء الكواليس، تم تفعيل إعداد إضافي تلقائيًا في "أدوات مطوري البرامج": إضافة النصوص البرمجية المعروفة التابعة لجهات خارجية إلى قائمة التجاهل تلقائيًا. يمكنك العثور عليه في "أدوات مطوري البرامج" > الإعدادات > قائمة التجاهل.
من خلال حقل ignoreList
لخريطة المصدر، لديك خيار إخفاء الملفات التي تم تجاهلها في لوحة المصادر للتركيز على الرمز.
كيفية تعبئة ignoreList
والخبر السار هو أنّ أُطر عمل مثل Angular وNuxt سبق أن ضبطت ignoreList
في خرائط المصدر. عليك الترقية إلى أحدث إصدار وهو يعمل بطريقة غير تقليدية. يمكنك إجراء تحسينات على تتبُّع تسلسل استدعاء الدوال البرمجية بدون عناء.
من ناحية أخرى، توفّر أدوات الإنشاء مثل Vite وRollup الإعدادات اللازمة لضبطها. ويتوفّر أيضًا مكوّن Webpack الإضافي لإجراء ذلك.
إذا كنت تعمل على صيانة إطار عمل أو مكتبة، من الضروري فهم كيفية تنفيذ هذه الإعدادات لتحسين تجربة تصحيح أخطاء المستخدمين. يرجى الاطلاع على القسم التالي لمعرفة كيف قامت Angular وNuxt بذلك وراء الكواليس.
ماذا لو كان إطار العمل وأداة التصميم المفضّل لديك لا يدعمهما بعد؟
ونعمل بنشاط مع أطر العمل وننشئ أدوات للوصول إلى هذه الإعدادات الجديدة. ويمكنك المساعدة أيضًا من خلال إعلام المشرفين بهذه الميزة. على سبيل المثال، يمكنك تسجيل مشكلة في مستودعه.
وبدلاً من ذلك، يمكنك يدويًا إضافة نصوص برمجية غير ذات صلة إلى قائمة التجاهل مباشرةً من شجرة الملفات ضمن "أدوات مطوري البرامج" > المصادر > لوحة الصفحة لتحقيق نتيجة مماثلة.
دراسات الحالة: تنفيذ Nuxt وAngular
ألق نظرة على دراستَي الحالة التاليين.
ignoreList
بعملة Nuxt
بدءًا من الإصدار 3.3.1 من Nuxt، تم وضع علامة على محتوى node_modules
وNuxt buildDir
بأنّه "سيتم تجاهله من خلال برامج تصحيح الأخطاء".
وقد تم تحقيق ذلك من خلال إجراء تغيير في إعدادات تصميم Nuxt باستخدام Vite and Rollup:
/* 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)
},
}
})
يرغب فريق أدوات مطوّري البرامج في التعبير عن امتنانه لفريقَي Vite وNuxt لإتاحة استخدامهما. نحن نقدّر جهودك وتعاونك اللذين كانا ضروريين لنجاح عملية التنفيذ هذه. شكرًا مرة أخرى لفريقَي Vite وNuxt على مساهماتك.
ignoreList
بتنسيق Angular
بدءًا من الإصدار 14.1.0 من Angular، تم وضع علامة على محتوى المجلدَين node_modules
وwebpack
تشير إلى أنّه "للتجاهل".
وقد تم تحقيق ذلك من خلال إجراء تغيير في angular-cli
من خلال إنشاء مكوِّن إضافي يتم ربطه بوحدة Compiler
الخاصة بحزمة الويب.
إنّ مكوّن حزمة الويب الإضافي الذي أنشأه مهندسونا عبارة عن عناصر الجذب في المرحلة PROCESS_ASSETS_STAGE_DEV_TOOLING
ويعمل على تعبئة الحقل ignoreList
في خرائط المصدر بمواد العرض النهائية التي تنشئها حزمة الويب ويحمِّلها المتصفّح.
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)));
لمزيد من المعلومات عن التحسينات الأخرى في تصحيح الأخطاء الزاوي في "أدوات مطوري البرامج"، يُرجى الاطّلاع على دراسة حالة: تصحيح الأخطاء زاوية أفضل باستخدام أدوات مطوّري البرامج.
يرغب فريق أدوات مطوري البرامج في Chrome في التعبير عن امتناننا لفريق Angular لمساهماتهم القيّمة في نجاح عملية التنفيذ هذه. كانت جهودك وتعاونك ضرورية، ونقدّر جهودك الكبيرة. شكرًا لك، فريق Angular، على جعل هذا ممكنًا!