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

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

هل تبحث عن console.log() وconsole.error() وبقية دوال console.*؟ اطّلِع على مرجع واجهة برمجة التطبيقات في "وحدة التحكّم".

$_

تعرض الدالة $_ قيمة التعبير الذي تم تقييمه مؤخرًا.

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

‫$_ هو التعبير الذي تم تقييمه مؤخرًا.

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

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

من 0 إلى 4 دولار أمريكي

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

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

مثال على 0 دولار أمريكي

تعرض الصورة أدناه عنصرًا مختلفًا تم اختياره في الصفحة نفسها. يشير $0 الآن إلى العنصر الذي تم اختياره حديثًا، بينما يعرض $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=<img> التي تظهر في المستند الحالي بعد العقدة المحدّدة:


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



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





$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(function)



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


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 للعنصر المحدّد، كما يظهر في لوحة العناصر.
هذه الطريقة مكافئة لطريقة console.dirxml().



inspect(object/function)



يؤدي النقر على inspect(object/function) إلى فتح العنصر أو الكائن المحدّد واختياره في اللوحة المناسبة، أي لوحة العناصر لعناصر DOM أو لوحة "الملفات الشخصية" لكائنات الذاكرة المجمّعة في JavaScript.



يفتح المثال التالي document.body في لوحة العناصر:


inspect(document.body);



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



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



getEventListeners(object)



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


getEventListeners(document);



ناتج استخدام getEventListeners()‎



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



مستمعون متعدّدون



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



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



لمزيد من المعلومات، اطّلِع على فحص سمات العناصر.



keys(object)



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



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


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



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



مثال على طريقتَي keys() وvalues()



monitor(function)



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


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



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



استخدِم unmonitor(function) لإيقاف المراقبة.



monitorEvents(object [, events])



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



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


monitorEvents(window, "resize");



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



يحدّد ما يلي مصفوفة لتتبُّع كلّ من حدثَي "تغيير الحجم" و "التمرير" في عنصر النافذة:


monitorEvents(window, ["resize", &quot;scroll"])



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



نوع الحدث والأحداث المرتبطة به
ماوس‫"mousedown" و"mouseup" و"click" و"dblclick" و"mousemove" و"mouseover" و"mouseout" و"mousewheel"
مفتاحkeydown وkeyup وkeypress وtextInput
لمس‫"touchstart" و"touchmove" و"touchend" و"touchcancel"
التحكم"resize" و"scroll" و"zoom" و"focus" و"blur" و"select" و"change" و"submit" و"reset"



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


monitorEvents($0, "key");



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



تتبُّع الأحداث الرئيسية



استخدِم unmonitorEvents(object[, events]) لإيقاف المراقبة.



profile([name]) وprofileEnd([name])



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





لبدء تحديد المواصفات، اتّبِع الخطوات التالية:


profile("Profile 1")



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


profileEnd("Profile 1")



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



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



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


profile('A');
profile('B');
profileEnd('A&#39;);
profileEnd('B');





queryObjects(Constructor)



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



    

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

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

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




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



table(data [, columns])



تسجيل بيانات العنصر في السجلّ بتنسيق جدول من خلال تمرير عنصر بيانات مع عناوين الأعمدة الاختيارية
هذا اختصار لـ 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)



يوقف unmonitor(function) عملية تتبُّع الوظيفة المحدّدة. يتم استخدام هذا الإجراء مع monitor(fn).


unmonitor(getData);



unmonitorEvents(object [, events])



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


unmonitorEvents(window);



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


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



values(object)



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


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

values(player);



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