توضّح هذه الصفحة كيفية مساهمة وحدة تحكّم أدوات مطوري البرامج في Chrome في تسهيل عملية تطوير صفحات الويب. هناك استخدامان رئيسيان لوحدة التحكّم: عرض الرسائل المُسجَّلة وتشغيل JavaScript.
عرض الرسائل المسجّلة
غالبًا ما يسجل مطورو الويب الرسائل إلى وحدة التحكم للتأكد من أن لغة JavaScript تعمل على النحو المتوقع. لتسجيل رسالة، عليك إدراج تعبير مثل console.log('Hello, Console!') في JavaScript. عندما ينفّذ المتصفح JavaScript ويظهر لك تعبيرًا كهذا، سيعرف أنّه من المفترض
أن يسجّل الرسالة في وحدة التحكّم. على سبيل المثال، لنفترض أنّك تحاول كتابة HTML وJavaScript لإحدى الصفحات:
<!doctype html>
<html>
<head>
<title>Console Demo</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log('Loading!');
const h1 = document.querySelector('h1');
console.log(h1.textContent);
console.assert(document.querySelector('h2'), 'h2 not found!');
const artists = [
{
first: 'René',
last: 'Magritte'
},
{
first: 'Chaim',
last: 'Soutine'
},
{
first: 'Henri',
last: 'Matisse'
}
];
console.table(artists);
setTimeout(() => {
h1.textContent = 'Hello, Console!';
console.log(h1.textContent);
}, 3000);
</script>
</body>
</html>
يوضح الشكل 1 الشكل الذي تبدو عليه وحدة التحكّم بعد تحميل الصفحة والانتظار لمدة 3 ثوانٍ. حاول معرفة سطور الرمز التي تسببت في تسجيل المتصفح للرسائل.
الشكل 1. لوحة وحدة التحكم.
يسجّل مطوّرو الويب الرسائل لسببَين عامَين:
- جارٍ التأكّد من تنفيذ الرمز البرمجي بالترتيب الصحيح.
- فحص قيم المتغيرات في لحظة معينة من الوقت.
راجِع بدء استخدام رسائل التسجيل للحصول على تجربة عملية في التسجيل. يُرجى الاطّلاع على مرجع واجهة برمجة التطبيقات
لوحدة التحكّم لتصفّح القائمة الكاملة لطرق console. يتمثل الاختلاف الرئيسي بين الطرق في
كيفية عرض البيانات التي تقوم بتسجيلها.
تشغيل JavaScript
وحدة التحكّم هي أيضًا REPL. يمكنك تشغيل JavaScript في وحدة التحكم للتفاعل مع الصفحة التي تفحصها. على سبيل المثال، يعرض الشكل 2 وحدة التحكّم بجانب الصفحة الرئيسية لـ "أدوات مطوري البرامج"، ويعرض الشكل 3 الصفحة نفسها بعد استخدام "وحدة التحكّم" لتغيير عنوان الصفحة.
الشكل 2. لوحة Console بجانب الصفحة الرئيسية لأدوات مطوّري البرامج
الشكل 3. استخدام وحدة التحكّم لتغيير عنوان الصفحة
يمكن تعديل الصفحة من خلال "وحدة التحكّم" لأنّ هذه الوحدة لديها إذن بالوصول الكامل إلى window الصفحة. تتضمّن "أدوات مطوّري البرامج" بعض وظائف تسهيل الاستخدام التي تسهِّل فحص الصفحة. على سبيل المثال، لنفترض أنّ لغة JavaScript تحتوي على دالة تُسمى hideModal. تشغيل
debug(hideModal) يؤدي إلى إيقاف الرمز مؤقتًا في السطر الأول من hideModal عند استدعائه في المرة التالية.
يُرجى الاطّلاع على مرجع واجهة برمجة التطبيقات لـ Console Utilities لعرض القائمة الكاملة لوظائف الأدوات المساعدة.
عند تشغيل JavaScript، لن تحتاج إلى التفاعل مع الصفحة. ويمكنك استخدام وحدة التحكم لاختبار رمز
جديد غير ذي صلة بالصفحة. على سبيل المثال، لنفترض أنّك تعرفت للتو على طريقة "مصفوفة JavaScript" المدمجة map()، وتريد تجربتها. تعد وحدة التحكم مكانًا
جيدًا لتجربة الدالة.
راجِع المقالة بدء استخدام JavaScript للحصول على تجربة عملية بشأن تشغيل JavaScript في "وحدة التحكّم".