إضافةتجاهل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" هذه المعلومات لإخفاء الإطارات من تلك الملفات التي تم تجاهلها.

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

وينطبق هذا أيضًا على 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، على جعل هذا ممكنًا!

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

ما هو ignoreList؟

كيفية تعبئة ignoreList