نظرة عامة على وحدة التحكّم

Kayce Basques

توضّح هذه الصفحة كيفية مساهمة وحدة تحكّم أدوات مطوري البرامج في 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 الصفحة نفسها بعد استخدام "وحدة التحكّم" لتغيير عنوان الصفحة.

لوحة Console بجانب الصفحة الرئيسية لأدوات مطوّري البرامج

الشكل 2. لوحة Console بجانب الصفحة الرئيسية لأدوات مطوّري البرامج

استخدام وحدة التحكّم لتغيير عنوان الصفحة

الشكل 3. استخدام وحدة التحكّم لتغيير عنوان الصفحة

يمكن تعديل الصفحة من وحدة التحكم لأن وحدة التحكم لديها حق الوصول الكامل إلى صفحة window تتضمّن "أدوات مطوّري البرامج" بعض وظائف تسهيل الاستخدام التي تسهِّل فحص الصفحة. بالنسبة على سبيل المثال، لنفترض أنّ لغة JavaScript تحتوي على دالة تُسمى hideModal. الركض تؤدي debug(hideModal) إلى إيقاف الرمز مؤقتًا في السطر الأول من hideModal عند استدعائه في المرة التالية. يُرجى الاطّلاع على مرجع واجهة برمجة التطبيقات لـ Console Utilities لعرض القائمة الكاملة لوظائف الأدوات المساعدة.

عند تشغيل JavaScript، لن تحتاج إلى التفاعل مع الصفحة. يمكنك استخدام Console لتجربة رمز جديد غير ذي صلة بالصفحة. على سبيل المثال، لنفترض أنك تعرفت للتو على ميزات طريقة مصفوفة JavaScript map()، وأنت بحاجة إلى تجربتها. تتميز وحدة التحكم لتجربة الدالة.

راجِع بدء تشغيل JavaScript للحصول على تجربة عملية في تشغيل JavaScript في وحدة التحكم.