لماذا

كيف يعمل
عارض HTML.

عدّل HTML وشاهد النتيجة في متصفحك. إليك طريقة عمل المعاينة والمسودات والمشاركة.

يجمع عارض HTML المحرر والمعاينة في مساحة عمل واحدة. افتح ملفًا أو الصق مقطعًا، وافحص وحدة التحكم، ثم نزّل المصدر أو شاركه.

ما هو عارض HTML؟

يعرض عارض HTML الشيفرة كصفحة ويب. يتحدث هذا العارض أثناء الكتابة لتفحص مقطعًا دون إنشاء مشروع. يعمل CSS داخل <style> وJavaScript داخل <script>؛ أما JSX ولغات الخادم فتحتاج إلى تحويلها إلى HTML أولًا.

كيف يعمل عارض HTML

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

لا يرفع العرض الشيفرة المصدرية إلينا. تظل طلبات المستند خاضعة لقواعد المتصفح مثل CORS. تحمل الروابط HTML مضغوطًا ويتوقف طولها على المستند؛ من الأفضل إرسال ملف بدلًا من رابط طويل جدًا.

عارض HTML مقابل CodePen وJSFiddle وملفك المحلّي

يوفّر CodePen وJSFiddle بيئات مستضافة لتجربة الكود. قارن خيارات حفظ المشاريع ولوحات الكود فيهما إذا احتجت إلى أكثر من مستند HTML واحد.

يناسبك فتح ملف HTML محلي إذا كان الملف لديك بالفعل. يجب أن تتوفر الصور والأنماط ذات المسارات النسبية في المسارات المستخدمة. للمشاريع التي تحتاج إلى بناء أو API، استخدم خادم التطوير الخاص بها.

صُمّم HTML Viewer Cat للتحرير والمعاينة السريعين. لا يتطلب إنشاء حساب. تحفظ المسودة المحلية عملك في هذا المتصفح؛ ويمنحك تنزيل HTML ملفًا تحتفظ به في مكان آخر.

مساحة العمل

يملأ المحرر والمعاينة النافذة. افتح وحدة التحكم لقراءة السجلات والأخطاء، أو اختر مثالًا من الشريط السفلي.

التحرير والاختبار

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

يدعم المحرر تلوين الصياغة والبحث وطيّ الكود والتراجع. يستخدم التنسيق Prettier. اسحب الفاصل لتغيير حجم اللوحتين. تحتوي روابط المشاركة على مصدر HTML؛ ولا تحفظ قيم النماذج أو حالة JavaScript في المعاينة.

الاستخدام والتخزين

بناها ويتعهّدها Axel، مطوّر مستقلّ في النرويج.