تصحيح أخطاء الويب الحديث في "أدوات مطوري البرامج في Chrome"

Bramus

Victor Porof

مقدمة

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

على سبيل المثال، تتم كتابة المكونات التي تم إنشاؤها فوق إطار عمل Angular في TypeScript باستخدام نماذج HTML. في الخيارات المتقدمة، يجمع Angular CLI وحزمة الويب كل شيء في JavaScript ويجمع ما يُعرف باسم حزمة، ويتم شحنها بعد ذلك إلى المتصفّح.

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

• ليس عليك تصحيح أخطاء رمز JavaScript المصغّر، بل تريد تصحيح أخطاء رمز JavaScript الأصلي.
• عند استخدام TypeScript، لا تريد تصحيح أخطاء JavaScript، بل تحتاج إلى تصحيح أخطاء رمز TypeScript الأصلي.
• عند استخدام النماذج مثل Angular أو Lit أو JSX، لن تحتاج دائمًا إلى تصحيح أخطاء DOM الناتج. وقد تحتاج إلى تصحيح أخطاء المكوّنات نفسها.

بشكل عام، قد تحتاج إلى تصحيح أخطاء الرمز البرمجي الخاص بك كما كتبته.

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

لنلقِ نظرةً على هذه النقاط.

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

رمز التأليف مقابل الرمز المنشور

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

هذا ليس مفيدًا جدًا ويصعب استيعابه غالبًا. وبصفتك مؤلفًا، عليك الاطّلاع على الرمز الذي كتبته وتصحيح الأخطاء فيه، وليس الرمز المنشور.

لتعويض هذا الإجراء، يمكنك الآن أن تطلب من الشجرة عرض الرمز المؤلف بدلاً من ذلك. وهذا يجعل الشجرة شبيهة جدًا بملفات المصدر التي تظهر لك في بيئة التطوير المتكاملة (IDE)، ويتم الآن فصل هذه الملفات عن الرمز المنشور.

لتفعيل هذا الخيار في "أدوات مطوري البرامج في Chrome"، انتقِل إلى الإعدادات >. التجارب ووضع علامة في المربّع تجميع المصادر في أشجار مؤلفة وأخرى منشورة.

ملاحظة: يخطّط فريق "أدوات مطوري البرامج في Chrome" لتفعيل هذه التجربة تلقائيًا قريبًا. أرسِل إلينا ملاحظاتك هنا.

"رمزي فقط"

ملاحظة: هذه ميزة معاينة متاحة في Chrome Canary من الإصدار 106.

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

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

عند تفعيل هذا الإعداد، تُخفي "أدوات مطوري البرامج" أي ملف أو مجلد تم وضع علامة للتجاهل عليه ضمن إطار العمل أو أداة إنشاء.

اعتبارًا من الإصدار 14.1.0 من Angular، تم تصنيف محتوى المجلدَين node_modules وwebpack على هذا النحو. لذلك، لا تظهر هذه المجلدات والملفات الموجودة فيها وغيرها من العناصر التابعة لجهات خارجية في أماكن مختلفة ضمن "أدوات مطوري البرامج".

وبصفتك مؤلفًا، لا تحتاج إلى اتخاذ أي إجراء لتفعيل هذا السلوك الجديد. الأمر متروك لإطار العمل لتنفيذ هذا التغيير.

ملاحظة: يتم تفعيل ميزة إدراج التجاهل من خلال تعبئة حقل x_google_ignoreList إضافي في خريطة المصدر التي ينشئها Angular عند تجميع المشروع. يشجِّع فريق "أدوات مطوري البرامج في Chrome" مؤلفي إطار العمل الآخرين على تنفيذ تغيير مماثل. لمزيد من التفاصيل، يُرجى الاطّلاع على مشاركة دراسة الحالة: Better Angular Debugging باستخدام "أدوات مطوّري البرامج".

الرمز المدرَج في قائمة التجاهل في عمليات تتبُّع تسلسل استدعاء الدوال البرمجية

أحد الأماكن التي لم تعد تظهر فيها هذه الملفات المدرَجة في القائمة التجاهل هو عمليات تتبُّع تسلسل استدعاء الدوال البرمجية. بصفتك مؤلفًا، يمكنك الآن الاطّلاع على المزيد من عمليات تتبُّع تسلسل استدعاء الدوال البرمجية ذات الصلة.

إذا أردت عرض جميع إطارات عمليات تتبُّع تسلسل استدعاء الدوال البرمجية، يمكنك دائمًا النقر على الرابط عرض المزيد من الإطارات.

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

رمز قائمة التجاهل في شجرة الملفات

لإخفاء الملفات والمجلدات المُدرَجة في قائمة التجاهل من شجرة ملف الكود المؤلف في لوحة المصادر، حدِّد إخفاء الرمز المُدرج في قائمة التجاهل في العرض التدرّجي للمصادر في الإعدادات > التجارب في "أدوات مطوري البرامج"

في نموذج مشروع Angular، أصبح المجلدان node_modules وwebpack مخفيَين الآن.

رمز مُدرَج في قائمة التجاهل في قائمة "الفتح السريع"

الرمز المُدرج المُتجاهل ليس مخفيًا فقط من شجرة الملفات، ولكنه أيضًا مخفي من قائمة "الفتح السريع" (Control+P (Linux/Windows) أو Command+P (Mac)).

مزيد من التحسينات على عمليات تتبُّع تسلسل استدعاء الدوال البرمجية

بعد أن تناولت "أدوات مطوري البرامج في Chrome" عمليات تتبُّع تسلسُل استدعاء الدوال البرمجية ذات الصلة، فهي تقدّم المزيد من التحسينات على عمليات تتبُّع تسلسُل استدعاء الدوال البرمجية.

عمليات تتبُّع تسلسل استدعاء الدوال البرمجية المرتبطة

عند جدولة بعض العمليات بشكل غير متزامن، تعمل عمليات تتبُّع تسلسل استدعاء الدوال البرمجية في "أدوات مطوّري البرامج" حاليًا على سرد جزء من القصة فقط.

على سبيل المثال، إليك أداة جدولة بسيطة جدًا في ملف framework.js افتراضي:

function makeScheduler() {
  const tasks = [];

  return {
    schedule(f) {
      tasks.push({ f });
    },

    work() {
      while (tasks.length) {
        const { f } = tasks.shift();
        f();
      }
    },
  };
}

const scheduler = makeScheduler();

function loop() {
  scheduler.work();
  requestAnimationFrame(loop);
};

loop();

... وكيف يمكن أن يستخدمها مطوّر برامج في الترميز الخاص به في ملف example.js:

function someTask() {
  console.trace("done!");
}

function businessLogic() {
  scheduler.schedule(someTask);
}

businessLogic();

عند إضافة نقطة توقف داخل طريقة someTask أو عند فحص آثار التتبُّع المطبوع في وحدة التحكّم، لن يظهر لك أي إشارة إلى استدعاء businessLogic() الذي كان "السبب الأساسي" لهذه العملية.

بدلاً من ذلك، لن يظهر لك سوى منطق جدولة إطار العمل الذي أدّى إلى تنفيذ المهمة بدون أشرطة تنقّل في تتبُّع تسلسل استدعاء الدوال البرمجية لمساعدتك في معرفة الروابط السببية بين الأحداث التي تؤدي إلى هذه المهمة.

وبفضل الميزة الجديدة التي تُعرف باسم "وضع العلامات غير المتزامن"، أصبح من الممكن سرد القصة كاملةً من خلال ربط كلا الجزأين من الرمز البرمجي غير المتزامن معًا.

تقدّم Async Stack Tagging API طريقة console جديدة باسم console.createTask(). في ما يلي توقيع واجهة برمجة التطبيقات:

interface Console {
  createTask(name: string): Task;
}

interface Task {
  run<T>(f: () => T): T;
}

يعرض استدعاء console.createTask() نسخة افتراضية من Task يمكنك استخدامها لاحقًا لتشغيل محتوى المهمة f.

// Task Creation
const task = console.createTask(name);

// Task Execution
task.run(f);

تشكل المهمة الرابط بين السياق الذي تم إنشاؤها فيه وسياق الدالة غير المتزامنة التي يتم تنفيذها.

ملاحظة: تتوفّر واجهة برمجة التطبيقات غير المتزامنة لوضع العلامات على تسلسل استدعاء الدوال البرمجية من الإصدار Chrome 106.

عند تطبيق الرمز على الدالة makeScheduler أعلاه، يصبح الرمز كما يلي:

function makeScheduler() {
  const tasks = [];

  return {
    schedule(f) {
      const task = console.createTask(f.name);
      tasks.push({ task, f });
    },

    work() {
      while (tasks.length) {
        const { task, f } = tasks.shift();
        task.run(f); // instead of f();
      }
    },
  };
}

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

لاحِظ كيف يتم تضمين businessLogic() الآن في تقرير تتبُّع تسلسل استدعاء الدوال البرمجية. ليس هذا فحسب، بل تحمل المهمة اسمًا مألوفًا someTask بدلاً من requestAnimationFrame العام كما في السابق.

ملاحظة: لا داعي للقلق في أغلب الأحيان بشأن واجهة برمجة التطبيقات Async Stack Tagging API، لأنّ إطار العمل الذي تستخدمه يعالج عملية الجدولة والتنفيذ غير المتزامن. في هذه الحالة، يكون الأمر متروكًا لإطار العمل لتنفيذ واجهة برمجة التطبيقات.

إطارات مكالمات ملائمة

غالبًا ما تنشئ أطر العمل رموزًا من جميع أنواع لغات النماذج عند إنشاء مشروع، مثل نماذج Angular أو JSX التي تحوِّل الرمز البرمجي الذي يشبه HTML إلى JavaScript عادي يتم تشغيله في النهاية في المتصفّح. في بعض الأحيان، يتم إعطاء هذه الأنواع من الدوال التي تم إنشاؤها أسماء غير مألوفة - إما أسماء أحرف مفردة بعد تصغيرها أو بعض الأسماء الغامضة أو غير المألوفة حتى عندما لا تكون كذلك.

في نموذج المشروع، من الأمثلة على ذلك AppComponent_Template_app_button_handleClick_1_listener الذي يظهر في تقرير تتبُّع تسلسل استدعاء الدوال البرمجية.

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

وبصفتك مؤلفًا، لا تحتاج إلى اتخاذ أي إجراء لتفعيل هذا السلوك الجديد. الأمر متروك لإطار العمل لتنفيذ هذا التغيير.

نظرة مستقبلية

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

يشجّع فريق "أدوات مطوري البرامج في Chrome" مؤلفي إطار العمل على اعتماد هذه الإمكانات الجديدة. تقدّم دراسة الحالة: Better Angular Debugging باستخدام "أدوات مطوّري البرامج" إرشادات حول كيفية تنفيذ ذلك.