تحتوي واجهة برمجة التطبيقات Console Uileities 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
الآن إلى العنصر الذي
تم اختياره حديثًا، بينما يعرض $1
العنصر المحدد مسبقًا:
$(selector [, startNode])
تعرض $(selector)
المرجع إلى عنصر DOM الأول باستخدام أداة اختيار لغة CSS المحدّدة. عند استدعاء هذه الدالة باستخدام وسيطة واحدة، تكون اختصارًا للدالة document.querySelector().
يعرض المثال التالي مرجعًا للعنصر <img>
الأول في المستند:
انقر بزر الماوس الأيمن على النتيجة المعروضة واختَر Reveal in Elements Panel (الكشف في لوحة العناصر) للعثور عليها في DOM، أو يمكنك الانتقال إلى عرض لعرضها على الصفحة.
يعرض المثال التالي مرجعًا إلى العنصر المحدّد حاليًا ويعرض خاصية src
الخاصة به:
تتوافق هذه الدالة أيضًا مع معلَمة ثانية، startNode
، تحدد "عنصر" أو "عقدة" يمكن البحث منها عن العناصر. القيمة التلقائية لهذه المَعلمة هي document
.
يعرض المثال التالي مرجعًا إلى أول عنصر img
تابع للعنصر devsite-header-background
، ويعرض السمة 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);
}
l10n-placeholder3() لإنشاء مصفوفة من جميع عناصر <img>
التي تظهر في المستند الحالي بعد العقدة المحددة:
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
console.log(each.src);
}
$x(path [, startNode])
تعرض الدالة $x(path)
صفيفًا من عناصر DOM التي تطابق تعبير XPath المحدّد.
على سبيل المثال، يؤدي ما يلي إلى عرض جميع عناصر <p>
في الصفحة:
$x("//p")
يعرض المثال التالي جميع عناصر <p>
التي تحتوي على عناصر <a>
:
$x("//p[a]")
على غرار دوال التحديد الأخرى، يتضمن $x(path)
معلَمة ثانية اختيارية،
startNode
، تحدد العنصر أو العقدة التي يتم البحث من خلالها عن عناصر.
مسح()
يمحو clear()
وحدة التحكّم من السجلّ.
clear();
نسخة(كائن)
ينسخ copy(object)
تمثيل سلسلة للعنصر المحدد إلى الحافظة.
copy($0);
debug(function)
عند استدعاء الدالة المحدّدة، يتم استدعاء برنامج تصحيح الأخطاء وينقطع داخل الدالة على لوحة المصادر، ما يسمح بالتنقل خلال الرمز وتصحيح الأخطاء فيه.
debug(getData);
يمكنك استخدام undebug(fn)
لإيقاف إيقاف الوظيفة أو استخدام واجهة المستخدم لإيقاف جميع نقاط الإيقاف.
ولمزيد من المعلومات عن نقاط الإيقاف، يُرجى الاطّلاع على إيقاف الرمز مؤقتًا باستخدام النقاط الفاصلة.
dir(object)
تعرض dir(object)
قائمة بنمط الكائن لكل خصائص الكائن المحددة. هذه الطريقة هي اختصار لطريقة console.dir()
الخاصة بواجهة Console API.
يوضح المثال التالي الفرق بين تقييم document.body
مباشرةً في سطر الأوامر، واستخدام dir()
لعرض العنصر نفسه:
document.body;
dir(document.body);
لمزيد من المعلومات، يُرجى الاطّلاع على إدخال console.dir()
في Console API.
dirxml(object)
يطبع dirxml(object)
تمثيل XML للعنصر المحدَّد، كما يظهر في لوحة العناصر.
هذه الطريقة مماثلة لطريقة console.dirxml()
.
inspect(object/function)
يفتح inspect(object/function)
ويحدد العنصر أو الكائن المحدّد في اللوحة المناسبة: إما لوحة العناصر لعناصر DOM أو لوحة الملفات الشخصية لكائنات كومة الذاكرة المؤقتة في JavaScript.
يفتح المثال التالي document.body
في لوحة العناصر:
inspect(document.body);
عند تمرير دالة لفحصها، تفتح الدالة المستند في لوحة Sources (المصادر) لتتمكن من فحصها.
getEventListeners(object)
تعرض getEventListeners(object)
أدوات معالجة الأحداث المسجَّلة في العنصر المحدَّد. وقيمة العرض هي كائن يحتوي على مصفوفة لكل نوع أحداث مسجَّل (على سبيل المثال، click
أو keydown
). أعضاء كل صفيف هي كائنات تصف المستمع المسجَّل لكل نوع. على سبيل المثال، يسرد ما يلي جميع أدوات معالجة الأحداث المسجَّلة في كائن المستند:
getEventListeners(document);
إذا تم تسجيل أكثر من مستمع واحد في العنصر المحدّد، تحتوي الصفيفة على عضو لكل مستمع. في المثال التالي، هناك أداتان مسجّلتان للأحداث المسجّلة في عنصر المستند لحدث click
:
يمكنك توسيع كل عنصر من هذه العناصر لاستكشاف خصائصه:
لمزيد من المعلومات، يُرجى الاطّلاع على فحص خصائص العنصر.
key(كائن)
تعرض keys(object)
صفيفًا يحتوي على أسماء الخصائص التي تنتمي إلى الكائن المحدد. للحصول على القيم المرتبطة بالسمات نفسها، استخدِم values()
.
على سبيل المثال، لنفترض أن تطبيقك قد عرّف الكائن التالي:
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
بافتراض أنّه تم تحديد player
في مساحة الاسم العامة (لتسهيل الأمر)، فإنّ كتابة keys(player)
وvalues(player)
في وحدة التحكم تؤدي إلى ما يلي:
monitor(function)
عند استدعاء الدالة المحددة، يتم تسجيل رسالة إلى وحدة التحكم تشير إلى اسم الدالة مع الوسيطات التي يتم تمريرها إلى الدالة عند استدعائها.
function sum(x, y) {
return x + y;
}
monitor(sum);
استخدِم unmonitor(function)
لإيقاف التتبُّع.
monitorEvents(object [, events])
عند وقوع أحد الأحداث المحدّدة في العنصر المحدّد، يتم تسجيل عنصر الحدث في وحدة التحكّم. ويمكنك تحديد حدث واحد لتتبُّعه، أو مصفوفة من الأحداث، أو أحد "أنواع" الأحداث العامة التي تم ربطها بمجموعة محدّدة مسبقًا من الأحداث. اطّلِع على الأمثلة أدناه.
ترصد ما يلي جميع أحداث تغيير الحجم في كائن النافذة.
monitorEvents(window, "resize");
يحدّد ما يلي صفيفًا لمراقبة كل من حدثَي "تغيير الحجم" و "التمرير" في كائن النافذة:
monitorEvents(window, ["resize", "scroll"])
يمكنك أيضًا تحديد أحد "أنواع" الأحداث المتاحة، وهي سلاسل يتم ربطها بمجموعات الأحداث المحدّدة مسبقًا. يسرد الجدول التالي أنواع الأحداث المتاحة وعمليات ربط الأحداث المرتبطة بها:
نوع الحدث والأحداث التي تم ربطها به | |
---|---|
فأر | "mousedown"، "mouseup"، "mouseup"، "click"، "dblclick"، "mousemove"، "mouseover"، "mouseout"، "mousewheel" |
مفتاح | "keydown"، "keyup"، "الضغط على مفتاح"، "textInput" |
لمس | "Touchstart"، "Touchmove"، "Touchend"، "Touchcancel" |
تحكم | "تغيير الحجم"، "التمرير"، "تكبير/تصغير"، "التركيز"، "تمويه"، "اختيار"، "تغيير"، "إرسال"، "إعادة ضبط" |
على سبيل المثال، يستخدم ما يلي نوع الحدث "مفتاح" جميع الأحداث الرئيسية المقابلة في حقل إدخال النص المحدد حاليًا في لوحة العناصر.
monitorEvents($0, "key");
في ما يلي نموذج للمخرجات بعد كتابة أحرف في حقل النص:
استخدِم unmonitorEvents(object[, events])
لإيقاف التتبُّع.
profile([name]) وprofileEnd([name])
يبدأ profile()
جلسة تحليل وحدة المعالجة المركزية (CPU) بلغة JavaScript باستخدام اسم اختياري. profileEnd()
يكمل الملف الشخصي ويعرض النتائج في الأداء > المسار الرئيسي.
لبدء إنشاء الملفات التعريفية:
profile("Profile 1")
لإيقاف تحديد المواصفات والاطّلاع على النتائج في الأداء > المقطع الصوتي الرئيسي:
profileEnd("Profile 1")
النتيجة في الأداء > المقطع الصوتي الرئيسي:
المقطع الصوتي الرئيسي." width="800" height="606">
يمكن أيضًا دمج الملفات الشخصية. على سبيل المثال، سيعمل هذا بأي ترتيب:
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 [, الأعمدة])
بيانات عناصر السجل بتنسيق الجدول من خلال تمرير كائن بيانات بعناوين أعمدة اختيارية.
هذا اختصار لـ console.table()
.
على سبيل المثال، لعرض قائمة بالأسماء باستخدام جدول في وحدة التحكم، ستقوم بما يلي:
let names = [
{ firstName: "John", lastName: "Smith" },
{ firstName: "Jane", lastName: "Doe" },
];
table(names);
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");
القيم(كائن)
تعرض values(object)
مصفوفة تحتوي على قيم جميع الخصائص التي تنتمي إلى الكائن المحدد.
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
values(player);