مرجع واجهة برمجة تطبيقات 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 تم فحصها في لوحة العناصر أو آخر خمسة عناصر في حِزمة 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 في المستند وعرض مصادرها





$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(العنصر/الدالة)



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



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


inspect(document.body);



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



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



getEventListeners(object)



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


getEventListeners(document);



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



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



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



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



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



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



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



تعرض 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", "scroll"])



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



نوع الحدث والأحداث المرتبطة به
ماوس"mousedown" و"mouseup" و"click" و"dblclick" و"mousemove" و"mouseover" و"mouseout" و"mousewheel"
مفتاح"keydown" و"keyup" و"keypress" و"textInput"
لمس"Touchstart" و"Touchmove" و"Touchend" و"Touchcancel"
التحكم"تغيير الحجم"، "التمرير"، "تكبير"، "التركيز"، "تمويه"، "اختيار"، "تغيير"، "إرسال"، "إعادة ضبط"



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


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)



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


unmonitor(getData);



unmonitorEvents(object [, events])



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


unmonitorEvents(window);



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


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



values(object)



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


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

values(player);



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