ساحة تجربة HTML وCSS وJS

ماذا تفعل الأداة

ساحة التجربة هذه محرر أكواد صغير على الإنترنت لتجارب الواجهة الأمامية. اكتب HTML وCSS وJavaScript في ثلاثة تبويبات مع تلوين الصيغة فتتحدّث المعاينة أثناء الكتابة، مثل CodePen أو JSFiddle لكن دون حساب. وتعرض وحدة تحكم مدمجة مخرجات console.log() والأخطاء مع رقم السطر في كود JavaScript، فيمكنك تصحيح الأخطاء دون فتح أدوات المطوّرين. وهذا يجعلها مفيدة على الهاتف أو على حاسوب مستعار.

استخدمها لتجربة تخطيط CSS، أو إعادة إنتاج خطأ لزميل، أو اختبار مقتطف من Stack Overflow، أو تعليم مبتدئ، أو رسم نموذج أولي سريع.

طريقة الاستخدام

1. اكتب في تبويبات HTML وCSS وJS، أو اضغط مثال للبدء من عرض توضيحي صغير لعدّاد. النقطة على التبويب تعني أنه يحتوي على كود.
2. تعمل المعاينة تلقائيًا بعد 0.6 ثانية من توقفك عن الكتابة. أوقف تشغيل تلقائي للسكربتات الثقيلة واضغط تشغيل أو Ctrl+Enter عندما تكون جاهزًا.
3. راقب وحدة التحكم للسجلات والتحذيرات والأخطاء، ويظهر أحدث سطر دائمًا في الأعلى. تُعرض الكائنات والمصفوفات وMaps وSets وعناصر DOM بشكل مضغوط ومقروء.
4. استخدم مشاركة لإرسال الكود إلى شخص ما. يحفظ تنزيل ZIP الملفات index.html وstyle.css وscript.js منفصلة وجاهزة لمشروع حقيقي، ويحفظ تنزيل HTML كل شيء في ملف index.html واحد يُفتح في أي متصفح.

يُحتفظ بالكود في هذا المتصفح، فيبقى موجودًا عندما تعود. ويُزيح مفتاح Tab بمسافتين.

مثال

HTML:

<button id="go">Click me</button>

JavaScript:

document.querySelector('#go').addEventListener('click', () => {
  console.log('clicked at', new Date().toLocaleTimeString())
})

كل نقرة تضيف سطرًا إلى وحدة التحكم. وإذا أخطأت في كتابة اسم، تعرض وحدة التحكم ReferenceError باللون الأحمر مع السطر في تبويب JS حيث وقع الخطأ.

كيف تعمل

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