مرجع Console Utilities API

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

«میانای برنامه‌سازی کاربردی ابزارهای کنسول» شامل مجموعه‌ای از توابع راحت برای انجام کارهای رایج است: انتخاب و بازرسی عناصر DOM، پُرسمان کردن اشیا، نمایش داده‌ها در قالب خوانا، توقف و شروع نمایه‌گر، پایش رویدادهای DOM و فراخوانی تابع، و غیره.

به‌دنبال console.log()، console.error()، و بقیه توابع console.* هستید؟ مرجع میانای برنامه‌سازی کاربردی کنسول را ببینید.

$_

‫$_ مقدار جدیدترین عبارت ارزیابی‌شده را برمی‌گرداند.

در مثال زیر، عبارت ساده‌ای (2 + 2) ارزیابی می‌شود. سپس خصوصیت $_ که حاوی همان مقدار است ارزیابی می‌شود:

‫$_ جدیدترین عبارت ارزیابی‌شده است.

در مثال بعدی، عبارت ارزیابی‌شده در ابتدا حاوی آرایه‌ای از نام‌ها است. با ارزیابی $_.length برای یافتن طول آرایه، مقدار ذخیره‌شده در $_ تغییر می‌کند تا به آخرین عبارت ارزیابی‌شده، یعنی ۴، تبدیل شود:

وقتی دستورات جدید ارزیابی می‌شوند، $_ تغییر می‌کند.

۰ تا ۴ دلار

دستورهای $0، $1، $2، $3، و $4 به‌عنوان مرجع تاریخی برای پنج عنصر DOM آخر (ازجمله شبه‌عناصر مانند ::before یا ::after) که در پانل عناصر بازرسی شده‌اند یا پنج شیء توده جاوااسکریپت آخر که در پانل «نمایه‌ها» انتخاب شده‌اند عمل می‌کنند. $0 عنصر یا شیء JavaScript را که اخیراً انتخاب شده است برمی‌گرداند، $1 دومین عنصر یا شیء JavaScript را که اخیراً انتخاب شده است برمی‌گرداند، و به همین ترتیب.

در مثال زیر، عنصر img در پانل عناصر انتخاب شده است. در کشوی کنسول، $0 ارزیابی شده است و همان عنصر را نمایش می‌دهد:

مثال: $0.

تصویر زیر عنصر دیگری را نشان می‌دهد که در همان صفحه انتخاب شده است. $0 اکنون به عنصر جدیداً انتخاب‌شده اشاره می‌کند، درحالی‌که $1 عنصر قبلاً انتخاب‌شده را برمی‌گرداند:

مثالی از ۱ دلار.

$(selector [, startNode])

‫$(selector) مرجع را به اولین عنصر DOM با انتخاب‌گر CSS مشخص‌شده برمی‌گرداند. وقتی با یک متغیر مستقل فراخوانده شود، این تابع میان‌بری برای تابع document.querySelector() است.

مثال زیر مرجعی را به اولین عنصر <img> در سند برمی‌گرداند:

مثال $('img').

روی نتیجه برگردانده‌شده کلیک راست کنید و نمایش در پانل عناصر را انتخاب کنید تا آن را در DOM پیدا کنید، یا پیمایش به نمای را انتخاب کنید تا آن را در صفحه نشان دهید.

مثال زیر ارجاعی به عنصر انتخاب‌شده کنونی برمی‌گرداند و ویژگی src آن را نمایش می‌دهد:

نمونه‌ای از $('img').src.

این تابع از پارامتر دوم، startNode، نیز پشتیبانی می‌کند که «عنصر» یا گره‌ای را مشخص می‌کند که عناصر از آن جستجو می‌شوند. مقدار پیش‌فرض این پارامتر document است.

مثال زیر مرجعی را به اولین عنصر img که از نوادگان devsite-header-background است برمی‌گرداند، و دارایی src آن را نمایش می‌دهد:

نمونه‌ای از $('img', 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();



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) عنصر یا شیء مشخص‌شده را در پانل مناسب باز و انتخاب می‌کند: پانل عناصر برای عناصر DOM یا پانل «نمایه‌ها» برای اشیاء پشته جاوا اسکریپت.



مثال زیر document.body را در پانل عناصر باز می‌کند:


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) در کنسول منجر به موارد زیر می‌شود:



نمونه‌ای از روش‌های()keys و()values.



پایشگر(تابع)



وقتی تابع مشخص‌شده فراخوانده می‌شود، پیامی در کنسول ثبت می‌شود که نشان‌دهنده
نام تابع به‌همراه متغیرهای مستقلی است که هنگام فراخوانی به تابع ارسال شده‌اند.


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"
میزان صدا"resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"



برای مثال، در زیر از نوع رویداد «کلید» برای همه رویدادهای کلیدی متناظر در فیلد نوشتاری ورودی که درحال‌حاضر در پانل عناصر انتخاب شده است استفاده می‌شود.


monitorEvents($0, "key");



در زیر نمونه برونداد پس‌از تایپ کردن نویسه‌ها در فیلد نوشتاری نشان داده شده است:



پایش رویدادهای کلیدی.



برای توقف پایش، از unmonitorEvents(object[, events]) استفاده کنید.



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



‫profile() جلسه تحلیل واحد پردازش مرکزی 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 [, columns])



با ارسال شیء داده با عنوان‌های ستون اختیاری، داده‌های شیء را با قالب‌بندی جدول ثبت کنید.
این میان‌بری برای console.table() است.



برای مثال، برای نمایش فهرستی از نام‌ها بااستفاده از جدول در کنسول، این کار را انجام می‌دهید:


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



نمونه‌ای از روش table()‎.



برای کپی کردن جدول ثبت‌شده در کلیپ‌بورد به‌عنوان جدول Markdown قالب‌بندی‌شده یا داده‌های CSV، روی جدول در Console (کنسول) کلیک راست کنید و گزینه کپی مربوطه را از منو زمینه‌ای انتخاب کنید.



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);



Result of values(player).