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

Jan Scheffler
Jan Scheffler
Sigurd Schneider
Sigurd Schneider

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

التنفيذ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ملف

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

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

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

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

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

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

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

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

استخدِم الخيارات التالية لمناقشة الميزات الجديدة أو التحديثات أو أي شيء آخر مرتبط بـ "أدوات مطوّري البرامج".