مرجع واجهة برمجة تطبيقات Console Utilities API

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

تحتوي واجهة برمجة التطبيقات Console Utilities API على مجموعة من الوظائف الملائمة لتنفيذ مهام المهام: تحديد عناصر DOM وفحصها، والاستعلام عن الكائنات، وعرض البيانات بتنسيق قابل للقراءة، وإيقاف وبدء محلل الملفات الشخصية ومراقبة أحداث DOM واستدعاءات الدوال والمزيد.

هل تبحث عن console.log() وconsole.error() ودوال console.* الأخرى؟ عرض مرجع واجهة برمجة تطبيقات Console

$_

تعرض $_ قيمة آخر تعبير تم تقييمه.

في المثال التالي، يتم تقييم التعبير البسيط (2 + 2). تكون السمة $_ بعد ذلك المُقيّمة، والتي تحتوي على القيمة نفسها:

$_ هو أحدث تعبير تم تقييمه.

في المثال التالي، يحتوي التعبير الذي تم تقييمه في البداية على صفيف من الأسماء. التقييم $_.length للعثور على طول الصفيف، تتغير القيمة المخزّنة في $_ لتصبح الأحدث التعبير المقيّم، 4:

يتغير $_ عند تقييم الأوامر الجديدة.

$0 - $4

تعمل أوامر $0 و$1 و$2 و$3 و$4 كمرجع تاريخي إلى آخر خمسة عناصر في نموذج DOM. العناصر التي تم فحصها ضمن لوحة Elements أو آخر خمسة كائنات لأجزاء من JavaScript تم اختيارها في لوحة الملفات الشخصية. تعرض $0 أحدث عنصر أو كائن JavaScript تم اختياره، $1 وتعرض ثاني آخر رسالة تم تحديدها مؤخرًا، وهكذا.

في المثال التالي، يتم اختيار عنصر img في لوحة Elements. في درج وحدة التحكّم، تمّ تقييم $0 ويعرض العنصر نفسه:

مثال على $0

تُظهر الصورة أدناه عنصرًا مختلفًا تم اختياره في نفس الصفحة. تشير السمة $0 الآن إلى العنصر المحدد، بينما تعرض $1 العنصر المحدد مسبقًا:

مثال على $1

$(selector [, startNode])

تعرض $(selector) المرجع إلى عنصر DOM الأول باستخدام أداة اختيار CSS المحددة. فعندما باستخدام وسيطة واحدة، هذه الدالة هي اختصار للدالة document.querySelector().

يعرض المثال التالي إشارة إلى العنصر <img> الأول في المستند:

مثال على $(&#39;img&#39;).

انقر بزر الماوس الأيمن على النتيجة المعروضة واختَر عرض في لوحة العناصر للعثور عليها في نموذج العناصر في المستند (DOM). مرّر للوصول إلى "عرض" لإظهاره على الصفحة.

يعرض المثال التالي إشارة إلى العنصر المحدّد حاليًا ويعرض src الخاص به. الموقع:

مثال على $(&#39;img&#39;).src

تتيح هذه الدالة أيضًا استخدام مَعلمة ثانية، startNode، تحدّد "عنصرًا". أو عقدة من والتي تبحث عن العناصر. القيمة التلقائية لهذه المَعلمة هي document.

يعرض المثال التالي إشارة إلى العنصر img الأول التابع للدالة devsite-header-background. عرض خاصية src:

مثال على $(&#39;img&#39;, div).src

تعرض$$(selector [, startNode])

$$(selector) مصفوفة من العناصر التي تطابق أداة اختيار لغة CSS المحددة. هذا الأمر هو يعادل الاتصال بالرقم Array.from(document.querySelectorAll()).

يستخدم المثال التالي السمة $$() to create an array of all <img> elements in the current document and displays the value of each element's src property:

let images = $$('img');
for (let each of images) {
  console.log(each.src);
}


مثال على استخدام <!-- notranslate l10n-placeholder: l10n-placeholder3 -->()</code> لإنشاء صفيف من جميع <code translate=&lt;img&gt; العناصر
التي تظهر في المستند الحالي بعد العقدة المحدّدة:


let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}



مثال على استخدام $() لتحديد كل الصور التي تظهر بعد عنصر div المحدد في المستند وعرض مصادرها.





$x(path [, startNode])



تعرض الدالة $x(path) صفيفًا من عناصر DOM التي تطابق تعبير XPath المحدد.



على سبيل المثال، تعرض ما يلي جميع عناصر <p> في الصفحة:


$x("//p")



مثال على استخدام أداة اختيار XPath



يعرض المثال التالي جميع عناصر <p> التي تتضمّن عناصر <a>:


$x("//p[a]")



مثال على استخدام أداة اختيار XPath أكثر تعقيدًا



على غرار دوال المحدد الأخرى، تتضمن الدالة $x(path) معلَمة ثانية اختيارية، startNode،
تحدد عنصرًا أو عقدة للبحث عن عناصر منها.



مثال على استخدام محدّد XPath مع startNode



clear()



يمحو clear() وحدة التحكّم من سجلّها.


clear();



Copy(object)



ينسخ copy(object) تمثيل سلسلة للعنصر المحدَّد إلى الحافظة.


copy($0);



تصحيح(الوظيفة)



عند استدعاء الدالة المحددة، يتم استدعاء برنامج تصحيح الأخطاء وينقطع داخل الدالة في
تتيح لك لوحة المصادر الانتقال بين الرموز وتصحيح الأخطاء.


debug(getData);



اقتحام دالة باستخدام debug().



يمكنك استخدام undebug(fn) للتوقّف عن إيقاف الدالة، أو استخدام واجهة المستخدم لإيقاف جميع نقاط الإيقاف.



لمزيد من المعلومات عن نقاط الإيقاف، يُرجى الاطّلاع على مقالة إيقاف الرمز مؤقتًا باستخدام نقاط الإيقاف.



dir(object)



تعرض dir(object) قائمة بنمط الكائن بكل خصائص العنصر المحدّد. هذه الطريقة
هو اختصار لطريقة console.dir() في Console API.



يوضح المثال التالي الفرق بين تقييم document.body مباشرةً في
سطر الأوامر، واستخدام dir() لعرض العنصر نفسه:


document.body;
dir(document.body);



تسجيل Document.body باستخدام أو بدون الدالة dir().



لمزيد من المعلومات، يُرجى الاطّلاع على إدخال console.dir() في Console API.



dirxml(object)



تطبع dirxml(object) تمثيل XML للكائن المحدّد، كما هو موضّح في لوحة Elements.
هذه الطريقة مكافئة لطريقة console.dirxml().



inspect(object/function)



يفتح inspect(object/function) ويختار العنصر أو العنصر المحدّد في الموضع المناسب
لوحة: إما لوحة Elements لعناصر DOM أو لوحة الملفات الشخصية لعناصر عناصر التحكم في JavaScript.



يفتح المثال التالي document.body في لوحة Elements:


inspect(document.body);



فحص عنصر باستخدامInspect().



عند تمرير دالة لفحصها، تفتح الدالة المستند في لوحة المصادر لك.
لفحصه.



getEventListeners(object)



تعرض الدالة getEventListeners(object) أدوات معالجة الأحداث المسجَّلة في الكائن المحدّد. تشير رسالة الأشكال البيانية
القيمة المعروضة هي كائن يحتوي على مصفوفة لكل نوع حدث مسجَّل (click أو
keydown، على سبيل المثال). وأعضاء كل مصفوفة عبارة عن كائنات تصف المستمع المسجَّل
لكل نوع. على سبيل المثال، يسرد ما يلي جميع أدوات معالجة الأحداث المسجَّلة في المستند
الكائن:


getEventListeners(document);



مخرجات استخدام getEventListeners()



إذا تم تسجيل أكثر من مستمع واحد في الكائن المحدد، فإن الصفيفة تحتوي على عنصر
لكل مستمع في المثال التالي، هناك اثنين من المستمعين للأحداث مسجَّلين في
عنصر المستند لحدث click:



أدوات استماع متعددة



يمكنك توسيع كل عنصر من هذه العناصر لاستكشاف خصائصها:



عرض موسَّع لعنصر المستمع



لمزيد من المعلومات، يُرجى الاطّلاع على فحص خصائص العناصر.



مفاتيح(كائن)



تعرض الدالة keys(object) صفيفًا يحتوي على أسماء السمات التي تنتمي إلى السمات المحددة.
الخاص بك. للحصول على القيم المرتبطة بالخصائص نفسها، استخدِم values().



على سبيل المثال، لنفترض أن التطبيق عرّف العنصر التالي:


let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};



بافتراض أنه تم تحديد player في مساحة الاسم العامة (لتبسيط الأمر)، فإن كتابة keys(player)
تؤدي values(player) في وحدة التحكّم إلى ما يلي:



مثال على طريقتين key() وValues().



الشاشة(الوظيفة)



عند استدعاء الدالة المحددة، يتم تسجيل رسالة بوحدة التحكم تشير إلى
مع الوسيطات التي تم تمريرها إلى الدالة عند استدعائها.


function sum(x, y) {
  return x + y;
}
monitor(sum);



مثال على طريقة Monitoring()



يمكنك استخدام unmonitor(function) لإيقاف التتبُّع.



monitorEvents(object [, events])



عند وقوع أحد الأحداث المحددة على الكائن المحدد، يتم تسجيل كائن الحدث في
وحدة التحكم. يمكنك تحديد حدث واحد لمراقبته، أو مصفوفة من الأحداث، أو أحد الأحداث العامة.
"الأنواع" ربطها بمجموعة محددة مسبقًا من الأحداث. راجِع الأمثلة أدناه.



يراقب ما يلي جميع أحداث تغيير الحجم في كائن النافذة.


monitorEvents(window, "resize");



رصد أحداث تغيير حجم النافذة



يحدد ما يلي صفيفًا لمراقبة كل من "تغيير الحجم" و"التمرير" الأحداث في كائن النافذة:


monitorEvents(window, ["resize", "scroll"])



ويمكنك أيضًا تحديد أحد "أنواع" الأحداث المتاحة، وهي سلاسل يتم تعيينها إلى مجموعات محدّدة مسبقًا من
أحداث. يسرد الجدول التالي أنواع الأحداث المتاحة وعمليات ربط الأحداث المرتبطة بها:



نوع الحدث & الأحداث المرتبطة المقابلة
ماوس"الماوس"، "الماوس"، "النقر"، "dblclick"، "الماوس"، "الماوس"، "الماوس"، "الماوس"
مفتاح"keydown"، "keyup"، "keypress"، "textInput"
لمس" touchstart"، " touchmove"، "Touchend"، "إلغاء اللمس"
التحكم"تغيير الحجم"، "التمرير"، "تكبير"، "التركيز"، "تمويه"، "اختيار"، "تغيير"، "إرسال"، "إعادة ضبط"



على سبيل المثال، يستخدم ما يلي "المفتاح" نوع الحدث: جميع الأحداث الرئيسية المقابلة في نص إدخال
الحقل المحدد حاليًا في لوحة Elements.


monitorEvents($0, "key");



في ما يلي نموذج للمخرجات بعد كتابة أحرف في حقل النص:



رصد الأحداث الرئيسية



يمكنك استخدام unmonitorEvents(object[, events]) لإيقاف التتبُّع.



الملف الشخصي([name]) وprofileEnd([name])



يبدأ profile() جلسة تحليل وحدة المعالجة المركزية (CPU) بلغة JavaScript باستخدام اسم اختياري. profileEnd()
إكمال الملف الشخصي وعرض النتائج في الأداء > الأغنية الرئيسية.





لبدء إنشاء الملفات التعريفية:


profile("Profile 1")



لإيقاف تحليل الملفات الشخصية والاطّلاع على النتائج في الأداء > المسار الرئيسي:


profileEnd("Profile 1")



النتيجة في الأداء > المسار الرئيسي:



الملف الشخصي 1 في المسار الرئيسي للأداء.



يمكن أيضًا دمج الملفات الشخصية. على سبيل المثال، سيعمل ذلك بأي ترتيب:


profile('A');
profile('B');
profileEnd('A');
profileEnd('B');





queryObjects(Constructor)



يمكنك طلب queryObjects(Constructor) من وحدة التحكّم لعرض مصفوفة من العناصر التي تم إنشاؤها.
مع الدالة الإنشائية المحددة. على سبيل المثال:



    

  • queryObjects(Promise) عرض جميع تكرارات Promise.
    • 

  • queryObjects(HTMLElement) عرض جميع عناصر HTML.
    • 

  • queryObjects(foo)، حيث foo هو اسم صف. عرض جميع الكائنات التي تم إنشاء مثيل لها
عبر new foo().
    • 




نطاق queryObjects() هو سياق التنفيذ المحدّد حاليًا في وحدة التحكّم.



table(data [, column])



تسجيل بيانات العناصر بتنسيق جدول عن طريق تمرير عنصر بيانات مع عناوين أعمدة اختيارية.
هذا اختصار لـ console.table().



على سبيل المثال، لعرض قائمة بالأسماء باستخدام جدول في وحدة التحكّم، ستفعل:


let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



مثال على طريقة table().



undebug(function)



توقف undebug(function) تصحيح أخطاء الدالة المحددة بحيث عندما تكون الدالة
استدعينا البرنامج، فلن يتم استدعاء برنامج تصحيح الأخطاء بعد الآن. يتم استخدام هذا الإذن بالتعاون مع debug(fn).


undebug(getData);



إلغاء المراقبة(الدالة)



يوقف unmonitor(function) مراقبة الدالة المحددة. يستخدم هذا بالتعاون مع
monitor(fn)


unmonitor(getData);



unmonitorEvents(object [, events])



يتوقف تطبيق "unmonitorEvents(object[, events])" عن مراقبة الأحداث للعنصر والأحداث المحدّدة. بالنسبة
على سبيل المثال، يؤدي ما يلي إلى إيقاف مراقبة جميع الأحداث في كائن النافذة:


unmonitorEvents(window);



يمكنك أيضًا اختيار إيقاف مراقبة أحداث معيّنة على أحد العناصر. على سبيل المثال، ما يلي
يبدأ الرمز في مراقبة جميع أحداث الماوس على العنصر المحدد حاليًا، ثم يتوقف عن المراقبة
"mousemove" الأحداث (ربما لتقليل التشويش في إخراج وحدة التحكم):


monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");



القيم(object)



تعرض الدالة values(object) صفيفًا يحتوي على قيم كل السمات التي تنتمي إلى السمة المحددة
الخاص بك.


let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);



نتيجة القيم(player).