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

لماذا أنشأنا أدوات شبكات CSS؟

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

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

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

جهد مشترك بين Chrome وEdge

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

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

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

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

دعنا نلقي نظرة أعمق عليها بعد ذلك.

العناصر المركّبة الثابتة على الشبكة

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

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

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

لنلقِ نظرة على كيفية تحقيقنا معًا.

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

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

.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));
}

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

السلسلة قبل النقطة هي القيمة التي تم إنشاؤها، والسلسلة التي تلي النقطة تمثل القيمة المحسوبة الفعلية.

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

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

العناصر المركّبة الثابتة

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

مثال:

ومع ذلك، لم يتم تصميم التراكب في أدوات مطوري البرامج مع وضع هذه الآلية الدائمة ومتعددة العناصر في الاعتبار (تم إنشاؤها قبل سنوات عديدة). لذلك كان علينا إعادة هيكلة تصميم التراكب لتشغيل هذا. أضفنا 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.

التغييرات التي تطرأ على شجرة نموذج العناصر في المستند (DOM)

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

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

كيف نحصل على تعديلات في الوقت الفعلي للنمط؟

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

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

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

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

جزء التخطيط

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

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

لعرض قائمة حاويات شبكة CSS في جزء التنسيق، نحتاج إلى العثور على عُقد 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 واحدة من أولى مشاريع أدوات تصميم أدوات مطوّري البرامج التي تدعم ميزة Web Platform. وقد تم إطلاق العديد من الأدوات الأساسية في "أدوات مطوري البرامج"، مثل العناصر الثابتة الدائمة وشارات شجرة نموذج العناصر في المستند (DOM) ولوحة التنسيق، ما مهد الطريق لأدوات التنسيق المستقبلية في "أدوات مطوري البرامج في Chrome"، مثل طلبات بحث Flexbox وContainer. كما وضع أيضًا الأساس لمحرري Grid وFlexbox، والتي تسمح للمطورين بتغيير محاذاة الشبكة و Flexbox بطريقة تفاعلية. سنتطرق إليها في المستقبل.

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

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

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

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

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