إضافةتجاهلList لخريطة المصدر

يمكنك تحسين تجربة تصحيح الأخطاء في "أدوات مطوري البرامج في Chrome" باستخدام إضافة خريطة المصدر "ignoreList".

Jecelyn Yeen

تُحلّل "أدوات مطوري البرامج في Chrome" حقل ignoreList في الخرائط المصدر للمساعدة في تحسين تجربة تصحيح الأخطاء للمطوّرين. يمكنك الاطّلاع على تتبُّع تسلسل استدعاء الدوال البرمجية التالي في وحدة التحكّم. تُخفي "أدوات مطوري البرامج" جميع الإطارات التابعة لجهات خارجية تلقائيًا ولا تعرض سوى الإطارات ذات الصلة بالرمز البرمجي الخاص بك.

مقارنة بين نتائج تتبُّع تسلسل استدعاء الدوال البرمجية — تعرض الصورة عمليات تتبُّع تسلسُل استدعاء الدوال البرمجية قبل "أدوات مطوري البرامج في Chrome" وبعدها تتوافق مع `ignoreList`. وتخفي هذه الميزة الإطارات التابعة لجهات خارجية غير ذات صلة لمساعدتك في تحديد المشاكل بشكل أسرع أثناء تصحيح الأخطاء.

ما المقصود بـ `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" هذه المعلومات لإخفاء الإطارات من هذه الملفات التي تم تجاهلها.

مقارنة بين قائمة تتبُّع تسلسل استدعاء الدوال البرمجية المصغّرة والموسَّعة — تعرض الصورة عمليات تتبُّع تسلسل استدعاء الدوال البرمجية قبل توسيع تتبُّع تسلسل استدعاء الدوال البرمجية وبعده في وحدة التحكّم. وتظهر الإطارات التي تم تجاهلها باللون الرمادي عند توسيعها.

ينطبق ذلك أيضًا على حزمة الطلبات في لوحة المصادر أثناء تصحيح أخطاء نقاط التوقف.

في الخلفية، تم تفعيل إعداد إضافي في "أدوات مطوري البرامج" بشكل تلقائي: إضافة النصوص البرمجية المعروفة التابعة لجهات خارجية إلى قائمة التجاهل تلقائيًا. يمكنك العثور عليه في "أدوات مطوري البرامج" > الإعدادات > قائمة التجاهل:

باستخدام حقل خريطة المصدر ignoreList، يتوفّر لك خيار إخفاء الملفات التي تم تجاهلها في لوحة المصادر للتركيز على الرمز البرمجي.

إخفاء المصادر المدرَجة في قائمة التجاهل.

كيفية تعبئة `ignoreList`

الخبر السار هو أنّ هناك أُطر عمل مثل Angular وNuxt سبق أن تم ضبطها على ignoreList في خرائط المصدر. اعمد إلى الترقية إلى أحدث إصدار، وسيعمل بشكلٍ فوري. يمكنك إجراء تحسينات على عملية تتبُّع تسلسل استدعاء الدوال البرمجية بسهولة.

من ناحية أخرى، توفّر أدوات إنشاء مثل Vite وRollup إعدادات لضبطها. يتوفّر أيضًا مكوّن webpack الإضافي لإجراء ذلك.

إذا كنت تعمل على صيانة إطار عمل أو مكتبة، فمن الضروري أن تفهم كيفية تنفيذ هذه الإعدادات لتحسين تجربة تصحيح الأخطاء للمستخدمين. انظر القسم التالي لمشاهدة كيف قامت Angular وNuxt بذلك وراء الكواليس.

ماذا لو لم يدعمه إطار العمل وأداة التصميم المفضّل لديك حتى الآن؟

نحن نعمل جاهدين على تطوير أُطر العمل وأدوات للوصول إلى هذه الإعدادات الجديدة. يمكنك أيضًا المساعدة من خلال إشعار مستخدمي الصيانة بشأن هذه الميزة. على سبيل المثال، يمكنك الإبلاغ عن مشكلة في المستودع.

بدلاً من ذلك، يمكنك يدويًا إضافة النصوص البرمجية غير ذات الصلة إلى قائمة التجاهل مباشرةً من شجرة الملفات في "أدوات مطوّري البرامج" > المصادر > لوحة الصفحة لتحقيق نتيجة مشابهة.

دراسات الحالة: تنفيذ Nuxt وAngular

ألق نظرة على دراسات الحالة التالية.

`ignoreList` في Nuxt

بدءًا من الإصدار 3.3.1 من Nuxt، تم وضع علامة على محتوىَي node_modules وNuxt buildDir كمحتوى "يتجاهله برامج تصحيح الأخطاء".

تم تحقيق ذلك من خلال تغيير في إعدادات إصدار Nuxt باستخدام Vite و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)
        },
      }
})

يود فريق DevTools التعبير عن الامتنان لفريقَي Vite وNuxt على إتاحة ذلك. نحن نُقدِّر جهودك وتعاونك التي كانت ضرورية لنجاح عملية التنفيذ هذه. شكرًا مرة أخرى لفريقَي Vite وNuxt على مساهماتك.

`ignoreList` في Angular

بدايةً من الإصدار 14.1.0 من Angular، تم وضع علامة "للتجاهل" على محتوى المجلد node_modules وwebpack.

وقد تم تحقيق ذلك من خلال تغيير في angular-cli من خلال إنشاء مكوّن إضافي يربط بوحدة Compiler على الويب.

يعمل مكوِّن webpack الإضافي الذي أنشأه مهندسونا على جذب عنصر الجذب إلى المرحلة 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)));

للاطّلاع على مزيد من المعلومات حول التحسينات الأخرى في تصحيح الأخطاء في Angular في "أدوات مطوري البرامج"، يُرجى الاطّلاع على دراسة حالة: Better Angular Debugging باستخدام "أدوات مطوّري البرامج".

يود فريق "أدوات مطوري البرامج في Chrome" أن يعبّر عن امتناننا لفريق Angular على مساهماته القيّمة في نجاح عملية التنفيذ هذه. كانت جهودك وتعاونك ضرورية، ونقدّر عملك الشاق. شكرًا لفريق Angular على إتاحة هذه الفرصة.

إضافةتجاهلList لخريطة المصدر

ما المقصود بـ ignoreList؟

كيفية تعبئة ignoreList