آليتنا في إنشاء علامة التبويب "المشاكل" في "أدوات مطوري البرامج في Chrome"

Jan Scheffler
Jan Scheffler
Sigurd Schneider
Sigurd Schneider

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

أثناء البحث عن الأدوات التي توفّرها أدوات مطوّري البرامج، كنّا غالبًا في موقف مشابه لما يلي:

المشاكل في لوحة وحدة التحكُّم

😰 كانت وحدة التحكّم مليئة بالتحذيرات ورسائل الخطأ التي تضمّنت تفسيرات فنية وأحيانًا روابط تؤدي إلى chromestatus.com. بدا أنّ جميع الرسائل بدت بنفس القدر من الأهمية، ما يجعل من الصعب تحديد التحذيرات التي يجب معالجتها أولاً. والأهم من ذلك أنّ النص لم يكن مرتبطًا بمعلومات إضافية داخل "أدوات مطوّري البرامج"، ما جعل من الصعب فهم ما حدث. وأخيرًا، غالبًا ما تترك الرسائل المعلومات بالكامل لمطوِّر الويب لمعرفة كيفية حلّ المشكلة أو حتى التعرّف على السياق الفني.

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

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

الحل: إعداد تقارير منظّمة وقابلة للتنفيذ للمشاكل

للتوصل إلى حل أفضل للمشاكل التي اكتشفناها، بدأنا أولاً بالتفكير في المتطلبات وجمعها في مستند تصميم.

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

  • العنوان
  • الوصف
  • روابط تنقل إلى الموارد المتأثرة ضمن "أدوات مطوري البرامج"
  • ورابط لمزيد من الإرشادات

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

وضع علامة على ملفات تعريف الارتباط على مواقع إلكترونية متعددة بأنّها آمنة للسماح بإعدادها في سياقات مواقع إلكترونية متعددة

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

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

عند التفكير في تفاعل المطوّرين مع علامة تبويب "المشاكل" على المدى الطويل، نتخيل التطوّر التالي لتفاعل المطوّرين:

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

هناك جانب آخر مهم أردنا تحسينه وهو التجميع. على سبيل المثال، إذا تسبب ملف تعريف الارتباط نفسه في حدوث المشكلة نفسها عدة مرات، أردنا الإبلاغ عن هذا الملف مرة واحدة فقط. إلى جانب تقليل عدد الرسائل بشكل كبير، يساعد ذلك غالبًا في تحديد السبب الجذري للمشكلة بسرعة أكبر.

المشاكل المجمّعة

التنفيذ

مع وضع هذه المتطلبات في الاعتبار، بدأ الفريق في النظر في كيفية تنفيذ الميزة الجديدة. وتشمل عادةً مشاريع أدوات مطوري البرامج في Chrome ثلاث مناطق مختلفة:

بعد ذلك، تكوّن التنفيذ من ثلاث مهام:

  • في Chromium، كان علينا تحديد المكوّنات التي تحتوي على المعلومات التي نريد عرضها وإتاحة هذه المعلومات من خلال بروتوكول "أدوات مطوّري البرامج" بدون التأثير في السرعة أو الأمان.
  • احتجنا بعد ذلك إلى تصميم بروتوكول أدوات مطوّري البرامج في Chrome (CDP) لتحديد واجهة برمجة التطبيقات التي تعرض المعلومات للعملاء، مثل الواجهة الأمامية في أدوات مطوّري البرامج.
  • وأخيرًا، احتجنا إلى تنفيذ مكوّن في الواجهة الأمامية لأدوات مطوّري البرامج يطلب المعلومات من المتصفّح من خلال بروتوكول CDP ويعرضها في واجهة مستخدم مناسبة يمكن للمطوّرين تفسيرها والتفاعل معها بسهولة.

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

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

في الواجهة الأمامية في "أدوات مطوري البرامج"

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

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

مع وضع ذلك في الاعتبار، فهم مصمم تجربة المستخدم ما كنا نهدف إليه، وقدم نموذجًا أوّليًا للمقترحات الأولية التالية:

النماذج الأولية

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

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

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

إشعارات المشاكل

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

المشكلات ذات الصلة

في البروتوكول

يعمل الاتصال بين الواجهة الأمامية والخلفية من خلال بروتوكول يُسمى بروتوكول أدوات مطوّري البرامج في Chromium (CDP). يمكن اعتبار CDP بمثابة الواجهة الخلفية لتطبيق الويب وهو "أدوات مطوري البرامج في Chrome". يتم تقسيم CDP إلى نطاقات فرعية، ويحتوي كل نطاق على عدد من الأوامر والأحداث.

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

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

ملف

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

وعلاوة على ذلك، نفكر في كيفية دمج مشكلات من مصادر أخرى إلى جانب الواجهة الخلفية لـ Chromium في علامة التبويب "المشكلات".

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

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

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

تنزيل قنوات المعاينة

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

التواصل مع فريق "أدوات مطوري البرامج في Chrome"

يُرجى استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو أي موضوع آخر ذي صلة بـ "أدوات مطوري البرامج".

  • يمكنك إرسال اقتراحات أو ملاحظات إلينا عبر crbug.com.
  • يمكنك الإبلاغ عن مشكلة في "أدوات مطوري البرامج" باستخدام خيارات إضافية   المزيد > مساعدة > الإبلاغ عن مشاكل في "أدوات مطوري البرامج" في "أدوات مطوري البرامج".
  • يمكنك نشر تغريدة على @ChromeDevTool.
  • يمكنك إضافة تعليقات على الميزات الجديدة في فيديوهات YouTube أو نصائح حول أدوات مطوّري البرامج في فيديوهات YouTube حول الميزات الجديدة.