এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

কনসোল ইউটিলিটি API রেফারেন্স

Kayce Basques

Sofia Emelianova

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

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

$_

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

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

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

পরবর্তী উদাহরণে, মূল্যায়ন করা এক্সপ্রেশনটিতে প্রথমে নামের একটি অ্যারে থাকে। অ্যারের দৈর্ঘ্য বের করার জন্য $_.length মূল্যায়ন করলে, $_ তে সংরক্ষিত মানটি সর্বশেষ মূল্যায়ন করা এক্সপ্রেশনে পরিণত হয়, 4:

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

$০ - $৪

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

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

$0 এর উদাহরণ।

নিচের ছবিতে একই পৃষ্ঠায় নির্বাচিত একটি ভিন্ন উপাদান দেখানো হয়েছে। $0 এখন নতুন নির্বাচিত উপাদানকে বোঝায়, যেখানে $1 পূর্বে নির্বাচিত উপাদানটিকে ফেরত দেয়:

$1 এর উদাহরণ।

$(নির্বাচক [, স্টার্টনোড])

$(selector) নির্দিষ্ট CSS নির্বাচকের সাথে প্রথম DOM উপাদানের রেফারেন্স ফেরত দেয়। যখন একটি আর্গুমেন্ট দিয়ে কল করা হয়, তখন এই ফাংশনটি document.querySelector() ফাংশনের জন্য একটি শর্টকাট।

নিচের উদাহরণটি ডকুমেন্টের প্রথম <img> এলিমেন্টের রেফারেন্স প্রদান করে:

$('img') এর উদাহরণ।

ফিরে আসা ফলাফলের উপর ডান-ক্লিক করুন এবং DOM-এ এটি খুঁজে পেতে Elements Panel-এ Reveal নির্বাচন করুন, অথবা পৃষ্ঠায় এটি দেখানোর জন্য View-এ স্ক্রোল করুন ।

নিম্নলিখিত উদাহরণটি বর্তমানে নির্বাচিত উপাদানের একটি রেফারেন্স প্রদান করে এবং এর src বৈশিষ্ট্য প্রদর্শন করে:

$('img').src এর উদাহরণ।

এই ফাংশনটি দ্বিতীয় একটি প্যারামিটার, startNode , সমর্থন করে যা একটি 'উপাদান' বা নোড নির্দিষ্ট করে যেখান থেকে উপাদানগুলি অনুসন্ধান করা হবে। এই প্যারামিটারের ডিফল্ট মান হল document ।

নিচের উদাহরণটি devsite-header-background এর বংশধর প্রথম img উপাদানের একটি রেফারেন্স প্রদান করে এবং এর src বৈশিষ্ট্য প্রদর্শন করে:

$('img', div).src এর উদাহরণ।

দ্রষ্টব্য: যদি আপনি jQuery এর মতো একটি লাইব্রেরি ব্যবহার করেন যা $ ব্যবহার করে, তাহলে এই কার্যকারিতাটি ওভাররাইট করা হবে এবং $ সেই লাইব্রেরির বাস্তবায়নের সাথে সঙ্গতিপূর্ণ হবে।

$$(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 ); }  <img> উপাদান যা নির্বাচিত নোডের পরে বর্তমান ডকুমেন্টে প্রদর্শিত হয়:
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}
 দ্রষ্টব্য: স্ক্রিপ্টটি কার্যকর না করেই একটি নতুন লাইন শুরু করতে কনসোলে Shift + Enter টিপুন।
 $x(পথ [, স্টার্টনোড])
 $x(path) প্রদত্ত XPath এক্সপ্রেশনের সাথে মেলে এমন DOM উপাদানের একটি অ্যারে প্রদান করে।
 উদাহরণস্বরূপ, নিম্নলিখিতটি পৃষ্ঠার সমস্ত <p> উপাদানগুলি ফেরত দেয়:
$x("//p")
 নিচের উদাহরণটি <a> উপাদান ধারণকারী সকল <p> উপাদান প্রদান করে:
$x("//p[a]")
 অন্যান্য নির্বাচক ফাংশনের মতো, $x(path) এর একটি ঐচ্ছিক দ্বিতীয় প্যারামিটার আছে, startNode , যা একটি উপাদান বা নোড নির্দিষ্ট করে যেখান থেকে উপাদানগুলি অনুসন্ধান করা হবে। 
 পরিষ্কার ()
 clear() কনসোলের ইতিহাস মুছে ফেলে।
clear();
 কপি(বস্তু)
 copy(object) নির্দিষ্ট বস্তুর একটি স্ট্রিং উপস্থাপনা ক্লিপবোর্ডে কপি করে।
copy($0);
 ডিবাগ(ফাংশন)
 যখন নির্দিষ্ট ফাংশনটি কল করা হয়, তখন ডিবাগারটি আহ্বান করা হয় এবং সোর্স প্যানেলে ফাংশনের ভিতরে ব্রেক করে কোডটি পরীক্ষা করে ডিবাগ করার অনুমতি দেয়।
debug(getData);
 ফাংশনটি ব্রেক করা বন্ধ করতে undebug(fn) ব্যবহার করুন, অথবা সমস্ত ব্রেকপয়েন্ট অক্ষম করতে UI ব্যবহার করুন।
 ব্রেকপয়েন্ট সম্পর্কে আরও তথ্যের জন্য, "বিরতি দিন" দেখুন।
 dir(বস্তু)
 dir(object) নির্দিষ্ট সমস্ত বস্তুর বৈশিষ্ট্যের একটি অবজেক্ট-স্টাইল তালিকা প্রদর্শন করে। এই পদ্ধতিটি কনসোল API এর console.dir() পদ্ধতির জন্য একটি শর্টকাট।
 নিচের উদাহরণটি কমান্ড লাইনে সরাসরি document.body মূল্যায়ন এবং একই উপাদান প্রদর্শনের জন্য dir() ব্যবহারের মধ্যে পার্থক্য দেখায়: 
document.body;
dir(document.body);
 আরও তথ্যের জন্য, কনসোল API-তে console.dir() এন্ট্রিটি দেখুন।
 dirxml(অবজেক্ট)
 dirxml(object) নির্দিষ্ট বস্তুর একটি XML উপস্থাপনা প্রিন্ট করে, যেমনটি Elements প্যানেলে দেখা যায়। এই পদ্ধতিটি console.dirxml() পদ্ধতির সমতুল্য।
 পরিদর্শন (বস্তু/কার্য)
 inspect(object/function) উপযুক্ত প্যানেলে নির্দিষ্ট উপাদান বা বস্তুটি খোলে এবং নির্বাচন করে: হয় DOM উপাদানগুলির জন্য Elements প্যানেল অথবা JavaScript হিপ বস্তুর জন্য Profiles প্যানেল।
 নিচের উদাহরণটি এলিমেন্টস প্যানেলে document.body খোলে: 
inspect(document.body);
 কোনও ফাংশন পরিদর্শনের জন্য পাস করার সময়, ফাংশনটি আপনার পরিদর্শনের জন্য সোর্স প্যানেলে ডকুমেন্টটি খুলে দেয়।
 getEventListeners(বস্তু)
 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) টাইপ করলে নিম্নলিখিত ফলাফল পাওয়া যাবে: 
 মনিটর (ফাংশন)
 যখন নির্দিষ্ট ফাংশনটি কল করা হয়, তখন কনসোলে একটি বার্তা লগ করা হয় যা ফাংশনের নাম এবং ফাংশনটি কল করার সময় পাস করা আর্গুমেন্টগুলি নির্দেশ করে। 
function sum(x, y) {
  return x + y;
}
monitor(sum);
 পর্যবেক্ষণ বন্ধ করতে unmonitor(function) ব্যবহার করুন।
 মনিটরইভেন্টস(বস্তু [, ইভেন্ট])
 যখন নির্দিষ্ট কোনও ইভেন্ট নির্দিষ্ট বস্তুতে ঘটে, তখন ইভেন্ট অবজেক্টটি কনসোলে লগ করা হয়। আপনি পর্যবেক্ষণের জন্য একটি একক ইভেন্ট, ইভেন্টের একটি অ্যারে, অথবা ইভেন্টের একটি পূর্বনির্ধারিত সংগ্রহে ম্যাপ করা জেনেরিক ইভেন্ট "টাইপ"গুলির একটি নির্দিষ্ট করতে পারেন। নীচের উদাহরণগুলি দেখুন।
 নিম্নলিখিতটি উইন্ডো অবজেক্টের সমস্ত আকার পরিবর্তন ইভেন্ট পর্যবেক্ষণ করে। 
monitorEvents(window, "resize");
 উইন্ডো অবজেক্টে "রিসাইজ" এবং "স্ক্রল" উভয় ইভেন্ট পর্যবেক্ষণ করার জন্য একটি অ্যারে নিম্নলিখিতভাবে সংজ্ঞায়িত করা হয়েছে: 
monitorEvents(window, ["resize", &quot;scroll"])
আপনি উপলব্ধ ইভেন্ট "টাইপ"গুলির মধ্যে একটি নির্দিষ্ট করতে পারেন, স্ট্রিং যা পূর্বনির্ধারিত ইভেন্ট সেটগুলিতে ম্যাপ করে। নীচের টেবিলে উপলব্ধ ইভেন্টের ধরণ এবং তাদের সাথে সম্পর্কিত ইভেন্ট ম্যাপিং তালিকাভুক্ত করা হয়েছে:
 ইভেন্টের ধরণ এবং সংশ্লিষ্ট ম্যাপ করা ইভেন্ট
 ইঁদুর  "মাউসডাউন", "মাউসআপ", "ক্লিক", "ডিবিএলক্লিক", "মাউসমোভ", "মাউসওভার", "মাউসআউট", "মাউসহুইল"
 চাবি  "কীডাউন", "কীআপ", "কীপ্রেস", "টেক্সটইনপুট"
 স্পর্শ  "টাচস্টার্ট", "টাচমুভ", "টাচএন্ড", "টাচক্যান্সেল"
 নিয়ন্ত্রণ  "আকার পরিবর্তন করুন", "স্ক্রোল করুন", "জুম করুন", "ফোকাস করুন", "অস্পষ্ট করুন", "নির্বাচন করুন", "পরিবর্তন করুন", "জমা দিন", "রিসেট করুন"
 উদাহরণস্বরূপ, নিম্নলিখিতটি "key" ইভেন্ট টাইপ ব্যবহার করে, যা বর্তমানে Elements প্যানেলে নির্বাচিত একটি ইনপুট টেক্সট ফিল্ডে সমস্ত সংশ্লিষ্ট কী ইভেন্টের জন্য প্রযোজ্য। 
monitorEvents($0, "key");
টেক্সট ফিল্ডে একটি অক্ষর টাইপ করার পরে নমুনা আউটপুট নীচে দেওয়া হল: 
 পর্যবেক্ষণ বন্ধ করতে unmonitorEvents(object[, events]) ব্যবহার করুন।
 প্রোফাইল([নাম]) এবং প্রোফাইলএন্ড([নাম])
 profile() একটি ঐচ্ছিক নাম দিয়ে একটি জাভাস্ক্রিপ্ট CPU প্রোফাইলিং সেশন শুরু করে। profileEnd() প্রোফাইলটি সম্পূর্ণ করে এবং Performance > Main ট্র্যাকে ফলাফল প্রদর্শন করে।
 দ্রষ্টব্য: profile() এবং profileEnd() হল console.profile() এবং console.profileEnd() এর সংক্ষিপ্ত রূপ।
 প্রোফাইলিং শুরু করতে: 
profile("Profile 1")
প্রোফাইলিং বন্ধ করতে এবং পারফরম্যান্স > মেইন ট্র্যাকে ফলাফল দেখতে: 
profileEnd("Profile 1")
পারফরম্যান্স > মূল ট্র্যাকের ফলাফল: 
 প্রোফাইলগুলি নেস্টেডও করা যেতে পারে। উদাহরণস্বরূপ, এটি যেকোনো ক্রমে কাজ করবে: 
profile('A');
profile('B');
profileEnd('A&#39;);
profileEnd('B');
 দ্রষ্টব্য: একাধিক CPU প্রোফাইল একসাথে কাজ করতে পারে এবং আপনাকে তৈরির ক্রমে সেগুলি বন্ধ করার প্রয়োজন নেই।
 কোয়েরি অবজেক্টস (কনস্ট্রাক্টর)
 নির্দিষ্ট কনস্ট্রাক্টর দিয়ে তৈরি বস্তুর একটি অ্যারে ফেরত দিতে কনসোল থেকে queryObjects(Constructor) কল করুন। উদাহরণস্বরূপ:
 queryObjects(Promise) । Promise এর সকল উদাহরণ প্রদান করে।
 queryObjects(HTMLElement) । সকল HTML উপাদান ফেরত পাঠায়।
 queryObjects(foo) , যেখানে foo একটি ক্লাসের নাম। new foo() এর মাধ্যমে ইনস্ট্যান্টিয়েট করা সমস্ত অবজেক্ট ফেরত দেয়।
 queryObjects() এর সুযোগ হল কনসোলে বর্তমানে নির্বাচিত এক্সিকিউশন প্রসঙ্গ।
 টেবিল (তথ্য [, কলাম])
 ঐচ্ছিক কলাম শিরোনাম সহ একটি ডেটা অবজেক্ট পাস করে টেবিল ফর্ম্যাটিং সহ অবজেক্ট ডেটা লগ করুন। এটি console.table() জন্য একটি শর্টকাট।
 উদাহরণস্বরূপ, কনসোলে একটি টেবিল ব্যবহার করে নামের তালিকা প্রদর্শন করতে, আপনাকে যা করতে হবে: 
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);
 আনডিবাগ(ফাংশন)
 undebug(function) নির্দিষ্ট ফাংশনের ডিবাগিং বন্ধ করে দেয় যাতে ফাংশনটি কল করার সময়, ডিবাগারটি আর আহ্বান করা না হয়। এটি debug(fn) সাথে একত্রে ব্যবহৃত হয়। 
undebug(getData);
 আনমনিটর(ফাংশন)
 unmonitor(function) নির্দিষ্ট ফাংশনের পর্যবেক্ষণ বন্ধ করে দেয়। এটি monitor(fn) সাথে একত্রে ব্যবহৃত হয়। 
unmonitor(getData);
 আনমনিটরইভেন্টস(অবজেক্ট [, ইভেন্ট])
 unmonitorEvents(object[, events]) নির্দিষ্ট অবজেক্ট এবং ইভেন্টের জন্য ইভেন্ট পর্যবেক্ষণ বন্ধ করে দেয়। উদাহরণস্বরূপ, নিম্নলিখিতটি উইন্ডো অবজেক্টের সমস্ত ইভেন্ট পর্যবেক্ষণ বন্ধ করে দেয়: 
unmonitorEvents(window);
আপনি কোনও বস্তুর উপর নির্দিষ্ট ইভেন্টগুলি পর্যবেক্ষণ করাও বেছে বেছে বন্ধ করতে পারেন। উদাহরণস্বরূপ, নিম্নলিখিত কোডটি বর্তমানে নির্বাচিত উপাদানের সমস্ত মাউস ইভেন্টগুলি পর্যবেক্ষণ করা শুরু করে এবং তারপর "mousemove" ইভেন্টগুলি পর্যবেক্ষণ করা বন্ধ করে দেয় (সম্ভবত কনসোল আউটপুটে শব্দ কমাতে): 
monitorEvents($0, "mouse");
unmonitorEvents($0, &quot;mousemove");
 মান (বস্তু)
 values(object) নির্দিষ্ট বস্তুর সাথে সম্পর্কিত সমস্ত বৈশিষ্ট্যের মান ধারণকারী একটি অ্যারে প্রদান করে। 
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);

ইভেন্টের ধরণ এবং সংশ্লিষ্ট ম্যাপ করা ইভেন্ট
ইঁদুর	"মাউসডাউন", "মাউসআপ", "ক্লিক", "ডিবিএলক্লিক", "মাউসমোভ", "মাউসওভার", "মাউসআউট", "মাউসহুইল"
চাবি	"কীডাউন", "কীআপ", "কীপ্রেস", "টেক্সটইনপুট"
স্পর্শ	"টাচস্টার্ট", "টাচমুভ", "টাচএন্ড", "টাচক্যান্সেল"
নিয়ন্ত্রণ	"আকার পরিবর্তন করুন", "স্ক্রোল করুন", "জুম করুন", "ফোকাস করুন", "অস্পষ্ট করুন", "নির্বাচন করুন", "পরিবর্তন করুন", "জমা দিন", "রিসেট করুন"