Softonic

عارض HTML المُصيَّر

خطوة 1 / 2
التالي

الصق أي HTML (قالب بريد إلكتروني، أو جزءًا مأخوذًا من صفحة، أو مثالًا من التوثيق) ثم انقر على تصيير لتراه مرسومًا داخل إطار iframe معزول. يعمل الإطار بأقوى وضع عزل (sandbox) في المتصفح: فالنصوص البرمجية لا تُنفَّذ، والنماذج لا تستطيع الإرسال، والترميز لا يمكنه التنقل ولا لمس الصفحة المحيطة به. إنها أسرع طريقة للإجابة عن سؤال “كيف يبدو هذا الترميز فعليًا” دون إعداد خادم اختبار.

كيفية معاينة HTML

  1. 1

    الصق HTML الخاص بك

    ضع مستندًا كاملًا أو جزءًا منفصلًا في حقل المصدر. ما تلصقه هو تمامًا ما يُصيَّر، كما هو مكتوب.

  2. 2

    انقر على تصيير

    يكتب العارض ترميزك داخل إطار iframe معزول ويعرض النتيجة على الصفحة نفسها.

  3. 3

    اقرأ المعاينة

    يرسم الإطار ترميزك كما يفعل المتصفح: العناوين والجداول والقوائم والأنماط المضمّنة و SVG تظهر كلها.

  4. 4

    عدّل وصيِّر من جديد

    عدّل المصدر وصيِّر بقدر ما تشاء لمقارنة شكل كل نسخة.

لماذا الإطار معزول

قد يحتوي HTML الملصوق على أي شيء: وسوم <script>، وحيلة <img onerror="...">، ونموذج يرسل بيانات إلى مكان ما، أو <iframe> يحمّل موقعًا آخر. لمنع أي من ذلك من لمس الصفحة، تُكتب المعاينة داخل <iframe sandbox> بسمة sandbox فارغة، وهي أشد الإعدادات صرامة على الإطلاق. في هذا الوضع يمنع المتصفح في آنٍ واحد تنفيذ النصوص البرمجية، وإرسال النماذج، والنوافذ المنبثقة، والتنقل على المستوى الأعلى، والوصول إلى المصدر نفسه. ترى النتيجة المرئية دون منح الترميز أي صلاحية.

ولأن النصوص البرمجية لا تعمل أبدًا، فإن كل ما يعتمد على JavaScript (مكوّن ويب يُحدَّث عند التحميل، أو رسم بياني يرسم نفسه، أو إطار عمل يُركَّب داخل <div> فارغ) يعرض ترميزه الثابت فقط، لا نتيجته المعتمدة على النصوص البرمجية. هذه مقايضة مقصودة: معاينة آمنة ومتوقعة بدلًا من معاينة تفاعلية.

ما الذي يصيّره العارض جيدًا

نوع المحتوى ملاحظات
HTML البريد الإلكتروني التخطيطات المبنية على الجداول والأنماط المضمّنة تُرسم كما يرسمها معظم العملاء
متن مقالة مدونة العناوين والقوائم والاقتباسات والصور تظهر كلها بلا أي نصوص برمجية
جزء مأخوذ يُظهر ما إذا كان الترميز الذي التقطته مكتملًا بما يكفي ليقف وحده
SVG مضمّن يُرسم بأي حجم، ما يجعله مفيدًا لفحص أيقونة
ترميز مكوّن ثابت يُصيَّر الترميز؛ أما السلوك في JavaScript فلا

استخدامات جيدة لهذه الأداة

  • اختبار جودة قوالب البريد الإلكتروني. الصق التصدير من محرّر البريد لديك وشاهد التخطيط دون أن ترسل لنفسك رسالة اختبار.
  • فحوص سريعة للبيانات المأخوذة. التقطت بعض innerHTML من صفحة: هل يُصيَّر مجددًا إلى شيء منطقي؟ إن لم يكن، فالجزء على الأرجح غير مكتمل.
  • مراجعة من Markdown إلى HTML. مرّر نصًا عبر محوّل (أداة HTML إلى Markdown تُجري الرحلة ذهابًا وإيابًا) وعاين هنا HTML الناتج.
  • التعلّم والتعليم. الصق مثالًا من التوثيق وراقب بالضبط كيف يرتّبه المتصفح.

أمور ينبغي الانتباه إليها

  • عناوين URL النسبية. الصور وأوراق الأنماط المشار إليها بمسار نسبي مثل /assets/logo.png ليس لها خادم تُحلّ مقابله، لذا لن تُحمَّل. استخدم عنوان URL مطلقًا https:// أو معرّف data: إذا احتجت أن تظهر صورة.
  • الموارد الخارجية. الخطوط وأوراق الأنماط والصور المحمّلة من مواقع أخرى تعتمد على سماح تلك المواقع بذلك؛ وبعضها يرسل ترويسات تمنع التحميل داخل إطار.
  • لا نصوص برمجية. إذا كان ترميزك لا يدبّ فيه الحياة إلا عبر JavaScript، فإن المعاينة تُظهر حالته قبل النصوص البرمجية. هذا متوقع، وليس خللًا.

الأسئلة الشائعة

نعم. تعمل المعاينة داخل إطار iframe معزول تمامًا بلا أي صلاحيات، لذا لا يمكن للنصوص البرمجية أن تُنفَّذ ولا للترميز أن يصل إلى الصفحة المحيطة به. حتى HTML الخبيث لا يمكنه إلا أن يرسم نفسه داخل الإطار.

لا. يمنع العزل تنفيذ النصوص البرمجية تمامًا، لذا تُتجاهل وسوم <script> ومعالِجات الأحداث المضمّنة. ترى الترميز الثابت، وهذا بالضبط ما يجعل المعاينة آمنة.

المسار النسبي لا يملك ما يُحلّ مقابله، وبعض المضيفين يرسلون ترويسات تمنع تحميل صورهم داخل إطار. استخدم عنوان URL مطلقًا https://، أو ضمّن الصورة كمعرّف data:.

نعم. الصق المستند كاملًا (doctype و <head> و <body> وكل شيء) فيُصيَّر كما هو مكتوب. ويعمل الجزء المنفصل أيضًا؛ إذ يكمّل المتصفح البقية.

تصيّر هذه الأداة HTML الذي تلصقه كنص؛ ولا تجلب عنوان URL أبدًا. أنت تتحكم بالضبط فيما يُصيَّر، وهذا مفيد لقوالب البريد الإلكتروني والأجزاء المأخوذة وتصحيح الأخطاء السريع.

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مرجع أحرف HTML

قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

مرجع اختصارات لوحة المفاتيح

ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.

مدقق البريد الإلكتروني

تحقق من عنوان بريد إلكتروني: فحص صياغة RFC 5322، واستعلام حي عن سجل MX، بالإضافة إلى تفاصيل الجزء المحلي والنطاق والطول. لا يتم إرسال أي بريد.

مولد EditorConfig

أنشئ ملف .editorconfig من قواعد المسافة البادئة ونهاية السطر ومجموعة الأحرف، ثم أضف قسمًا صحيحًا لكل لغة في مستودعك: Python وGo وYAML وMakefile وغيرها.

عدّاد FPS

قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.

الأداة متاحة بلغات أخرى