تصحيح أخطاء الويب الحديث في "أدوات مطوري البرامج في 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 على أنّه محتوى ثنائي. لذلك، لا تظهر هذه المجلدات والملفات ضمنها وغيرها من العناصر التابعة لجهات خارجية في أماكن مختلفة في DevTools.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

على سبيل المثال، في ما يلي جدول زمني بسيط جدًا في ملف 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 إرشادات حول كيفية تنفيذ ذلك.