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

Bramus

Victor Porof

مقدمة

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

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

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

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

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

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

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

الرمز المُنشأ مقابل الرمز المنشور

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

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

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

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

"رمزي فقط"

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

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

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

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

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

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

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

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

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

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

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

في نموذج مشروع 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);

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

عند تطبيقها على الدالة 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 كما في السابق.

إطارات المكالمات الودية

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

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

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

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

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

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

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