محرر HTML/CSS/JS المباشر
ملعب صغير داخل المتصفح — اكتب HTML وCSS وJS وشاهد النتيجة تُحدَّث مباشرة في معاينة معزولة، دون حساب أو خطوة بناء.
1,209 مشاهدة
كيف يعمل
اكتب في تبويبات HTML وCSS وJS، وتُحدَّث لوحة المعاينة أثناء الكتابة، حيث تُعرض النتيجة المدمجة داخل إطار iframe معزول (sandboxed). تُضبط خاصية sandbox على allow-scripts دون allow-same-origin، وهذا بالضبط ما يجعلها آمنة: الأكواد التي تعمل داخل المعاينة تُنفَّذ في أصل (origin) منفصل ومبهم، فلا يمكنها قراءة ملفات تعريف الارتباط أو التخزين المحلي أو DOM الخاص بهذه الصفحة، ولا يمكن لهذه الصفحة بدورها الوصول إلى داخل الإطار. هذا العزل حد أمني تفرضه المتصفحات نفسها، وليس مجرد إطار بصري — إنه الآلية ذاتها التي تستخدمها المواقع لتضمين محتوى طرف ثالث غير موثوق (إعلانات، أدوات مصغّرة، مقاطع أكواد يرسلها المستخدمون) بأمان، دون الحاجة إلى الوثوق بالكود الذي بداخله.
التحرير نفسه بسيط عمدًا: ثلاثة حقول نصية (textareas)، بلا تمييز صياغي، بلا إكمال تلقائي. هذا مفاضلة واعية وليس ميزة ناقصة — تجربة تحرير أكواد حقيقية (تقسيم الكلمات المفتاحية إلى رموز، مطابقة الأقواس، إكمال الوسوم تلقائيًا) تعني تحميل مكتبة محرر خارجية كبيرة، ما يضيف ثقلاً وتأخيرًا في التحميل قبل أن تتمكن حتى من كتابة حرف واحد. تُحسّن هذه الأداة العكس تمامًا: افتح الصفحة وابدأ الكتابة فورًا، بلا أي اعتماديات وبلا أي خطوة بناء من أي نوع.
كل ضغطة مفتاح في أي من التبويبات الثلاثة تُطلق إعادة بناء: يُجمَع HTML الحالي، وCSS الحالي ملفوفًا داخل وسم <style>، وJS الحالي ملفوفًا داخل وسم <script>، في مستند واحد يُكتب داخل الإطار. لا توجد مقارنة فروقات (diffing) ولا ترقيع تدريجي — يُستبدَل مستند المعاينة بالكامل ببساطة، وهو ما يكفي سرعةً في هذا النطاق ليبدو فوريًا مع إبقاء التنفيذ بسيطًا.
معلومة مفيدة
بما أن كل شيء — التحرير والعرض — يحدث داخل متصفحك، فلا توجد رحلة ذهاب وإياب إلى خادم ولا حاجة لحساب. هذا مناسب تمامًا لاختبار حيلة CSS بسرعة، أو عزل خطأ JavaScript من قاعدة كود أكبر قبل الإبلاغ عنه، أو صنع نموذج أولي لمكوّن صغير قبل نسخ النتيجة العاملة إلى مشروع حقيقي. لا يُحفظ أي شيء تكتبه تلقائيًا في أي مكان، لذا تعامل معها كمسودة: انسخ كل ما تريد الاحتفاظ به قبل إغلاق التبويب.
الأسئلة الشائعة
هل يُرسَل الكود الخاص بي إلى أي مكان؟
لا — يعمل كل شيء محليًا داخل متصفحك. تُعرَض المعاينة داخل إطار iframe معزول في هذه الصفحة نفسها؛ ولا يُرفَع أو يُحفَظ شيء على أي خادم.
لماذا لا يوجد تمييز صياغي؟
إضافة محرر أكواد حقيقي (تمييز صياغي، إكمال تلقائي) يعني تحميل مكتبة محرر خارجية ثقيلة. تبقى هذه الأداة خفيفة عمدًا — حقول نصية بسيطة، تحميل فوري، وبلا أي اعتماديات، ولا شيء لتنزيله قبل أن تبدأ الكتابة.
هل من الآمن تشغيل كود غير موثوق في المعاينة؟
يستخدم إطار المعاينة الخاصية sandbox="allow-scripts" دون allow-same-origin، لذا لا يمكن للأكواد بداخله قراءة ملفات تعريف الارتباط أو التخزين المحلي أو أي شيء آخر من هذه الصفحة — فهو معزول تمامًا كما لو كان محتوى مضمّنًا غير موثوق. هذا حد حقيقي تفرضه المتصفحات، وليس مجرد مظهر شكلي.
هل يمكن لـ JavaScript الخاص بي في المعاينة أن يؤثر على باقي هذا الموقع؟
لا — يعامل المتصفح الإطار المعزول كأصل منفصل ومبهم. الأكواد بداخله محصورة في مستند ذلك الإطار وحده؛ ولا سبيل لها إلى متغيرات هذه الصفحة أو طلبات الشبكة أو ملفات تعريف الارتباط أو التخزين، مهما حاول الكود فعله.
هل تُحدَّث المعاينة مع كل ضغطة مفتاح؟
نعم — يُعاد بناء محتوى الإطار من تبويبات HTML وCSS وJS الحالية مباشرة أثناء الكتابة، فترى أثر أي تغيير (قاعدة CSS جديدة، دالة معدَّلة) فورًا دون الضغط على زر "تشغيل" منفصل أو انتظار خطوة بناء.
أدوات مشابهة
الإبلاغ عن مشكلة
محرر HTML/CSS/JS المباشر
التعليقات
لا توجد تعليقات بعد — كن أول من يكتب تعليقًا!