أصبح تصحيح الأخطاء المتعلّقة بالتمرير أسهل من أي وقت مضى باستخدام شارة التمرير الجديدة في DevTools. توضّح هذه المشاركة ما هي العناصر التي يمكن التمرير فيها، وسبب صعوبة العثور عليها، وكيفية مساعدة هذه الميزة الجديدة في تحديد موقعها بسرعة. سنأخذك أيضًا وراء الكواليس لمعرفة كيف طورنا شارة التمرير.
ما هو العنصر الذي يمكن التمرير فيه؟
إذا كان بإمكانك الانتقال للأعلى أو للأسفل في المحتوى داخل عنصر، يعني ذلك أنّه عنصر قابل للانتقال (أو حاوِية قابلة للانتقال). ولا يهم إذا كان يحتوي على أشرطة تمرير أم لا.
لماذا يصعب العثور على العنصر الذي يمكن التمرير فيه؟
من الصعب تصحيح أخطاء الانتقال للأعلى أو للأسفل. في حال عدم توفّر أداة لعرض العنصر القابل للتنقّل بوضوح، من السهل أن تضيع في الصفحة، خاصةً في الصفحات المعقّدة التي لا تتضمّن أشرطة تنقّل.
قد يكون العثور يدويًا على العنصر الذي يتم التمرير فيه عملية مملة تعتمد على التجربة والخطأ:
- يمكنك اختيار عنصر وتعديل أنماطه.
- هل اختفى شريط التمرير؟ وإذا لم يكن الأمر كذلك، يمكنك تكرار العملية.
نقدّم لك شارة الانتقال
في الإصدار 130 من Chrome، يمكنك استخدام شارة التمرير الجديدة في لوحة العناصر لتحديد موضع العناصر التي يمكن التمرير فيها.
على سبيل المثال، حاوِل العثور على العنصر الذي يتسبب في ظهور أشرطة التمرير في المثال التالي باستخدام شارة التمرير الجديدة.
التنفيذ الفني لشارة التمرير الجديدة
وراء الكواليس، ينقسم التنفيذ إلى جزأين:
- تحديد العناصر القابلة للتمرير: استخدِم إشارات
Blink’s(محرك عرض Chrome) لتحديد العناصر التي يمكن التمرير فيها أو التي أصبحت قابلة للتنقّل بسبب تغيير في الصفحة. - عرض شارة الانتقال للأعلى أو للأسفل عند تلقّي الإشارات، نضيف شارة جديدة (تشبه شارات الشبكة الحالية) بجانب العناصر التي يمكن التمرير فيها في لوحة العناصر.
تحديد العناصر القابلة للتمرير
لتحديد العناصر القابلة للتمرير، استخدمنا الطريقة IsUserScrollable في Blink. تحدِّد هذه الطريقة ما إذا كانت العقدة قابلة للتنقّل من خلال التحقّق مما إذا كانت تتدفق على طول محور X أو Y، ما يشير إلى أنّ المحتوى يتجاوز أبعاد الحاوية ويمكن التمرير فيه. نستدعي هذه الطريقة في كل مرة يتم فيها تحميل عنصر جديد في أدوات المطوّرين لتحديد الحاويات القابلة للتنقّل.
لتعديل حالة إمكانية الانتقال للأعلى أو للأسفل ديناميكيًا للعناصر التي تم تحميلها، كان علينا التعمّق في قاعدة بيانات محرك عرض Blink لتتبُّع مكان إضافة أو إزالة المنطقة القابلة للانتقال للأعلى أو للأسفل للعقدة.
يدير المكوِّن PaintLayerScrollableArea فائض معالجة المنطق الأساسي. على وجه التحديد، تكون الطريقة UpdateScrollableAreaSet مسؤولة عن رصد وقت حدوث تجاوز السعة أو حلّها.
ويتم نقل هذه المعلومات إلى الخلفية في "أدوات مطوّري البرامج" من خلال إرسال مرجع العقدة التي غيّرت ScrollableArea.
بعد ذلك، يُعيد الجزء الخلفي التحقّق من العقدة باستخدام الطريقة IsUserScrollable للحصول على حالتها الجديدة. بعد التحقّق من إمكانية الانتقال للأعلى أو للأسفل، يتم إرسال إشارة إلى الواجهة الأمامية باستخدام الرمز Chrome DevTools Protocol، ما يضمن أن تعكس واجهة المستخدم التغييرات في المحتوى القابل للانتقال للأعلى أو للأسفل بدقة.
عرض شارة الانتقال للأعلى أو للأسفل
لإضافة الشارة الجديدة في الواجهة الأمامية لـ "أدوات مطوري البرامج"، أنشأنا طريقة معالِج في ElementsTreeOutline التي تلقّت معرِّف العقدة الخاص بالعنصر، والذي غيّر حالة إمكانية التمرير حسب "حدث".
في هذا المعالج، نسترد الكائن ElementsTreeElement باستخدام nodeId ونطلب منه تعديل شارة التمرير الخاصة به.
يتضمن تحديث شارة التمرير التحقق مما إذا كان العنصر قابلاً للتمرير وما إذا كان يحتوي بالفعل على شارة تمرير. وبناءً على هذه الشروط، يتم اتخاذ الإجراءات التالية:
- إذا كان العنصر قابلاً للانتقال للأعلى أو للأسفل ولم يكن لديه شارة انتقال بعد، تتم إضافة شارة.
- إذا كان العنصر غير قابل للتمرير ولكنّه يتضمّن شارة التمرير، تتم إزالة الشارة الحالية.
المنطق الخاص للتعامل مع مستند المستوى الأعلى الذي يمكن التمرير فيه
عندما يكون المستند من المستوى الأعلى قابلاً للتنقّل، نواجه حالة خاصة لأنّنا لا نعرض عنصر #document للمستند الرئيسي، بل نعرضه فقط لإطارات iframe. نتيجةً لذلك، لا يمكننا عرض الشارة مباشرةً على عناصر #document.
قرّرنا عرض شارة الانتقال إلى الأعلى أو الأسفل على عنصر </html> بدلاً من ذلك، بما في ذلك تلك العناصر في Quirks mode حيث يعرض document.scrollingElement() الرمز <body> أو null. يمنع هذا القرار الالتباس بين المستندات القابلة للتمرير وعناصر النص الأساسي القابلة للتمرير، لا سيما على الصفحات التي يمكن فيها تمرير النص بشكلٍ مستقل.
تبيّن لنا أنّ هذه هي الطريقة الأكثر وضوحًا لإظهار المطوّرين العناصر التي يمكن التمرير فيها.
تغييرات بروتوكول "أدوات مطوّري البرامج في Chrome" (CDP)
لدمج شارة الانتقال الجديدة، كان من الضروري إجراء تغييرات على Chrome DevTools Protocol (CDP). يعمل بروتوكول CDP كبروتوكول اتصال بين أدوات المطوّرين وChrome.
كان علينا تغيير البروتوكول لتغطية الحالتَين التاليتَين:
- هل يمكن التمرير في هذه العقدة عند تحميلها في "أدوات مطوري البرامج"؟
- هل عدّلت هذه العقدة حالة التمرير فيها؟
هل يمكن التمرير في هذه العقدة عند تحميلها في "أدوات مطوري البرامج"؟
أضفنا سمة جديدة باسم isScrollable إلى نوع بيانات DOM.Node الذي يتم إرساله في كل مرة يتم فيها تحميل عقدة جديدة في الواجهة الأمامية في "أدوات مطوري البرامج".
قرّرنا تعبئة هذا السمة فقط عندما تكون صحيحة، لتجنّب تحميل بيانات غير ضرورية. لذلك، عندما لا يتم إرسال السمة، نفترض أنّ العنصر غير قابل للتنقّل.
هل عدّلت هذه العقدة حالة التمرير فيها؟
لرصد ما إذا كانت إحدى العُقد قد عدّلت حالتها القابلة للتمرير، قدّمنا حدثًا جديدًا scrollableFlagUpdated في CDP، والذي يتم تشغيله عندما يكتسب عنصر مساحة قابلة للتمرير أو يفقدها. تتسم الفعالية بالبنية التالية:
# Fired when a node's scrollability state changes.
experimental event scrollableFlagUpdated
parameters
# The id of the node.
DOM.NodeId nodeId
# If the node is scrollable.
boolean isScrollable
نصيحة احترافية: فحص التغييرات الجديدة في "شركاء المحتوى في خرائط Google" في المتصفّح
إذا كنت مهتمًا بمعرفة كيفية تواصل Chrome مع "أدوات مطوّري البرامج"، تتوفّر طريقة بسيطة لاستكشاف ذلك.
تتيح لك لوحة مراقب البروتوكول عرض الأحداث التي يتم تبادلها في الوقت الفعلي بين Chrome وأدوات المطوّرين، بما في ذلك الحدث الذي تمت إضافته حديثًا لشارة التمرير. على سبيل المثال، عند تعديل نمط عنصر يؤثر في إمكانية التمرير فيه، يمكنك الاطّلاع على أحداث CDP ذات الصلة فور حدوثها.
للحصول على دليل أكثر تفصيلاً، يُرجى الاطّلاع على Protocol monitor: View and send CDP requests.
مزيد من المعلومات عن ميزة "التمرير للأسفل/للأعلى": نقدّم لك شارة "المحتوى الزائد"
بالإضافة إلى ذلك، نعمل على شارة جديدة للمحتوى الزائد لتحديد سبب الانتقال إلى الأسفل أو الأعلى. ستظهر هذه الشارة بجانب العناصر التي تتجاوز حاويتها، ما يساعدك في تشخيص مشاكل التنسيق بسرعة.
في ما يلي آلية عمل هذه الميزة:
- تصحيح الأخطاء التفاعلي: انقر على شارة التمرير لتشغيل أمر بروتوكول DevTools الذي يحدِّد العناصر الفرعية التي تتدفق خارج الإطار.
- عرض المحتوى الزائد: سنربط حدود العناصر داخل الحاوية القابلة للتقديم أو الإيقاف لرصد أيّ محتوى زائد.
- تحديد السبب: ستضع الشارة الكاملة علامة على هذه العناصر الكاملة، ويؤدي النقر عليها إلى تمييزها مباشرةً في DOM.
سيمنح ذلك المطوّرين أداة جديدة وفعّالة لفهم مشاكل التنسيق الناتجة عن تدفّق المحتوى وحلّها. نعتقد أنّ هذا المستوى الأعمق من التحليل سيؤدي إلى تبسيط سير عمل تصحيح الأخطاء بشكل كبير.