أداة HTML Online Viewer هي عارض HTML عربي يعمل مباشرة داخل المتصفح. فكرتها بسيطة لكن قوية: ألصق كود HTML الخاص بك، وشاهد النتيجة حيّة في الحال داخل معاينة مضمّنة، أو افتحها بملء الصفحة في تبويب جديد. إلى جانب ذلك، تمنحك الأداة أدوات مساعدة مهمة للمطورين وصنّاع المحتوى: إبراز الصياغة للقراءة المريحة، شجرة DOM قابلة للطيّ/التوسيع لفهم هيكل الصفحة، وأزرار عملية مثل توسيع الكل/طيّ الكل، نسخ/لصق، مسح، واستيراد/تصدير. كلّ ذلك بواجهة عربية، ألوان متّسقة (خلفية بيضاء ولون أساسي #2c3bff)، وتصميم متجاوب يعمل بسلاسة على الهاتف والكمبيوتر.

تهدف الأداة إلى تسريع تجاربك اليومية: التحقق من مقطع HTML قبل لصقه في CMS، معاينة مثال تعليمي، توضيح مشكلة في بنية DOM، أو مشاركة معاينة نظيفة لزميلك. لا تحتاج إلى تثبيت برامج أو إضافة متصفّح—كل شيء يجري محليًا لحظيًا.

لماذا قد تحتاج إلى عارض HTML أونلاين؟

• سرعة التجربة: اختصر الوقت بين كتابة الكود ورؤية النتيجة. لا حاجة لفتح مشروع منفصل أو ضبط سيرفر محلي.

• الخصوصية: المعالجة تتم في المتصفح؛ الملف لا يُرفع إلى خادم خارجي.

• قراءة أفضل للكود: إبراز الصياغة بملء الصفحة يجعل المراجعة والتعليم أسهل.

• فهم هيكل الصفحة: شجرة DOM تُظهر تداخل العناصر والخصائص بسرعة، مع أزرار “توسيع الكل/طيّ الكل”.

• سير عمل عملي: نسخ/لصق، مسح سريع، استيراد ملف HTML، وتصدير نسخة منظمة من الكود عند الحاجة.

• تحكّم بعمل السكربتات: خيار تشغيل JavaScript يتيح لك تمكين/تعطيل سكربتات الصفحة أثناء المعاينة، وهو مهم عندما تريد لقطة “ساكنة” دون أحداث تفاعلية.

المزايا الأساسية

1. معاينة حيّة (Live Preview): عند تفعيل “تحديث مباشر”، أي تعديل في صندوق الكود ينعكس فورًا على المعاينة. يمكن أيضًا إطفاؤه والاعتماد على زر “تحديث الآن” للسيطرة اليدوية.

2. معاينة بملء الصفحة (Full Page Preview): تفتح الناتج في تبويب جديد لتراه بالحجم الكامل بعيدًا عن واجهة الأداة—مفيد للعرض أو الالتقاط.

3. إبراز الصياغة بملء الصفحة: يعرض الكود فقط مع تلوين نحوي مريح للعين—مثالي للمراجعة أو التدريس أو المشاركة.

4. شجرة DOM قابلة للطيّ: تصفّح العناصر، السمات (Attributes)، والنصوص. استخدم “توسيع الكل/طيّ الكل” للتنقّل السريع.

5. تشغيل/تعطيل JavaScript: تحكّم في ما إذا كانت سكربتات الصفحة تعمل داخل المعاينة. في وضع الإيقاف، يتم تنظيف الكود من الوسوم والخصائص المرتبطة بالأحداث.

6. أزرار إنتاجية: استيراد ملف .html، تصدير الناتج، نسخ/لصق آمنان، ومسح سريع لمساحة العمل.

7. ارتفاع تلقائي للمعاينة: المعاينة تتمدّد تلقائيًا بحسب محتوى الصفحة، مع مراقبة تغييرات DOM داخل الإطار لضمان بقاء العرض مناسبًا.

8. تصميم متجاوب: الأزرار وتموضع اللوحات تتكيف مع الشاشات الصغيرة؛ كل شيء قابل للاستخدام باللمس.

كيفية الاستخدام خطوة بخطوة

1. الصق الكود أو استورده:
   افتح الأداة، ثم ألصق HTML داخل صندوق الإدخال. أو انقر استيراد لاختيار ملف .html من جهازك.

2. فعّل/أوقف التحديث المباشر:
   افتراضيًا، “تحديث مباشر” مفعّل. إذا كنت تعمل على كود كبير وتريد تحديثات أقل، عطّله مؤقتًا واضغط تحديث الآن عند الحاجة.

3. قرّر تشغيل JavaScript من عدمه:
   إن أردت صفحة ساكنة، عطّل “تشغيل JavaScript” لمنع الأكواد من العمل. إن كنت تختبر تفاعلًا معينًا، فعّله.

4. شاهد المعاينة وتفاعل:
   سترى معاينة في الإطار المضمّن. الارتفاع يتمدد تلقائيًا بحسب المحتوى، وعدّاد العناصر يُظهر عدد عقد DOM الحالية.

5. افتح بملء الصفحة أو أبرز الصياغة:

   • معاينة بملء الصفحة: لعرض النتيجة النهائية فقط.

   • إبراز الصياغة: لعرض الكود ملوّنًا بوضوح في تبويب منفصل.

6. استعمل شجرة الـDOM:
   استعرض تداخل العناصر، وافتح/اطوِ الفروع. استخدم توسيع الكل لفحص شامل، ثم طيّ الكل للعودة للصورة العامة.

7. احفظ عملك:
   استخدم تصدير الناتج لإنشاء ملف HTML جاهز، أو نسخ للصقه في أي مكان. زر مسح يُعيدك لنقطة البداية.

أفضل الممارسات

• إيقاف JS عند التشخيص السريع: إذا شككت أن سكربتًا يبدّل العناصر أثناء الفحص، عطّل JavaScript لرؤية البنية الأساسية.

• استخدم إبراز الصياغة للمراجعة: المراجعة البصرية أفضل مع ألوان الدوال والوسوم والسمات.

• قسّم الكود الكبير: جرّب أجزاء صغيرة أولًا لتسهيل التشخيص، ثم اجمعها.

• انتبِه إلى CORS: الصور/الخطوط من نطاقات خارجية قد لا تُحمَّل داخل المعاينة بسبب سياسات المتصفح—هذا طبيعي في بيئة محلية.

• شارك بوضع ملء الصفحة: مفيد عندما تحتاج تعليق زميلك على النتيجة وليس على الكود.

حالات استخدام

• تعليم HTML/CSS: عرض الأمثلة حيًا للطلاب.

• مراجعة سريعة قبل النشر: معاينة جزء HTML قبل لصقه في CMS/منشور.

• تشخيص مشاكل بنيوية: استخدام شجرة DOM لاكتشاف تداخلات أو سمات خاطئة.

• تجهيز أمثلة لقنوات التواصل: إبراز الصياغة يسهّل مشاركة الكود بشكل واضح.

الأسئلة الشائعة (FAQs)

س: هل تُرفع ملفاتي/كودي إلى خادم خارجي؟
ج: لا. الأداة تعمل محليًا داخل المتصفح، ولا تُرسل بياناتك إلى أي خادم.

س: لماذا لا تظهر بعض الصور/الخطوط في المعاينة؟
ج: قد تمنع سياسات CORS تحميل الموارد الخارجية. جرّب استبدال الروابط بموارد محلية أو تقبّل أن بعض العناصر لن تُعرض في وضع المعاينة المحلي.

س: ما فائدة تعطيل JavaScript؟
ج: يمنع السكربتات من تغيير DOM أثناء الفحص، فيجعلك ترى البنية “الخام” للصفحة، وهو مفيد للتشخيص أو عند الرغبة في نتيجة ساكنة.

س: الفرق بين المعاينة بملء الصفحة وإبراز الصياغة؟
ج: المعاينة بملء الصفحة تُظهر النتيجة فقط (التصيير). إبراز الصياغة يُظهر الكود نفسه ملوّنًا للقراءة.

س: كيف أصدّر الناتج؟
ج: اضغط تصدير الناتج لتحميل ملف HTML يحتوي على الكود (مع/بدون سكربتات وفق إعدادك) جاهز للمشاركة أو الأرشفة.

س: هل يمكنني توسيع/طيّ كل عقد DOM دفعة واحدة؟
ج: نعم، استخدم توسيع الكل وطيّ الكل أعلى لوحة شجرة DOM.

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

س: هل الأداة متجاوبة على الهاتف؟
ج: نعم. الواجهة والأزرار تتكيّف مع الشاشات الصغيرة، ويمكنك تحرير الكود ومعاينته باللمس.

س: هل يمكنني اللصق مباشرة من الحافظة؟
ج: نعم، زر لصق يحاول استخدام واجهة الحافظة الحديثة. إن منع المتصفح الأذونات، استخدم Ctrl+V/⌘V داخل حقل الكود.

س: هل تدعم الأداة ملفات HTML كاملة أو مقاطع فقط؟
ج: تدعم الاثنين. إذا لصقت مقطعًا بدون <html>/<body>, سنحاول عرضه كما هو؛ للاستقرار التام يُفضّل ملف/صفحة كاملة.