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