ما هو مشغّل JavaScript؟

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

وصف الأداة

تشغّل هذه الأداة تعليمات JavaScript البرمجية في متصفحك وتعرض كل ما تكتبه التعليمات البرمجية في وحدة التحكم. اكتب التعليمات البرمجية أو الصقها على اليسار واضغط على تشغيل، أو اضغط على Ctrl+Enter (أو Cmd+Enter على جهاز Mac). يظهر الناتج على اليمين، في سطر واحد لكل استدعاء لـ console، مع تمييز التحذيرات والأخطاء بالألوان. لا يتم تشغيل أي شيء حتى تطلب ذلك، لذا يمكنك التعديل بحرية.

تعمل التعليمات البرمجية داخل Web Worker، وهو خيط معالجة في الخلفية تابع لمتصفحك. لذلك، لن يؤدي script لا ينتهي أبدًا إلى تجميد الصفحة: اضغط على إيقاف وسيتم إنهاؤه. لا يتم إرسال التعليمات البرمجية إلى خادم.

أمثلة

طباعة عملية حسابية وكائن:

const prices = [4.5, 12, 7.25];
const total = prices.reduce((sum, price) => sum + price, 0);
console.log("Total:", total);
console.log({ count: prices.length, average: total / prices.length });
JavaScript

الناتج هو:

Total: 23.75
{ count: 3, average: 7.916666666666667 }

انتظر تنفيذ عملية غير متزامنة باستخدام await على المستوى الأعلى:

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
console.log("Start");
await sleep(1000);
console.log("One second later");
JavaScript

الميزات

  • عرض ناتج console.log وinfo وdebug وwarn وerror، مع استخدام الألوان للتحذيرات والأخطاء
  • تنسيق الكائنات والمصفوفات والخرائط والمجموعات والفئات والتواريخ والأخطاء، والتعامل مع المراجع الدائرية
  • دعم العناصر النائبة مثل %s و%d و%i و%f و%j و%o في الوسيطة الأولى
  • دعم console.group وcount وtime وassert وdir وclear
  • تشغيل التعليمات البرمجية غير المتزامنة، بما في ذلك await على المستوى الأعلى وأجهزة ضبط الوقت والوعود
  • الإبلاغ عن أخطاء الصياغة والأخطاء غير المعالجة وعمليات رفض الوعود التي لم تتم معالجتها في الناتج
  • زر إيقاف ينهي script فورًا، حتى إذا كان عالقًا في حلقة لا نهائية
  • خيار الاحتفاظ بالسجلات، وهو مفعّل افتراضيًا، للحفاظ على ناتج عمليات التشغيل السابقة حتى تتمكن من مقارنة النتائج
  • مرّر مؤشر الماوس فوق سطر في الناتج لرؤية تاريخ ووقت تسجيله
  • نسخ الناتج بالكامل، أو مسحه باستخدام زر المسح، أو تنزيل التعليمات البرمجية كملف

آلية العمل

عند الضغط على تشغيل، تنشئ الأداة Web Worker جديدًا وترسل إليه التعليمات البرمجية. داخل العامل، يتم استبدال أساليب console، بحيث يتحول كل استدعاء إلى نص ويُرسل مرة أخرى إلى الصفحة. يتم تغليف التعليمات البرمجية داخل دالة غير متزامنة، وهذا ما يتيح استخدام await على المستوى الأعلى.

يعرض شريط الحالة أسفل الناتج كلمة «قيد التشغيل» أثناء تنفيذ التعليمات البرمجية أو أثناء انتظار جهاز ضبط الوقت الذي بدأتَه. يحافظ setInterval على استمرار التشغيل حتى تمسحه أو تضغط على إيقاف. يبدأ كل تشغيل بعامل جديد، لذلك لا تبقى المتغيرات من تشغيل سابق. يتم الاحتفاظ بالناتج بين عمليات التشغيل ما دام خيار الاحتفاظ بالسجلات محددًا. أزل تحديده لبدء كل تشغيل بناتج فارغ، أو اضغط على مسح لتفريغه في أي وقت.

نصائح

  • استخدم console.log بدلًا من تعبير نهائي: لا تتم طباعة قيمة السطر الأخير، لذا لن يعرض 1 + 2 بمفرده أي شيء
  • لا يحتوي العامل على صفحة، ولذلك لا تتوفر كائنات document وwindow وغيرها من كائنات DOM. استخدم self للنطاق العام
  • لا تعمل عبارات الاستيراد الثابتة في هذا النوع من التعليمات البرمجية
  • يحتفظ الناتج بأحدث 1000 سطر، ويتم اقتطاع السطر الواحد بعد 10000 حرف
  • يتم إرسال الطلبات التي تُجرى باستخدام fetch من متصفحك مثل أي طلبات أخرى، وتخضع لقواعد المصدر المشترك المعتادة
  • شغّل التعليمات البرمجية التي تثق بها فقط، كما تفعل في وحدة تحكم المتصفح