أدوات شبكة CSS في "أدوات مطوري البرامج"

Changhao Han
Changhao Han
X GitHub

لماذا أنشأنا أدوات تخطيط الشبكات في CSS؟

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

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

تصميم الأدوات

عمل مشترك بين Chrome وEdge

جذبت أدوات CSS الشبكة الاهتمام من كل من "أدوات مطوري البرامج في Chrome" و"أدوات مطوري البرامج على Edge". وقد قررنا التعاون منذ البداية. شاركنا موارد المنتج والهندسة والتصميم من كلا الفريقين، ونسقنا أسبوعيًا لتحقيق ذلك.

ملخّص الميزات

هناك ثلاث ميزات رئيسية لأدوات شبكة CSS:

  1. تراكب مستمر خاص بالشبكة يساعد في عرض معلومات الأبعاد والترتيب
  2. شارات في شجرة DOM تُبرز حاويات CSS Grid وتبديل تراكبات الشبكة
  3. جزء شريط جانبي يسمح للمطوّرين بتخصيص عرض تراكبات DOM (مثل تغيير لون القواعد وعرضها)
  4. محرر شبكة CSS في لوحة الأنماط

لنلقِ نظرة عن كثب على الميزات التالية.

التراكبات الدائمة في الشبكة

في "أدوات مطوري البرامج"، يكون التراكب أداة قوية توفر معلومات التنسيق والنمط لعنصر فردي:

ALT_TEXT_HERE

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

  • نريد عرض المزيد من المعلومات المفيدة عن الشبكات، على سبيل المثال السمات والثغرات المؤلفة.
  • نريد أن تصبح التراكبات ثابتة، حتى نتمكن من إلقاء نظرة على شبكات متعددة في نفس الوقت، ويمكننا رؤية التراكبات تقوم بتحديث معلومات "Grid" (الشبكة) أثناء تغيير أنماط العناصر

لنلقِ نظرة على النتائج التي حقّقناها معًا.

الأحجام الكاتبة مقابل الأحجام المحسوبة

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

.grid-cards {
    display: grid;
    width: 200px;
    height: 300px;
    grid-template-rows: 20% 0.3fr 100px minmax(100px, auto);
    grid-template-columns: repeat(3, minmax(200px, 1fr));
}

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

ALT_TEXT_HERE

السلسلة التي تلي النقطة هي القيمة المكتوبة، وتمثل السلسلة بعد النقطة القيمة الفعلية المحسوبة.

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

نستخدم الآن واجهة برمجة التطبيقات هذه لعرض القيم المكتوبة في تراكبات الشبكة.

التراكبات الثابتة

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

مثلاً:

ALT_TEXT_HERE

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

للسماح لـ "أدوات مطوري البرامج" بالتحكم في ما يجب تمييزه، أنشأنا أمر CDP جديدًا لتراكب الشبكة الدائم:

# Highlight multiple elements with the CSS Grid overlay.
command setShowGridOverlays
  parameters
    # An array of node identifiers and descriptors for the highlight appearance.
    array of GridNodeHighlightConfig gridNodeHighlightConfigs

ويحتوي كل GridNodeHighlightConfig على معلومات عن العقدة التي يجب رسمها وكيفية رسمها. ويتيح لنا ذلك إضافة آلية دائمة متعددة العناصر بدون التأثير في السلوك الحالي عند التمرير.

شارات شبكة في الوقت الفعلي

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

ALT_TEXT_HERE

التغييرات في شجرة نموذج العناصر في المستند

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

لدينا أيضًا دعم مدمج لإمكانية الوصول من البداية. إنّ كل شارة تفاعلية مطلوبة لتوفير علامة aria-label تلقائية وعلامة aria-label، بينما تستخدم الشارات المخصّصة للقراءة فقط أسماء الشارات كشارات aria-label.

كيف يمكننا الحصول على تحديثات في الوقت الفعلي بشأن الموضة؟

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

لتسهيل الأمر على الواجهة الأمامية في معرفة وقت تعديل نمط أحد العناصر، أضفنا طريقة CDP جديدة للبحث عن تحديثات الأنماط. للحصول على تحديثات للأنماط لعُقد DOM، نبدأ بإخبار المتصفّح ببيانات CSS التي نريد تتبُّعها. في حالة شارات الشبكة، سنطلب من المتصفح تتبع ما يلي:

{
  "display": "grid",
  "display": "inline-grid",
}

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

جزء التخطيط

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

البحث عن عناصر حسب الأنماط المحسوبة

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

# Finds nodes with a given computed style in a subtree.
experimental command getNodesForSubtreeByStyle
  parameters
    # Node ID pointing to the root of a subtree.
    NodeId nodeId
    # The style to filter nodes by (includes nodes if any of properties matches).
    array of CSSComputedStyleProperty computedStyles
    # Whether or not iframes and shadow roots in the same target should be traversed when returning the
    # results (default is false).
    optional boolean pierce
  returns
    # Resulting nodes.
    array of NodeId nodeIds

يمكِّن ذلك الواجهة الأمامية لـ DevTools من الحصول على قائمة بحاويات شبكة CSS في الصفحة، ومن الممكن أن تخترق إطارات iframe وجذور الظل، وتعرضها في جزء التخطيط.

الخلاصة

كانت أدوات CSS Grid واحدة من أولى مشاريع أدوات التصميم في "أدوات مطوري البرامج" لدعم ميزة Web Platform. طرح هذا الإصدار العديد من الأدوات الأساسية في "أدوات مطوري البرامج"، مثل التراكبات الدائمة وشارات شجرة نموذج العناصر في المستند ولوحة التنسيق، ومهد الطريق لاستخدام أدوات التنسيق المستقبلية في "أدوات مطوري البرامج في Chrome"، مثل طلبات البحث المرنة والحاويات. كما وضعت الأساس لمحررات Grid و Flexbox ، والتي تسمح للمطورين بتغيير محاذات الشبكة و Flexbox بطريقة تفاعلية. سوف نتناولها في المستقبل.

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

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

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

يمكنك استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو مناقشة أي معلومات أخرى متعلّقة بأدوات مطوري البرامج.

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