দেবু কাকার Dev টুল
শুধু ওয়েবসাইট দেখার জন্য না; বরং ওয়েবসাইটের কোনো সমস্যা হলে সেটা চেক করার জন্যও কিন্তু ব্রাউজার ব্যবহার করতে হয়। কোনো একটা ব্রাউজারে রাইট ক্লিক করলে inspect একটা অপশন দেখায়, সেটাতে ক্লিক করলে ব্রাউজারের ভিতরে আলাদা একটা গোপন জগৎ খুলে আসবে তোর সামনে।
ডেভেলপার টুলস (Developer Tools) ব্রাউজার বা ওয়েব অ্যাপ্লিকেশনের জন্য অত্যন্ত গুরুত্বপূর্ণ একটি টুল, যা ডেভেলপারদের কোড, নেটওয়ার্ক রিসোর্স এবং অন্যান্য চেক করাতে কাজে লাগে।
মেজর ট্যাবসমূহ
১. Elements (এলিমেন্টস ট্যাব)
এই ট্যাবের মাধ্যমে HTML এবং CSS কীভাবে ওয়েবপেজে রেন্ডার হচ্ছে, তা দেখা যায়। HTML এলিমেন্টগুলো রিয়েল-টাইমে দেখতে পাবি, এডিট করতে পাবি, ওয়েবসাইটের ডিজাইন বা লেআউট চেইঞ্জ করে দেখতে পাবি। CSS কোড এখানে সরাসরি এডিট করতে পারবি। HTML এলিমেন্টের গঠন এবং স্ট্রাকচার দেখতে পারবি।
২. Console (কনসোল ট্যাব)
কনসোল হলো একটি ইন্টারেক্টিভ টার্মিনাল, যেখানে জাভাস্ক্রিপ্ট কোড লিখে আউটপুট দেখতে পাবি। আবার সেটার কী এফেক্ট হবে, সেটাও দেখতে পাবি। এ ছাড়াও কোনো কিছু কাজ না করলে প্রথম কাজ হয় কনসোলে এসে জাভাস্ক্রিপ্ট কোনো errors বা ওয়ার্নিং ম্যাসেজ দিচ্ছে কি না, সেটা দেখা। এ ছাড়াও জাভাস্ক্রিপ্ট কোড ডিবাগ করার সময় আউটপুট দেখার জন্য খুবই কাজে লাগে।
৩. Sources (সোর্স ট্যাব)
মূলত ওয়েবসাইটের সকল সোর্স ফাইল দেখার জন্য সোর্স ট্যাব ব্যবহৃত হয়। এই ট্যাব থেকে ডেভেলপাররা ওয়েবসাইটের জাভাস্ক্রিপ্ট ফাইল, ইমেজ এবং অন্যান্য সোর্স ফাইল দেখতে এবং ডিবাগ করতে পারে। ব্রেকপয়েন্ট তৈরি করে জাভাস্ক্রিপ্ট কোড ডিবাগ করতে পারে। স্টেপ-বাই-স্টেপ কোড এক্সিকিউশন করে চেক করতে পারে।
৪. Network (নেটওয়ার্ক ট্যাব)
নেটওয়ার্ক ট্যাব ওয়েবপেজের সমস্ত নেটওয়ার্ক অনুরোধ (HTTP, XHR, Fetch) দেখা এবং এনালাইসিস করার জন্য ব্যবহৃত হয়। এই ট্যাব ডেভেলপারদের ওয়েবপেজ লোড হওয়ার সময় কোন রিসোর্স কতটুকু সময় নিচ্ছে, তা চেক করতে সাহায্য করে। এ ছাড়া সার্ভার থেকে ডাউনলোড করা রিসোর্স ফাইল এবং তাদের সাইজ দেখার জন্য এই ট্যাব ইউজ করা হয়।
৫. Performance (পারফরমেন্স ট্যাব)
নাম দেখেই বুঝা যায়, ওয়েবপেজের পারফরম্যান্স এনালাইসিস করার জন্য পারফরম্যান্স ট্যাবটি ব্যবহৃত হয়। এটি দেখায়, কোন অংশে ওয়েবপেজ স্লো হয়ে গেছে এবং সেটাকে ফাস্ট করার জন্য কী কী করা যেতে পারে। CPU ও মেমরি কতটুকু ইউজ করতেছে, সেগুলা কীভাবে পারফরম্যান্স অপটিমাইজ করা যায়, তা এই ট্যাবে করা হয়।
৬. Application (অ্যাপ্লিকেশন ট্যাব)
অ্যাপ্লিকেশন ট্যাব ওয়েবপেজে স্টোরেজ-সংক্রান্ত তথ্য দেখা এবং ম্যানেজ করার জন্য ব্যবহৃত হয়। এর মাধ্যমে কুকিজ, লোকাল স্টোরেজ, IndexedDB ইত্যাদি ডেটা চেক করতে পারবি।
আমি জাস্ট সিম্পলভাবে কয়েকটা জিনিস বলেছি। তুই কাজ করতে করতে ডেভেলপার টুলস ইউজ করার পরিমাণ বাড়বে এবং এই বিষয়ে যত দক্ষ হবি, তুই তত ভালো ডেভেলপার হয়ে যাবি।
Web API ব্রাউজার API
Web API হলো কিছু ফাংশনালিটি, যেগুলা ওয়েব ডেভেলপমেন্টের অংশ হিসেবে দেয়া হয়। এদের কিছু ফাংশনালিটি শুধু ব্রাউজারে কাজ করে, সেগুলাকে ব্রাউজার API বলা হয়। তবে সাধারণভাবে সবগুলাকে web api বলে। আমি নিচে কয়েকটা গুরুত্বপূর্ণ ওয়েব API বলে দিচ্ছি। যেগুলার অনেক কিছুই তুই আগে থেকে জানস।
DOM (Document Object Model)
পুরা HTML ডকুমেন্টকে একটি অবজেক্টের আকারে নিয়ে আসে DOM। সাথে স্টাইল চেইঞ্জ করার অপশনও নিয়ে আসে DOM-এর মাধ্যমে। এইটা দিয়ে তুই ওয়েবসাইটের যেকোনো কিচ্ছু চেইঞ্জ করতে পারবি। নতুন কিছু যোগ করতে পারবি। সিম্পল একটা উদাহরণ হচ্ছে—
<h1 id="heading">Original Heading</h1>
উপরের html কোড চেইঞ্জ করার জন্য জাভাস্ক্রিপ্ট কোড।
let heading = document.getElementById('heading');
heading.innerText = 'Super duper heading';এছাড়াও ওয়েবসাইট এ ক্লিক, বিভিন্ন ধরনের ইভেন্ট, ডাইনামিক html বানানো, স্টাইল চেইঞ্জ করা, এনিমেশন, সহ ওয়েবসাইটকে ইন্টারেক্টিভ এবং ইন্টারেস্টিং করে তোলার বেশিরভাগ কাজ dom দিয়ে করা হয়।
Fetch API:
এই API ব্যবহার করে ডেভেলপাররা সহজেই নেটওয়ার্ক রিকোয়েস্ট করতে পারে। সার্ভার থেকে ডেটা আনতে বা সার্ভারে ডেটা পাঠাতে পারে। এইটাও অনেক জনপ্রিয় একটা ওয়েব API।
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log('Error:', error));Local Storage:
কোন সিম্পলডাটা যদি ব্রাউজারে লম্বা সময় ধরে স্টোর করে রাখতে হয় তখন Local Storage খুব কাজে লাগে। যেমন ওয়েবসাইট কি লাইট মুডে নাকি ডার্ক মুডে চলবে। ওয়েবসাইট এ ইউজার যদি কোন নিদৃষ্ট ভাষা ইউজ করতে চায়। কিংবা ভিডিও প্লেয়ারের সাউন্ড লেভেল কত থাকবে। এইটাইপের জিনিস যেগুলা অনেকদিন ধরে ইউজারের কাজে লাগবে। Local Storage এ একবার ডেটা স্টোর করলে তা ব্রাউজার বন্ধ করে পুনরায় খোলার পরেও থেকে যায়। যতক্ষণ পর্যন্ত ইউজার নিজে গিয়ে লোকাল স্টোরেজের ডাটা না মুছে ফেলে ততক্ষণ পর্যন্ত এই ডাটা রয়ে যায়।
ডেটা কি-ভ্যালু পেয়ারে (key-value pairs) সংরক্ষিত হয়, যেখানে কি এবং ভ্যালু উভয়ই স্ট্রিং ফরম্যাটে থাকে।
নিচের কয়েক লাইন কোডের মাধ্যমে কিভাবে লোকাল স্টোরেজে ডাটা যোগ করতে হয়। কিভাবে লোকাল স্টোরেজ থেকে ডাটা বের করতে হয়। আবার চাইলে কোন একটা স্পেসিফিক ডাটা ডিলিট করতে চায় সেটা কিভাবে করবে। এমনকি চাইলে লোকাল স্টোরেজের সব ডাটাও ডিলিট করে দিতে পারবে।
//Save data to Local Storage
localStorage.setItem('username', 'JohnDoe');
// get data from Local Storage
let user = localStorage.getItem('username');
console.log(user); // Output: JohnDoe
// Delete data from Local Storage
localStorage.removeItem('username');
// Delete All Data from Local Storage
localStorage.clear();এইগুলা সবই জাভাস্ক্রিপ্ট দিয়ে ব্রাউজারে ফাংশনালিটি বা API ইউজ করে ওয়েবসাইট ইউজ করার এক্সপেরিয়েন্স অনেক ভালো করে ফেলে।
Session Storage:
সেশন স্টোরেজ লোকাল স্টোরেজের মতোই। শুধু একটা ডিফারেন্স। লোকাল স্টোরেজ ডাটা লম্বা সময় পর্যন্ত সেইভ করা থাকে। ব্রাউজার বন্ধ করে দিলেও চলে যায় না। অন্যদিকে সেশন স্টোরেজ এর ডাটা: ব্রাউজার বন্ধ করলে বা ব্রাউজারের ট্যাব ক্লোজ করলে আর থাকে না। বরং চলে যায়।
এটি Local Storage-এর মতোই সেশন স্টোরেজের ডাটা যোগ করা যায়। কোন ডাটা থেকে ভ্যালু নিয়ে আসা যায়। দরকার হলে একটা একটা করে ডাটা ডিলিট করা যায়। আবার চাইলে সব ডাটা একসাথেও ডিলিট করা যায়।
// Save Data to Session Storage
sessionStorage.setItem('authToken', 'abcd1234');
// Get Data from Session Storage
let token = sessionStorage.getItem('authToken');
console.log(token); // Output: abcd1234
// Delete a Data from Session Storage
sessionStorage.removeItem('authToken');
// Delete All Data from Session Storage
sessionStorage.clear();History API:
History API ব্রাউজারের ব্যাক এবং ফরওয়ার্ড বাটনের মাধ্যমে পেজ নেভিগেশন কন্ট্রোল করতে সাহায্য করে। history-এর মধ্যে বেশ কয়েকটা ইউজফুল ফাংশন দেয়া আছে।
- pushState(): বর্তমান URL পরিবর্তন করে নতুন URL যোগ করে।
- replaceState(): বর্তমান URL নতুন URL দিয়ে প্রতিস্থাপন করে।
- go(): একটি নির্দিষ্ট ধাপ এগিয়ে বা পিছিয়ে যায়।
- back(): ব্যাক বাটনের সমতুল্য।
- forward(): ফরওয়ার্ড বাটনের সমতুল্য।
// Show the previous page in the browning history
history.back();
// Show the next page in the browsing history
history.forward();
// Go to step back in the browsing history
history.go(-2);
// Go to the next page
history.go(1);Practice:
- লোকাল স্টোরেজ আর সেশন স্টোরেজ এর মধ্যে ডিফারেন্স কি কি?
- Local Storage ব্যবহার করে ইউজারের ডার্ক মোড প্রেফারেন্স (on/off) সেভ কর। একটা key সেট কর। যেটার নাম হবে mode এবং সেটার ভ্যালু dark সেট কর। তারপরের আবার এই mode এর মান light সেট কর।
- Session Storage ব্যবহার করে ইউজারের লগইন টোকেন সেভ কর। টোকেনের নাম দে userToken এবং ভ্যালু দে abcd1234। পরে সেটা বের করে কনসোল লগ করে দেখা।
- Local Storage-এ ইউজারের নাম স্টোর কর যার নাম userName এবং ভ্যালু দে Alex। পরে সেই নামকে Local Storage থেকে রিমুভ কর।
- History API দিয়ে ব্রাউজারের দুই স্টেপ ব্যাক কর।