يوضّح لك هذا الدليل التعليمي التفاعلي كيفية تشغيل JavaScript في وحدة تحكّم أدوات مطوري البرامج في Chrome. اطّلِع على بدء استخدام رسائل التسجيل للتعرّف على كيفية تسجيل الرسائل في "وحدة التحكّم". اطّلع على البدء باستخدام تصحيح أخطاء JavaScript لمعرفة كيفية إيقاف رمز JavaScript مؤقتًا وتصفّحه في سطر واحد في كل مرة.
الشكل 1. وحدة التحكّم
نظرة عامة
Console هي REPL اختصارًا لـ "القراءة" و"التقييم" و"الطباعة" و"التكرار". حيث يقرأ JavaScript الذي تكتبه، ويقيّم الرمز الخاص بك، ويطبع نتيجة تعبيرك، ثم يعود مرة أخرى إلى الخطوة الأولى.
بدء إعداد "أدوات مطوري البرامج"
تم تصميم هذا البرنامج التعليمي بحيث يمكنك فتح العرض التوضيحي وتجربة جميع مهام سير العمل بنفسك. عندما تتابع جسديًا، من المرجح أن تتذكر مهام سير العمل لاحقًا.
اضغط على Command+Option+J (في نظام التشغيل Mac) أو Control+Shift+J (لأنظمة التشغيل Windows وLinux وChromeOS) لفتح Console مباشرةً هنا في هذه الصفحة.
الشكل 2. يظهر هذا البرنامج التعليمي على اليمين، و"أدوات مطوري البرامج" على اليسار.
عرض JavaScript أو DOM للصفحة وتغييرهما
عند إنشاء صفحة أو تصحيح الأخطاء فيها، من المفيد في كثير من الأحيان تشغيل العبارات في وحدة التحكّم لتغيير مظهر الصفحة أو تشغيلها.
لاحظ النص الموجود في الزر أدناه.
اكتب
document.getElementById('hello').textContent = 'Hello, Console!'
في وحدة التحكم ثم اضغط على Enter لتقييم التعبير. لاحظ كيف يتغير النص داخل الزر.الشكل 3. كيفية ظهور وحدة التحكّم بعد تقييم التعبير أعلاه.
يمكنك الاطّلاع على
"Hello, Console!"
أسفل الرمز الذي قيّمته. تذكر الخطوات الأربع لـ REPL: القراءة والتقييم والطباعة والتكرار. بعد تقييم التعليمة البرمجية، تطبع REPL نتيجة التعبير. وبالتالي، يجب أن تكون السمة"Hello, Console!"
ناتجة عن تقييمdocument.getElementById('hello').textContent = 'Hello, Console!'
.
تشغيل JavaScript عشوائي غير مرتبط بالصفحة
قد تحتاج أحيانًا إلى مساحة للرموز البرمجية حيث يمكنك اختبار بعض الرموز، أو تجربة ميزات JavaScript جديدة لست على دراية بها. وتُعد وحدة التحكم مكانًا مثاليًا لهذه الأنواع من التجارب.
- اكتب
5 + 15
في وحدة التحكّم. ستظهر النتيجة20
أسفل التعبير (ما لم يستغرق التعبير وقتًا طويلاً لتقييمه). - اضغط على
Enter
لتقييم التعبير. تطبع وحدة التحكم نتيجة التعبير أسفل التعليمة البرمجية. يوضّح الشكل 4 أدناه كيف يجب أن تبدو وحدة التحكّم بعد تقييم هذا التعبير. اكتب الرمز التالي في وحدة التحكّم. حاول كتابتها حرفًا بحرف، بدلاً من نسخها ولصقها.
function add(a, b=20) { return a + b; }
راجِع تحديد القيم التلقائية لوسيطات الدوال إذا لم تكن تعرف بنية
b=20
.الآن، قم باستدعاء الدالة التي حددتها للتو.
add(25);
الشكل 4. كيفية ظهور وحدة التحكّم بعد تقييم التعبيرات أعلاه.
تحدّد الدالة
add(25)
القيمة45
لأنّه عند استدعاء الدالةadd
بدون وسيطة ثانية، يتم ضبط قيمةb
تلقائيًا على20
.
لن تتمكن من تشغيل أي رمز في جلسة وحدة التحكم هذه حتى يتم عرض الدالة. إذا استغرق ذلك وقتًا طويلاً، يمكنك استخدام إدارة المهام لإلغاء العمليات الحسابية التي تستهلك وقتًا طويلاً، ولكن سيؤدي ذلك أيضًا إلى تعذُّر تحميل الصفحة الحالية وفقدان جميع البيانات التي أدخلتها.
الخطوات التالية
راجِع تشغيل JavaScript لاستكشاف المزيد من الميزات المرتبطة بتشغيل JavaScript في وحدة التحكّم.
تتيح لك أدوات مطوّري البرامج إيقاف نص برمجي مؤقتًا أثناء تنفيذه. أثناء إيقاف الفيديو مؤقتًا، يمكنك استخدام وحدة التحكّم لعرض window
أو DOM
للصفحة وتغييرهما في الوقت المناسب. يوفر ذلك سير عمل
قوي لتصحيح الأخطاء. راجع بدء استخدام تصحيح أخطاء JavaScript للحصول على برنامج تعليمي تفاعلي.
تتيح وحدة التحكّم أيضًا مجموعة من مُحددات التنسيق. يمكنك الاطّلاع على تنسيق الرسائل ونمطها في وحدة التحكّم للتعرّف على جميع طرق تنسيق رسائل وحدة التحكّم ونمطها.
بالإضافة إلى ذلك، تتضمّن وحدة التحكّم أيضًا مجموعة من الوظائف الملائمة التي تسهّل التفاعل مع الصفحة. مثلاً:
- بدلاً من كتابة
document.querySelector()
لاختيار عنصر، يمكنك كتابة$()
. هذه بناء الجملة مستوحاة من jQuery، ولكنها ليست jQuery في الواقع. إنه مجرد اسم مستعار لـdocument.querySelector()
. - تحدّد الدالة
debug(function)
نقطة توقف بشكل فعّال في السطر الأول من هذه الدالة. - تعرض
keys(object)
مصفوفة تحتوي على مفاتيح الكائن المحدد.
يُرجى الاطّلاع على مرجع واجهة برمجة التطبيقات لـ Console Utilities لاستكشاف جميع الوظائف الملائمة.