توضّح هذه الصفحة كيف تسهّل "وحدة تحكّم أدوات مطوّري البرامج في 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. لوحة وحدة التحكّم بجانب الصفحة الرئيسية لأدوات مطوّري البرامج.
الشكل 3. استخدام وحدة التحكم لتغيير عنوان الصفحة.
يمكن إجراء تعديلات على الصفحة من وحدة التحكّم بعد أن تحصل وحدة التحكّم على إذن الوصول الكامل إلى window الخاصة بالصفحة. تتضمن أدوات مطوري البرامج بعض الوظائف السهلة الاستخدام التي تسهّل فحص الصفحة. على سبيل المثال، لنفترض أنّ لغة JavaScript تحتوي على دالة اسمها hideModal. قيد التشغيل
يؤدي debug(hideModal) إلى إيقاف الرمز مؤقتًا في السطر الأول من hideModal عند طلبه بعد ذلك.
يُرجى الاطّلاع على مرجع واجهة برمجة تطبيقات Console Utilities API للاطِّلاع على القائمة الكاملة لوظائف الأداة.
عند تشغيل JavaScript، لن تحتاج إلى التفاعل مع الصفحة. يمكنك استخدام وحدة التحكم لتجربة
رمز جديد لا يرتبط بالصفحة. على سبيل المثال، لنفترض أنّك تعرّفت للتو على طريقة مصفوفة JavaScript
المضمَّنة map() وتريد تجربتها. تعد وحدة التحكم مكانًا
جيدًا لتجربة الدالة.
يُرجى الاطّلاع على بدء استخدام JavaScript للحصول على تجربة عملية بشأن تشغيل JavaScript في وحدة التحكّم.