تصحيح أخطاء الويب الحديث في "أدوات مطوري البرامج في 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".

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

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

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

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

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

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

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

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

التعليمات البرمجية المدرَجة في قائمة التجاهل في شجرة الملفات

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

في نموذج مشروع Angular، تم الآن إخفاء المجلدين node_modules وwebpack.

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

لا تقتصر الرموز المدرَجة التي تم تجاهلها على شجرة الملفات فحسب، بل يتم إخفاؤها أيضًا من قائمة "Quick Open" (فتح سريع) (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" مؤلفي أُطر العمل على تبنّي هذه الإمكانات الجديدة. تقدّم دراسة الحالة: تصحيح الأخطاء بطريقة أفضل باستخدام أدوات مطوّري البرامج إرشادات حول كيفية تنفيذ ذلك.