Console Utilities API রেফারেন্স

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

Console Utilities API-তে সাধারণ টাস্ক পারফর্ম করার জন্য কনভেনিয়েন্স ফাংশনের একটি সংগ্রহ থাকে: DOM এলিমেন্ট বেছে নেওয়া ও পরিদর্শন করা, কোয়েরি অবজেক্ট, রিডেবল ফর্ম্যাটে ডেটা দেখানো, প্রোফাইলার বন্ধ ও চালু করা, DOM ইভেন্ট ও ফাংশন কল মনিটর করা এবং আরও অনেক কিছু।

console.log(), console.error() এবং বাকি console.*টি ফাংশন খুঁজছেন? Console API রেফারেন্স দেখুন।

$_

$_ সবচেয়ে সম্প্রতি মূল্যায়ন করা এক্সপ্রেশনের মান দেখায়।

নিম্নলিখিত উদাহরণে, একটি সাধারণ এক্সপ্রেশন (2 + 2) মূল্যায়ন করা হয়েছে। তারপর $_ প্রপার্টি মূল্যায়ন করা হয়, যার মধ্যে একই ভ্যালু থাকে:

$_ হল সবচেয়ে সাম্প্রতিক মূল্যায়ন করা এক্সপ্রেশন।

পরবর্তী উদাহরণে, মূল্যায়ন করা এক্সপ্রেশনে প্রাথমিকভাবে নামের একটি অ্যারে রয়েছে। অ্যারের দৈর্ঘ্য খুঁজে পেতে $_.length মূল্যায়ন করা হচ্ছে, $_-এ সেভ করা ভ্যালু পরিবর্তিত হয়ে লেটেস্ট মূল্যায়িত এক্সপ্রেশন, ৪ হয়ে যায়:

নতুন কমান্ড মূল্যায়ন করা হলে $_ পরিবর্তন হয়।

$০ - $৪

$0, $1, $2, $3 এবং $4 কমান্ডগুলি এলিমেন্ট প্যানেলের মধ্যে পরিদর্শন করা শেষ পাঁচটি DOM এলিমেন্টের (::before বা ::after-এর মতো ছদ্ম-এলিমেন্ট সহ) বা প্রোফাইল প্যানেলে নির্বাচিত শেষ পাঁচটি জাভাস্ক্রিপ্ট হিপ অবজেক্টের ঐতিহাসিক রেফারেন্স হিসাবে কাজ করে। $0 সবচেয়ে সম্প্রতি বেছে নেওয়া এলিমেন্ট বা JavaScript অবজেক্ট রিটার্ন করে, $1 দ্বিতীয় সবচেয়ে সম্প্রতি বেছে নেওয়া এলিমেন্ট বা JavaScript অবজেক্ট রিটার্ন করে এবং এইভাবে চলতে থাকে।

নিচের উদাহরণে, এলিমেন্ট প্যানেলে একটি img এলিমেন্ট বেছে নেওয়া হয়েছে। কনসোল ড্রয়ারে, $0 মূল্যায়ন করা হয়েছে এবং একই এলিমেন্ট দেখাচ্ছে:

$0-এর উদাহরণ।

নিচের ছবিতে একই পৃষ্ঠায় বেছে নেওয়া অন্য একটি এলিমেন্ট দেখানো হয়েছে। $0 এখন নতুন বেছে নেওয়া এলিমেন্টকে বোঝায়, অন্যদিকে $1 আগে বেছে নেওয়া এলিমেন্টকে বোঝায়:

$১-এর উদাহরণ।

$(selector [, startNode])

$(selector) নির্দিষ্ট CSS বাছাইকারী সহ প্রথম DOM এলিমেন্টের রেফারেন্স রিটার্ন করে। একটি আর্গুমেন্ট সহ কল করা হলে, এই ফাংশনটি 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);
}
 ব্যবহার করা হয়েছে

বেছে নেওয়া নোডের পরে বর্তমান ডকুমেন্টে
দেখা যায় এমন সব <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) প্রদত্ত XPath এক্সপ্রেশনের সাথে ম্যাচ করে এমন DOM এলিমেন্টের একটি অ্যারে রিটার্ন করে।



যেমন, নিম্নলিখিত কোডটি পৃষ্ঠার সব <p> এলিমেন্ট ফিরিয়ে দেয়:


$x("//p")



XPath সিলেক্টর ব্যবহার করার উদাহরণ।



নিচের উদাহরণটি সেইসব <p> এলিমেন্ট রিটার্ন করে যেগুলিতে <a> এলিমেন্ট আছে:


$x("//p[a]")



আরও জটিল XPath সিলেক্টর ব্যবহারের উদাহরণ।



অন্যান্য বাছাইকারী ফাংশনের মতো, $x(path)-এর একটি ঐচ্ছিক দ্বিতীয় প্যারামিটার, startNode আছে,
যা এমন একটি এলিমেন্ট বা নোড নির্দিষ্ট করে যেখান থেকে এলিমেন্ট সার্চ করতে হবে।



startNode-এর সাথে XPath নির্বাচক ব্যবহারের উদাহরণ।



clear()



clear() কনসোলের ইতিহাস মুছে দেয়।


clear();



copy(object)



copy(object) নির্দিষ্ট অবজেক্টের স্ট্রিং উপস্থাপনা ক্লিপবোর্ডে কপি করে।


copy($0);



debug(function)



নির্দিষ্ট ফাংশন কল করা হলে, ডিবাগার চালু হয় এবং
Sources প্যানেলে ফাংশনের মধ্যে ব্রেক করে, যার ফলে কোড ধাপে ধাপে দেখা এবং ডিবাগ করা যায়।


debug(getData);



debug() ব্যবহার করে ফাংশনের মধ্যে ব্রেকিং।



ফাংশনে ব্রেকিং বন্ধ করতে undebug(fn) ব্যবহার করুন অথবা সব ব্রেকপয়েন্ট বন্ধ করতে UI ব্যবহার করুন।



ব্রেকপয়েন্ট সম্পর্কে আরও তথ্যের জন্য, ব্রেকপয়েন্ট ব্যবহার করে আপনার কোড পজ করুন নিবন্ধটি দেখুন।



dir(object)



dir(object) নির্দিষ্ট করা সব অবজেক্টের প্রপার্টির অবজেক্ট-স্টাইল তালিকা দেখায়। এই পদ্ধতি
Console API-এর console.dir() পদ্ধতির শর্টকাট।



নিচের উদাহরণে, কমান্ড লাইনে document.body সরাসরি মূল্যায়ন করা এবং একই এলিমেন্ট দেখানোর জন্য dir() ব্যবহার করার মধ্যে পার্থক্য দেখানো হয়েছে:


document.body;
dir(document.body);



dir() ফাংশন সহ এবং ছাড়া document.body লগ করা।



আরও তথ্যের জন্য, Console API-তে console.dir() এন্ট্রি দেখুন।



dirxml(object)



dirxml(object) Elements প্যানেলে দেখানো নির্দিষ্ট করা অবজেক্টের 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) নির্দিষ্ট অবজেক্টের প্রপার্টির নাম সহ অ্যারে রিটার্ন করে। একই প্রপার্টির সংশ্লিষ্ট ভ্যালু পেতে, values() ব্যবহার করুন।



যেমন, ধরুন আপনার অ্যাপ্লিকেশন নিম্নলিখিত অবজেক্টটি সংজ্ঞায়িত করেছে:


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



player গ্লোবাল নেমস্পেসে (সহজ করার জন্য) সংজ্ঞায়িত করা হয়েছে ধরে নিয়ে, Console-এ 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"



যেমন, নিম্নলিখিত উদাহরণে "key" ইভেন্ট টাইপ ব্যবহার করা হয়েছে। এর মাধ্যমে Elements প্যানেলে বর্তমানে বেছে নেওয়া ইনপুট টেক্সট
ফিল্ডে সংশ্লিষ্ট সব কী ইভেন্ট দেখানো হয়।


monitorEvents($0, "key");



টেক্সট ফিল্ডে অক্ষর টাইপ করার পরে স্যাম্পেল আউটপুট নিচে দেওয়া হল:



গুরুত্বপূর্ণ ইভেন্ট মনিটর করা হচ্ছে।



মনিটর করা বন্ধ করতে unmonitorEvents(object[, events]) ব্যবহার করুন।



profile([name]) এবং profileEnd([name])



profile() ঐচ্ছিক নাম সহ জাভাস্ক্রিপ্ট সিপিইউ প্রোফাইলিং সেশন শুরু করে। 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 ডেটা হিসেবে আপনার ক্লিপবোর্ডে কপি করতে, কনসোলে টেবিলের উপরে মাউসে ডানদিকের বোতামে ক্লিক করুন এবং সংশ্লিষ্ট মেনু থেকে কপি করার বিকল্প বেছে নিন।



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



ভ্যালুর ফলাফল(প্লেয়ার)।