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

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

Jecelyn Yeen

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

تعرض الصورة تتبُّع تسلسل استدعاء الدوال البرمجية قبل وبعد إتاحة 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" هذه المعلومات لإخفاء الإطارات من تلك الملفات التي تم تجاهلها.

تعرض الصورة تتبُّع تسلسل استدعاء الدوال البرمجية قبل توسيعه وبعده في Console. وتظهر الإطارات التي تم تجاهلها باللون الرمادي عند توسيعها.

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

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

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

كيفية تعبئة ignoreList

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

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

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

ماذا لو لم يكن إطار العمل وأداة الإنشاء المفضّلين لديك متوافقَين مع هذه الميزة بعد؟

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

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

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

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

‫ignoreList في Nuxt

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

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

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

‫ignoreList في Angular

Starting from Angular v14.1.0, the contents of the node_modules and webpack folders have been marked as "to ignore".

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

يرتبط المكوّن الإضافي webpack الذي أنشأه مهندسونا بمرحلة PROCESS_ASSETS_STAGE_DEV_TOOLING ويملأ حقل ignoreList في خرائط المصدر بالمواد النهائية التي ينشئها webpack ويحمّلها المتصفّح.

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 في "أدوات مطوّري البرامج"، يمكنك الاطّلاع على دراسة حالة: تصحيح أخطاء Angular بشكل أفضل باستخدام "أدوات مطوّري البرامج".

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