এই ইন্টারেক্টিভ টিউটোরিয়ালটি আপনাকে দেখাবে কিভাবে ক্রোম ডেভটুলস কনসোলে জাভাস্ক্রিপ্ট রান করতে হয়। কনসোলে মেসেজ লগ করার পদ্ধতি জানতে 'Get Started With Logging Messages' দেখুন। জাভাস্ক্রিপ্ট কোড পজ করে এক লাইন করে ধাপে ধাপে দেখার পদ্ধতি জানতে 'Get Started With Debugging JavaScript' দেখুন।
চিত্র ১। কনসোল ।
সংক্ষিপ্ত বিবরণ
কনসোলটি একটি REPL , যার পূর্ণরূপ হলো Read, Evaluate, Print, এবং Loop। এটি আপনার টাইপ করা জাভাস্ক্রিপ্ট পড়ে, আপনার কোড মূল্যায়ন করে, আপনার এক্সপ্রেশনের ফলাফল প্রিন্ট করে এবং তারপর লুপের মাধ্যমে প্রথম ধাপে ফিরে যায়।
ডেভটুলস সেট আপ করুন
এই টিউটোরিয়ালটি এমনভাবে তৈরি করা হয়েছে যাতে আপনি ডেমোটি খুলে সমস্ত ওয়ার্কফ্লো নিজে চেষ্টা করে দেখতে পারেন। যখন আপনি হাতে-কলমে অনুসরণ করবেন, তখন পরবর্তীতে ওয়ার্কফ্লোগুলো মনে রাখার সম্ভাবনা বেশি থাকবে।
এই পৃষ্ঠাতেই কনসোল খোলার জন্য Command+Option+J (Mac) অথবা Control+Shift+J (Windows, Linux, ChromeOS) চাপুন।
চিত্র ২। বামদিকে এই টিউটোরিয়ালটি এবং ডানদিকে ডেভটুলস।
পৃষ্ঠাটির জাভাস্ক্রিপ্ট বা DOM দেখুন এবং পরিবর্তন করুন
কোনো পৃষ্ঠা তৈরি বা ডিবাগ করার সময়, পৃষ্ঠাটির চেহারা বা চলার ধরণ পরিবর্তন করার জন্য কনসোলে স্টেটমেন্ট চালানো প্রায়শই দরকারি হয়।
নিচের বোতামটির লেখাটি লক্ষ্য করুন।
কনসোলে
document.getElementById('hello').textContent = 'Hello, Console!'টাইপ করুন এবং এক্সপ্রেশনটি মূল্যায়ন করতে এন্টার চাপুন। লক্ষ্য করুন, বাটনের ভেতরের লেখাটি কীভাবে পরিবর্তিত হয়।
চিত্র ৩। উপরের এক্সপ্রেশনটি মূল্যায়ন করার পর কনসোলটি কেমন দেখায়।
আপনি যে কোডটি ইভ্যালুয়েট করেছেন তার নিচে
"Hello, Console!"দেখতে পাচ্ছেন। REPL-এর ৪টি ধাপ মনে করুন: রিড (read), ইভ্যালুয়েট (evaluate), প্রিন্ট (print), লুপ (loop)। আপনার কোড ইভ্যালুয়েট করার পর, একটি REPL এক্সপ্রেশনটির ফলাফল প্রিন্ট করে। সুতরাং, `document.getElementById('hello').textContent = 'Hello, Console!'ইভ্যালুয়েট করার ফলাফল অবশ্যই"Hello, Console!"হবে।
পৃষ্ঠাটির সাথে সম্পর্কহীন যেকোনো জাভাস্ক্রিপ্ট চালান।
কখনও কখনও, আপনার এমন একটি কোড প্লেগ্রাউন্ড দরকার যেখানে আপনি কিছু কোড পরীক্ষা করতে পারেন, অথবা জাভাস্ক্রিপ্টের এমন নতুন ফিচারগুলো পরখ করে দেখতে পারেন যেগুলোর সাথে আপনি পরিচিত নন। এই ধরনের পরীক্ষা-নিরীক্ষার জন্য কনসোল একটি আদর্শ জায়গা।
- কনসোলে
5 + 15টাইপ করুন। আপনার এক্সপ্রেশনের নিচে ফলাফল20দেখা যাবে (যদি না আপনার এক্সপ্রেশনটি মূল্যায়ন করতে খুব বেশি সময় নেয়)। - এক্সপ্রেশনটি মূল্যায়ন করতে
Enterচাপুন। কনসোল আপনার কোডের নিচে এক্সপ্রেশনটির ফলাফল প্রিন্ট করবে। নিচের চিত্র ৪- এ দেখানো হয়েছে, এই এক্সপ্রেশনটি মূল্যায়ন করার পর আপনার কনসোলটি কেমন দেখাবে। নিচের কোডটি কনসোলে টাইপ করুন। এটি কপি-পেস্ট না করে, অক্ষর-এক করে টাইপ করার চেষ্টা করুন।
function add(a, b=20) { return a + b; }এখন, আপনি এইমাত্র যে ফাংশনটি সংজ্ঞায়িত করেছেন, সেটিকে কল করুন।
add(25);
চিত্র ৪। উপরের এক্সপ্রেশনগুলো মূল্যায়ন করার পর কনসোলটি কেমন দেখায়।
add(25)এর মান45হয়, কারণ যখনaddফাংশনটি দ্বিতীয় আর্গুমেন্ট ছাড়া কল করা হয়,bএর ডিফল্ট মান20হয়।
আপনার ফাংশনটি রিটার্ন না করা পর্যন্ত আপনি এই কনসোল সেশনে কোনো কোড চালাতে পারবেন না। যদি এতে খুব বেশি সময় লাগে, তবে আপনি টাস্ক ম্যানেজার ব্যবহার করে সময়সাপেক্ষ গণনাটি বাতিল করতে পারেন; তবে, এর ফলে বর্তমান পৃষ্ঠাটিও অকার্যকর হয়ে যাবে এবং আপনার প্রবেশ করানো সমস্ত ডেটা হারিয়ে যাবে।
পরবর্তী পদক্ষেপ
কনসোলে জাভাস্ক্রিপ্ট চালানোর সাথে সম্পর্কিত আরও বৈশিষ্ট্য জানতে 'Run JavaScript' দেখুন।
DevTools আপনাকে কোনো স্ক্রিপ্ট চলার মাঝপথে থামিয়ে দেওয়ার সুযোগ দেয়। থামানো অবস্থায়, আপনি কনসোল ব্যবহার করে সেই মুহূর্তের পেজের window বা DOM দেখতে ও পরিবর্তন করতে পারেন। এটি একটি শক্তিশালী ডিবাগিং কর্মপ্রবাহ তৈরি করে। একটি ইন্টারেক্টিভ টিউটোরিয়ালের জন্য "জাভাস্ক্রিপ্ট ডিবাগিং শুরু করুন" দেখুন।
কনসোল কিছু ফরম্যাট স্পেসিফায়ারও সমর্থন করে। কনসোল মেসেজ ফরম্যাট ও স্টাইল করার সমস্ত পদ্ধতি জানতে ‘কনসোলে মেসেজ ফরম্যাট ও স্টাইল করুন’ দেখুন।
তাছাড়া, কনসোলে কিছু সুবিধাজনক ফাংশনও রয়েছে যা কোনো পেজের সাথে মিথস্ক্রিয়া করা সহজ করে তোলে। উদাহরণস্বরূপ:
- কোনো এলিমেন্ট সিলেক্ট করার জন্য
document.querySelector()টাইপ করার পরিবর্তে, আপনি$()টাইপ করতে পারেন। এই সিনট্যাক্সটি jQuery থেকে অনুপ্রাণিত, কিন্তু এটি আসলে jQuery নয়। এটিdocument.querySelector()-এর একটি উপনাম মাত্র। -
debug(function)কার্যকরভাবে সেই ফাংশনের প্রথম লাইনে একটি ব্রেকপয়েন্ট সেট করে। -
keys(object)নির্দিষ্ট অবজেক্টের কীগুলো সম্বলিত একটি অ্যারে রিটার্ন করে।
সমস্ত সুবিধাজনক ফাংশনগুলো সম্পর্কে জানতে কনসোল ইউটিলিটিস এপিআই রেফারেন্স দেখুন।