تحتوي واجهة برمجة التطبيقات 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
الآن إلى العنصر الذي تم اختياره حديثًا، بينما تعرض $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()
وحدة التحكّم من سجلّها.
clear();
Copy(object)
ينسخ copy(object)
تمثيل سلسلة للعنصر المحدَّد إلى الحافظة.
copy($0);
تصحيح(الوظيفة)
عند استدعاء الدالة المحددة، يتم استدعاء برنامج تصحيح الأخطاء وينقطع داخل الدالة في لوحة المصادر ما يسمح بالتنقل عبر الرمز وتصحيح الأخطاء.
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);
عند تمرير دالة لفحصها، تفتح الدالة المستند في لوحة المصادر لتتمكّن من فحصه.
getEventListeners(object)
تعرض الدالة getEventListeners(object)
أدوات معالجة الأحداث المسجَّلة في الكائن المحدّد. قيمة العرض هي عنصر يحتوي على مصفوفة لكل نوع حدث مسجَّل (click
أو keydown
، على سبيل المثال). أعضاء كل صفيفة هم كائنات تصف المستمع المسجَّل لكل نوع. على سبيل المثال، تسرد القوائم التالية جميع أدوات معالجة الأحداث المسجَّلة في كائن المستند:
getEventListeners(document);
إذا تم تسجيل أكثر من مستمع واحد في الكائن المحدد، فإن الصفيفة تحتوي على عضو لكل مستمع. في المثال التالي، هناك نوعان من أدوات معالجة الأحداث المسجّلين في
عنصر المستند لحدث click
:
يمكنك توسيع كل عنصر من هذه العناصر لاستكشاف خصائصها:
لمزيد من المعلومات، يُرجى الاطّلاع على فحص خصائص العناصر.
مفاتيح(كائن)
تعرض 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"])
ويمكنك أيضًا تحديد أحد "أنواع" الأحداث المتاحة، وهي سلاسل يتم تعيينها إلى مجموعات محدّدة مسبقًا من الأحداث. يسرد الجدول التالي أنواع الأحداث المتاحة وعمليات ربط الأحداث المرتبطة بها:
نوع الحدث والأحداث المرتبطة المقابلة | |
---|---|
فأر | "الماوس"، "الماوس"، "النقر"، "dblclick"، "الماوس"، "الماوس"، "الماوس"، "الماوس" |
مفتاح | "keydown"، "keyup"، "keypress"، "textInput" |
لمس | " touchstart"، " touchmove"، "Touchend"، "إلغاء اللمس" |
في مستوى الصوت | "تغيير الحجم"، "التمرير"، "تكبير"، "التركيز"، "تمويه"، "اختيار"، "تغيير"، "إرسال"، "إعادة ضبط" |
على سبيل المثال، يتم في ما يلي استخدام نوع الحدث "المفتاح" هو جميع الأحداث الرئيسية المقابلة في حقل نص إدخال مُختار حاليًا في لوحة العناصر.
monitorEvents($0, "key");
في ما يلي نموذج للمخرجات بعد كتابة أحرف في حقل النص:
يمكنك استخدام unmonitorEvents(object[, events])
لإيقاف التتبُّع.
الملف الشخصي([name]) وprofileEnd([name])
يبدأ profile()
جلسة تحليل وحدة المعالجة المركزية (CPU) بلغة JavaScript باستخدام اسم اختياري. profileEnd()
يُكمل الملف الشخصي ويعرض النتائج في الأداء > الأغنية الرئيسية.
لبدء إنشاء الملفات التعريفية:
profile("Profile 1")
لإيقاف إنشاء الملفات التعريفية والاطّلاع على النتائج في الأداء > المسار الرئيسي:
profileEnd("Profile 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);
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);