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

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

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

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

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

كيفية تعبئة ignoreList

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

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

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

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

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

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

دراسات الحالة: تنفيذ 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)
        },
      }
})

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

ignoreList في Angular

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

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

يعمل مكوِّن 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 DevTools التعبير عن امتنانه لفريق Angular على مساهماته القيّمة في نجاح عملية التنفيذ هذه. كانت جهودك وتعاونك ضرورية، ونقدّر عملك الشاق. شكرًا لفريق Angular على إتاحة هذه الفرصة.