تجربة تصحيح أخطاء محسَّنة
على مدار الأشهر القليلة الماضية، تعاون فريق "أدوات مطوري البرامج في Chrome" مع فريق Angular لإجراء تحسينات على تجربة تصحيح الأخطاء في "أدوات مطوري البرامج في Chrome". لقد تعاون العاملون في الفريقَين معًا واتخذوا خطوات تهدف إلى تمكين المطوّرين من تصحيح الأخطاء في تطبيقات الويب وإنشاء ملفات شخصية لها من منظور التأليف: من حيث اللغة المصدر وبنية المشروع مع إمكانية الوصول إلى المعلومات التي تكون مألوفة لهم.
تشرح هذه المشاركة بالتفصيل التغييرات التي يجب إجراؤها في Angular وChrome DevTools. على الرغم من توضيح بعض هذه التغييرات من خلال Angular، يمكن تطبيقها على أُطر عمل أخرى أيضًا. يشجِّع فريق "أدوات مطوري البرامج في Chrome" أطر العمل الأخرى على استخدام واجهات برمجة التطبيقات الجديدة لوحدات التحكّم ونقاط إضافة خريطة المصدر حتى تتمكّن أيضًا من تقديم تجربة تصحيح أفضل للمستخدمين.
رمز إدراج التجاهل
عند تصحيح أخطاء التطبيقات باستخدام "أدوات مطوري البرامج في Chrome"، يريد المؤلفون عمومًا رؤية الرموز البرمجية الخاصة بهم فقط، وليس رمز إطار العمل السفلي أو بعض الاعتمادية التي تم الاحتفاظ بها في المجلد node_modules.
لتحقيق ذلك، قدَّم فريق "أدوات مطوري البرامج" إضافة إلى خرائط المصدر تُسمى x_google_ignoreList. ويتم استخدام هذه الإضافة لتحديد مصادر الجهات الخارجية مثل رمز إطار العمل أو الرمز الذي ينشئه برنامج التجميع. عند استخدام إطار عمل لهذه الإضافة، يتجنّب المؤلفون الآن تلقائيًا الرموز التي لا يريدون الاطّلاع عليها أو تصفُّحها بدون الحاجة إلى ضبط ذلك يدويًا مسبقًا.
من الناحية العملية، يمكن أن تخفي "أدوات مطوري البرامج في Chrome" تلقائيًا الرمز البرمجي الذي تم تحديده على هذا النحو في عمليات تتبُّع تسلسُل استدعاء الدوال البرمجية وشجرة المصادر ومربع حوار "الفتح السريع"، كما يحسِّن سلوك خطوة الاستدعاء واستئنافه في برنامج تصحيح الأخطاء.
إضافة خريطة المصدر "x_google_ignoreList"
في خرائط المصدر، يشير الحقل x_google_ignoreList الجديد إلى المصفوفة sources، ويعرض فهارس كل المصادر المعروفة التابعة لجهات خارجية في خريطة المصدر هذه. عند تحليل خريطة المصدر، ستستخدم أدوات مطوري البرامج في Chrome هذا الخيار لتحديد أقسام الرمز التي يجب إدراجها ضمن قائمة التجاهل.
في ما يلي خريطة مصادر للملف الذي تم إنشاؤه out.js. هناك نوعان من sources أصلي ساهما في إنشاء ملف الناتج: foo.js وlib.js. الأولى هي شيء كتبه مطور مواقع الويب وثانيه إطار عمل استخدمه.
{
"version" : 3,
"file": "out.js",
"sourceRoot": "",
"sources": ["foo.js", "lib.js"],
"sourcesContent": ["...", "..."],
"names": ["src", "maps", "are", "fun"],
"mappings": "A,AAAB;;ABCDE;"
}
يتم تضمين sourcesContent لكل من هذه المصادر الأصلية وستعرض "أدوات مطوري البرامج في Chrome" هذه الملفات تلقائيًا في برنامج تصحيح الأخطاء:
- كملفات في شجرة المصادر.
- كنتائج في مربّع حوار "الفتح السريع".
- عندما يتم ربط المواقع الجغرافية لإطارات المكالمات في عمليات تتبُّع تسلسُل استدعاء الدوال البرمجية، عندما يتم إيقافها مؤقتًا عند نقطة توقف وأثناء التحرك.
هناك معلومة إضافية يمكن تضمينها الآن في خرائط المصدر لتحديد أي من هذه المصادر هو رمز برمجي للطرف الأول أو لجهة خارجية:
{
...
"sources": ["foo.js", "lib.js"],
"x_google_ignoreList": [1],
...
}
يحتوي حقل x_google_ignoreList الجديد على فهرس واحد يشير إلى المصفوفة sources: 1. يحدّد ذلك أنّ المناطق المرتبطة بـ lib.js هي في الواقع رمز تابع لجهة خارجية ويجب إضافته تلقائيًا إلى قائمة التجاهل.
في مثال أكثر تعقيدًا كما هو موضّح أدناه، تحدد الفهارس 2 و4 و5 أن المناطق التي تم ربطها بـ lib1.ts وlib2.coffee وhmr.js هي رموز جهة خارجية يجب إضافتها تلقائيًا إلى قائمة التجاهل.
{
...
"sources": ["foo.html", "bar.css", "lib1.ts", "baz.js", "lib2.coffee", "hmr.js"],
"x_google_ignoreList": [2, 4, 5],
...
}
إذا كنت مطوّر إطار عمل أو مطوّر برامج، تأكَّد من أنّ خرائط المصدر التي تم إنشاؤها أثناء عملية التصميم تتضمّن هذا الحقل للاستفادة من هذه الإمكانات الجديدة المتوفّرة في "أدوات مطوري البرامج في Chrome".
x_google_ignoreList في Angular
بدءًا من الإصدار 14.1.0 من Angular، تم وضع علامة "تجاهل" على محتوى المجلد node_modules وwebpack.
تم تحقيق ذلك من خلال تغيير في angular-cli من خلال إنشاء مكوّن إضافي يثبّت وحدة Compiler في حزمة الويب.
يعمل مكوِّن webpack الإضافي الذي أنشأه مهندسونا على جذب عنصر الجذب إلى المرحلة PROCESS_ASSETS_STAGE_DEV_TOOLING وملء الحقل x_google_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[`x_google_ignoreList`] = ignoreList;
compilation.updateAsset(name, new RawSource(JSON.stringify(map)));
عمليات تتبُّع تسلسل استدعاء الدوال البرمجية المرتبطة
يجيب تتبُّع تسلسل استدعاء الدوال البرمجية على سؤال "كيف وصلت إلى هنا"، ولكن في كثير من الأحيان يكون ذلك من منظور الجهاز، وليس بالضرورة مع شيء يناسب منظور مطوّر البرامج أو نموذجه العقلي لوقت تشغيل التطبيق. ينطبق ذلك بوجه خاص عندما تتم جدولة بعض العمليات بشكل غير متزامن في وقت لاحق، إذ قد يكون من المهم معرفة "السبب الأساسي" أو جانب الجدولة لهذه العمليات، ولكن هذا بالضبط شيء لن يكون جزءًا من تتبُّع تسلسل استدعاء الدوال البرمجية غير المتزامن.
يتضمّن V8 داخليًا آلية لتتبُّع هذه المهام غير المتزامنة عند استخدام أساسيات جدولة المتصفّح العادية، مثل setTimeout. ويتم ذلك بشكل افتراضي في هذه الحالات، بحيث يمكن للمطوّرين فحصها بالفعل! ولكن في المشاريع الأكثر تعقيدًا، ليس الأمر بهذه البساطة، خاصةً عند استخدام إطار عمل بآليات جدولة أكثر تقدمًا، على سبيل المثال، إطار ينفّذ تتبُّع المنطقة أو وضع مهام مخصّصة في قائمة انتظار، أو يقسّم التحديثات إلى عدة وحدات عمل يتم تشغيلها بمرور الوقت.
لحلّ هذه المشكلة، توفّر "أدوات مطوّري البرامج" آلية تُسمّى "Async Stack Tagging API" على الكائن console، وتتيح لمطوّري إطار العمل إضافة تلميحات إلى المواقع الجغرافية التي تتم جدولة العمليات فيها والأماكن التي يتم فيها تنفيذ هذه العمليات.
واجهة برمجة التطبيقات Async Stack Tagging API
في حال عدم استخدام وضع علامات تسلسل استدعاء الدوال البرمجية غير المتزامن، يظهر تتبُّع تسلسل استدعاء الدوال البرمجية للرمز البرمجي الذي يتم تنفيذه بشكل غير متزامن بطرق معقدة من خلال إطارات العمل بدون أي اتصال بالرمز البرمجي الذي تمت جدولته.
ومن خلال وضع علامات تسلسل استدعاء الدوال البرمجية غير المتزامنة، يمكن توفير هذا السياق، ويبدو تتبُّع تسلسل استدعاء الدوال البرمجية على النحو التالي:
لتحقيق ذلك، استخدِم طريقة console جديدة باسم console.createTask() توفّرها واجهة برمجة التطبيقات Async Stack Tagging API. توقيعه كما يلي:
interface Console {
createTask(name: string): Task;
}
interface Task {
run<T>(f: () => T): T;
}
يؤدي استدعاء console.createTask() إلى إرجاع مثيل Task يمكنك استخدامه لاحقًا لتشغيل الرمز غير المتزامن.
// Task Creation
const task = console.createTask(name);
// Task Execution
task.run(f);
يمكن أيضًا دمج العمليات غير المتزامنة، وسيتم عرض "الأسباب الجذرية" في تقرير تتبُّع تسلسل استدعاء الدوال البرمجية بالتسلسل.
يمكن تنفيذ المهام بأي عدد من المرات وقد تختلف حمولة العمل بين كل عملية تشغيل. سيتم تذكُّر حزمة الاستدعاءات في موقع الجدولة إلى أن يصبح كائن المهمة غير مرغوب فيه.
واجهة برمجة التطبيقات Async Stack Tagging API في Angular
في Angular، تم إجراء تغييرات على NgZone، سياق تنفيذ Angular ويستمر في جميع المهام غير المتزامنة.
عند جدولة مهمة، تستخدم الميزة console.createTask() عند توفّرها. يتم تخزين مثيل Task الناتج للاستخدام مرة أخرى. بعد استدعاء المهمة، ستستخدم NgZone مثيل Task المخزّن لتشغيلها.
وقد أُدرجت هذه التغييرات في الإصدار 0.11.8 من NgZone من Angular من خلال طلبَي السحب #46693 و#46958.
إطارات مكالمات ملائمة
غالبًا ما تنشئ أطر العمل رموزًا من جميع أنواع لغات النماذج عند إنشاء مشروع، مثل نماذج Angular أو JSX التي تحوِّل الرمز البرمجي الذي يشبه HTML إلى JavaScript عادي يتم تشغيله في النهاية في المتصفّح. في بعض الأحيان، يتم إعطاء هذه الأنواع من الدوال التي تم إنشاؤها أسماء غير مألوفة - إما أسماء أحرف مفردة بعد تصغيرها أو بعض الأسماء الغامضة أو غير المألوفة حتى عندما لا تكون كذلك.
في Angular، ليس من غير المألوف رؤية إطارات طلبات تحمل أسماء مثل AppComponent_Template_app_button_handleClick_1_listener في عمليات تتبُّع تسلسل استدعاء الدوال البرمجية.
لحلّ هذه المشكلة، تتيح "أدوات مطوري البرامج في Chrome" الآن إعادة تسمية هذه الدوال من خلال خرائط المصدر. إذا كانت خريطة المصدر تحتوي على إدخال اسم لبداية نطاق الدالة (أي القوس الأيسر لقائمة المَعلمات)، يجب أن يعرض إطار الاستدعاء هذا الاسم في تتبُّع تسلسل استدعاء الدوال البرمجية.
إطارات مكالمات ملائمة في Angular
تُعد إعادة تسمية إطارات المكالمات في Angular جهدًا مستمرًا. ونتوقّع أن يتم تطبيق هذه التحسينات بشكل تدريجي مع مرور الوقت.
أثناء تحليل نماذج HTML التي كتبها المؤلفون، ينشئ المحول البرمجي Angular رمز TypeScript، والذي يتم نقله في النهاية إلى رمز JavaScript الذي يحمّله المتصفّح ويشغِّله.
وفي إطار عملية إنشاء الرموز هذه، يتم أيضًا إنشاء خرائط المصدر. نحن نستكشف حاليًا طرقًا لتضمين أسماء الدوال في حقل "الأسماء" الخاص بخرائط المصدر، والإشارة إلى هذه الأسماء في عمليات الربط بين الرمز الذي تم إنشاؤه والرموز الأصلية.
على سبيل المثال، إذا تم إنشاء دالة لأداة معالجة الأحداث وكان اسمها غير متوافق أو تمت إزالته أثناء تصغير البيانات، يمكن أن تتضمّن خرائط المصدر الآن الاسم الأكثر ملاءمةً لهذه الدالة في حقل "الأسماء"، ويمكن الآن أن يشير التعيين في بداية نطاق الدالة إلى هذا الاسم (أي القوس الأيسر لقائمة المَعلمات). بعد ذلك، ستستخدم "أدوات مطوري البرامج في Chrome" هذه الأسماء لإعادة تسمية إطارات المكالمات في عمليات تتبُّع تسلسل استدعاء الدوال البرمجية.
نظرة مستقبلية
لقد صنعنا تجربة رائعة باستخدام Angular كبرنامج تجريبي للتأكد من صحة عملنا. يسعدنا معرفة آراء مطوّري أطر العمل وتزويدنا بملاحظات حول نقاط التمديد هذه.
هناك المزيد من المجالات التي نرغب في استكشافها. وعلى وجه الخصوص، كيفية تحسين تجربة التحليل في "أدوات مطوري البرامج".