يقوم "مخطط الصفحة" بعرض بنية شجرة المعالجة (DOM) الكاملة لأي صفحة ويب كطبقة شجرة مرئية — مباشرة على الصفحة نفسها. يحصل كل عنصر HTML على علامة ملونة توضح اسم الوسم الخاص به، ويتم إظهار عمق التداخل من خلال المسافة البادئة والخطوط المتصلة. الأمر يشبه عرض لوحة عناصر أدوات المطور (DevTools)، ولكن بشكل معروض على الصفحة الحية.
تعرض أدوات مطوري المتصفحات (DevTools) شجرة المعالجة (DOM) كشجرة نصية في لوحة جانبية، منفصلة عن التخطيط المرئي. يسد "مخطط الصفحة" هذه الفجوة من خلال إبراز بنية الـ DOM مباشرة على الصفحة. يحصل كل عنصر على شارة ملونة صغيرة تظهر اسم الوسم الخاص به (div, section, nav, h1, p, button, وما إلى ذلك)، موضوعة في الزاوية العلوية اليسرى للعنصر. تكون المسافة البادئة للعناصر المتداخلة مرئية، ويتضح الشكل الشبيه بالشجرة على الفور. وهذا يجعل من السهل للغاية فهم كيفية بناء الصفحة بنظرة واحدة — يمكنك أن ترى أن الترويسة (header) تحتوي على جزء تصفح (nav) يحتوي على خمس روابط (anchor tags)، والمحتوى الرئيسي يحتوي على ثلاثة أجزاء وكل منهم يتضمن مقالات (articles)، والتذييل (footer) يغلف جزء شعار (logo div) وقائمة من الروابط. كل هذا دون فتح DevTools أو قراءة كود مصدر HTML الخام.
يحصل كل عنصر مرئي على الصفحة على شارة تراكب ملونة تظهر اسم علامة الـ HTML الخاصة به. بدءًا من العلامات الخارجية (html و body) وصولًا إلى العلامات الفرعية كالـ spans، والروابط، والأزرار — لا شيء يكون مخفيًا. يعرض التراكب التسلسل الهرمي الكامل للعناصر كخريطة بصرية خلابة.
يحصل كل نوع من أنواع العناصر على لون خلفية مميز لشارته. العناصر الهيكلية (header, main, footer) باللون الأزرق، التنقل باللون الأصفر الكهرماني، العناوين باللون الأرجواني، الفقرات باللون الرمادي، الروابط باللون الأصفر، الأزرار باللون السماوي، الصور باللون الوردي. يمكنك التعرف على أنواع العناصر من خلال اللون دون قراءة النص.
قم بتمرير الماوس فوق أي شارة لتمثيل العنصر المقابل بفضل التراكب شبه الشفاف الذي يعرض أبعاده الدقيقة (العرض × الارتفاع بالبكسلات). يتم تحديد حدود العنصر الخارجية وتصبح الشارة أكثر بروزًا — مما يسهل تحديد الشارة التي تنتمي لأي عنصر.
يتم وضع العناصر شديدة التداخل بمسافة بادئة أبعد من الحافة اليسرى، مما يجعل علاقات التداخل مرئية على الفور. انظر بلمحة سريعة لتحدد ما إذا كانت الصفحة تحتوي على عدد كبير من علامات اللف (5+ طبقات) أو بُنية غير مُعقدة و سطحية. تُظهر الخطوط المتصلة العلاقات المحورية لكافة عناصر الأبناء مع آبائها.
يتم تطبيق الطبقات بشكل خارجي ولا تؤثر على تخطيط الصفحة، أو التمرير، أو سلوك الـ JavaScript. تكون ملصقات الشارات صغيرة وشبه شفافة بحيث تبقى محتويات الصفحة تحتها مرئية. تستطيع أن تقوم بالإغلاق على الفور للعودة للحالة الطبيعية.
انقر على شارة أي عنصر حاوية لطي العناصر الفرعية التابعة له، مما يؤدي إلى إخفاء شارات التداخل. مفيد للتركيز على قسم معين دون الانشغال بشجرة الـ DOM بأكملها الخاصة بالصفحة. انقر مرة أخرى للتوسيع.
هل وصلت إلى صفحة ويب معقدة وتحتاج إلى فهم كيفية بنائها؟ يعرض "مخطط الصفحة" الترتيب الهرمي الكامل لشجرة DOM بلمحة سريعة — يوضح أي الأقسام تحتوي على أي محتوى، وكيفية هيكلة التنقل، وأين تبدأ مناطق المحتوى وتتوقف.
التداخل المفرط المتتالي للـ div يجعل كتابة CSS أصعب وتتسبب בبطء عرض الصفحة، فإذا رأيت 6 مستويات أو أكثر من الشارات الملونة مُتراصة على بُنية نصية بسيطة، إذن فالتصميم هنا يحتاج لحل أبسط، و"مُخطط الصفحة" يُبين تلك الإشكاليات بوضوح.
هل تستخدم الصفحة عناصر دلالية مناسبة؟ ابحث عن شارات header، nav، main، article، section، و footer. إذا كان كل شيء مجرد عناصر div متناثرة، فهذا يعني أن الصفحة تفتقر إلى البنية الدلالية — مما يضر بإمكانية الوصول (Accessibility)، الـ SEO، وسهولة الصيانة.
قم بزيارة أي موقع مبني بطريقة جيدة ومُتْقنة (Stripe، Linear، Vercel) وفعل مقياس "مُخطط الصفحة" لمعرفة كيف تُنظم فِرَق الواجهة الأمامية هيكليات أكواد HTML الخاصه بهم. تعلَّم أنماط التخطيط من خلال شجرة DOM الموجودة بالعين لصفحات إنتاج واقعيَّة.
استخدم وظيفة "مخطط الصفحة" أولاً لتحديد ماهيّة العناصر الموجودة وأين تتمركز على الشاشة، ثم قم بالتبديل إلى أداة "تفحص CSS (CSS Inspector)" أو "أداة قياس المسافات" للتعمُّق أكثر في مكونات معينة تم التعرف عليها مسبقًا.
افتح لوحة DevSuite Pro العائمة وانقر على أيقونة "مخطط الصفحة". ستقوم الأداة على الفور بمسح شجرة الـ DOM للصفحة، وستضع شارات التخطيطات على كل عنصر مرئي.
تظهر શارات ملونة في الزاوية العلوية اليسرى لكل عنصر تعرض اسم العلامة الخاص به (div، section، h1، p، وغيرها). يمكن رؤية بنية التداخل من خلال المسافة البادئة وموضع الشارات.
حرك الماوس فوق أي شارة لإبراز العنصر المقابل. يعرض تراكب شبه شفاف حدود العنصر وأبعاده. هذا يربط اسم العلامة المجرد بموقعه البصري على الصفحة.
انقر على شارة أي منطقة حاوية لطي الشارات التابعة لها. هذا سيسمح لك بالتركيز على مناطق محددة من الصفحة بغير التعرض للفوضى البصرية جراء التداخلات العميقة.
إضغط على أيقونة أدارة "مُخطط الصفحة" בתוך لوחת أدوات التطبيق لإزالة كافة التراكبات والعودة لمنظر الصفحة المُعتاد. ولا آثار ظِليه ستتبقى من بعدها.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 39 أداة للمطورين لمتصفحك.
