ক্রস-ব্রাউজার ওয়েব অ্যাপ্লিকেশন বানানো একটি কঠিন কাজ হতে পারে, কারণ অনেক ব্রাউজার কম ডিবাগিং টুল অফার করে যা প্রায়শই একে অপরের সাথে ভিন্ন হয়। সৌভাগ্য থেকে, আজকাল অধিকাংশ ব্রাউজার মডার্ন স্ট্যান্ডার্ড সাপোর্ট করে এবং ডেভেলপারদের জন্য হেল্পফুল ফিচার দেয়।
Chrome, Firefox, এবং Edge-এর মতো প্রধান ব্রাউজারগুলো liên tục তাদের ডেভেলপার টুলস আপডেট করে, এবং প্রতিটি আপডেটে ওয়েব ডেভেলপারদের জন্য নতুন ফিচার যোগ হতে পারে। এই নতুন ফিচারগুলো সহজ UI, আরও অ্যাডভান্সড ডিবাগিং, এবং উন্নত পারফরম্যান্স অ্যানালিসিস টুল যোগ করে ইজ অফ ইউজ বাড়ায়।
এই পরিবর্তনগুলো আপ-টু-ডেট রাখলে আপনি আপনার ব্রাউজার DevTools-কে সর্বোচ্চ সম্ভাবনা পর্যন্ত ব্যবহার করতে পারবেন আপনার ওয়ার্কফ্লো সহজ করতে এবং ওয়েব অ্যাপ্লিকেশন ডেলিভারি স্পিড আপ করতে।
সূচিপত্র
- DevTools-এ Scroll Into View কীভাবে ব্যবহার করবেন
- DevTools-এ Console Shortcuts কীভাবে ব্যবহার করবেন
- DevTools-এ রিসোর্স রিকোয়েস্ট ব্লক করে ওয়েবসাইট টেস্ট করা
- DevTools-এ নেটওয়ার্ক রিকোয়েস্ট এডিট ও রিসেন্ড করা
- DevTools-এ অনইউজড সোর্স কোড ডিটেক্ট করা
- DevTools-এ অ্যাক্সেসিবিলিটি ট্রি এনেবল করা
- সারাংশ
এই নিবন্ধে, আমরা কিছু ভালো ক্রস-ব্রাউজার DevTools ফিচার আবিষ্কার করব এবং কীভাবে সেগুলো ব্যবহার করতে হয় সেটি আলোচনা করব।
চলুন শুরু করি!
DevTools-এ Scroll Into View ব্যবহার
ডিবাগিং করার সময়, HTML নোডের μέσω স্কিম করার জন্য অনেক নোড থাকতে পারে যেন আপনার ইস্যু কোথায় সেটি খুঁজে বের করতে পারেন। অধিকাংশ সময়, নোডটি খুঁজে পেলেও আপনি সেটি দেখতে পাবেন না যতক্ষণ না পেজে সেটির लोकেশনে স্ক্রোল করেন।
Scroll Into View ফিচার Chrome, Firefox, এবং Edge-এ রাইট-ক্লিক করে Scroll Into view সিলেক্ট করলে DOM নোডকে সহজে ভিউপোর্টে আনে।
এই ফিচার CSS ইস্যু ডিবাগ করার সময় বা পেজে এলিমেন্টের সঠিক প্লেসমেন্ট ভেরিফাই করার সময় অনেক সময় বাঁচায়, কারণ আপনি ম্যানুয়ালি অনেক লাইন কন্টেন্ট স্ক্রোল না করে HTML নোডের মাধ্যমে পেজে এলিমেন্ট দ্রুত লোকেট করতে পারেন।
নিচের চিত্রে, আমরা একটি h2 এলিমেন্ট খুঁজছি যা কয়েক লেয়ারের অন্য এলিমেন্টের ভেতরে নেস্টেড।
উপরের চিত্রে, পুরো পেজ স্ক্রোল করে h2 এলিমেন্টটি স্পট করার বদলে, আমরা রাইট-ক্লিক করলাম এবং Scroll Into View ফিচার ব্যবহার করলাম যাতে h2 এলিমেন্টটি ইনস্ট্যান্টলি ভিউতে আসে। আমরা এই ফিচার এক্সপ্যান্ড করতে পারি এলিমেন্টের সাথে অন্য কাজ করার জন্য যখন সেটি স্ক্রোল হয়ে আসে। আমরা রিয়েল-টাইমে CSS প্রপার্টি টুইক করতে পারি স্টাইলস প্যানেলে এবং লেআউট ইস্যু খুঁজে ফিক্স করতে পারি।
DevTools-এ Console Shortcuts ব্যবহার
Console-এ 사용할 수 있는 অনেক শর্টকাট রয়েছে যা আপনাকে ডেভেলপার হিসেবে দ্রুত ডিবাগ করতে দেয়। 그중 একটি হলো $_ শর্টকাট। এই শর্টকাট Console-এvaluated সবচেYe সাম্প্রতিক এক্সপ্রেশনের ভ্যালু রিটার্ন করে। মনে করুন, আমাদের একটি মাল্টিপ্লায়ার ফাংশন আছে:
নিচের চিত্রে, আপনি দেখতে পারেন কীভাবে $_ শর্টকাট ব্রাউজার Console-এ একটি স্পেশাল ভেরিয়েবল হিসেবে ব্যবহার হচ্ছে সবচেYe সাম্প্রতিক ইভ্যালুয়েটেড এক্সপ্রেশন স্টোর করতে:
$_ শর্টকাট ছাড়া, আপনাকে হয় পুরো ফাংশন কল রি-টাইপ করতে হতো বা রেজাল্ট একটি ভেরিয়েবলে স্টোর করতে হতো এইভাবে:
let result = multiply(5)
result(4) // returns 20
উপরের কোডে, multiply(5) ফাংশনটি একটি ফাংশন রিটার্ন করতে হয় এবং সেটি result-এ অ্যাসাইন করা হয়, যা তারপর 4 প্যারামিটার দিয়ে কল করা হয় result(4)।
আপনি নিশ্চিতভাবেই দেখতে পাচ্ছেন এটি ইতিমধ্যে কিছু রিডান্ডেন্সি এবং এক্সট্রা স্টেপ যোগ করেছে যা কাম্বারসাম হতে পারে কমপ্লেক্স অপারেশন বা একাধিক ধাপের ক্যালকুলেশনের সময়। এখানেই $_ শর্টকাট চমকদার। যখন আমরা Console-এ multiply(5) কোড রান করি, একটি ফাংশন রিটার্ন হয় এবং Console দ্বারা $_ ভেরিয়েবলে স্টোর হয়, যা আমরা $_ শর্টকাট দিয়ে অ্যাক্সেস করতে পারি।
আরেকটি শর্টকাট হলো $0 ব্যবহার করে Console-এ নোড অ্যাক্সেস করা। $0 ব্যবহার করা যায় DOM ট্রি থেকে বর্তমানে সিলেক্টেড নোড Console-এ অ্যাক্সেস করতে। আপনি DevTools দিয়ে একটি ওয়েবপেজ ইন্সপেক্ট করার সময়, আপনি প্রায়শই Elements প্যানেলে DOM ট্রি ব্রাউজ করেন আপনার আগ্রহের এলিমেন্ট খুঁজে বের করার জন্য। একবার আপনি প্যানেলে একটি এলিমেন্টে ক্লিক করলে, DevTools ইন্টারন্যালি এই এলিমেন্টটিকে ট্র্যাক করে, এবং এটি বর্তমান সিলেক্টেড এলিমেন্ট হয়ে যায়।
$0 হলো একটি শর্টকাট যা Console-এ বর্তমান সিলেক্টেড এলিমেন্টকে রেফার করে, যাতে আপনি Console-এ সরাসরি সেটি ম্যানিপুলেট করতে পারেন কোয়েরি লিখে আবার সিলেক্ট না করেও।
নিচের স্ক্রিনশটে দেখানো হয়েছে কীভাবে আমরা Console-এ $0 ব্যবহার করে DOM ট্রিতে সিলেক্টেড নোড অ্যাক্সেস করতে পারি এবং ব্যাকগ্রাউন্ড কালার চেঞ্জ করতে পারি যা ইচ্ছা।
উপরের চিত্রে, আমরা Elements প্যানেলে আমাদের ইচ্ছামতো এলিমেন্ট ইন্সপেক্ট করে শুরু করলাম। এখন, এলিমেন্টটি আবার document.querySelector('#element') দিয়ে কোয়েরি করার বদলে, আপনি শুধু $0 ব্যবহার করে সরাসরি ম্যানিপুলেট করতে পারেন এইভাবে:
$0.style.backgroundColor = 'lightblue';
এই কোড সিলেক্টেড <div>-এর ব্যাকগ্রাউন্ড কালার একটা নরম লাইট ব্লুতে চেঞ্জ করে। $0 এখানে কেন ইউজফুল সেটি হলো এটি আপনাকে আপনার DOM-এ সিলেক্ট করা সঠিক এলিমেন্টকে সরাসরি রেফার করতে দেয়, নিশ্চিত করে যে আপনি সঠিক এলিমেন্টের সাথে কাজ করছেন, এমনকি ডাইনামিক্যালি জেনারেটেড বা গভীরে নেস্টেড এলিমেন্টের কেসেও।
DevTools-এ Block Resource Request ব্যবহার করে ওয়েবসাইট টেস্টিং
Block Resource Request DevTools ফিচার ওয়েব ডেভেলপারদের জন্য একটি গুরুত্বপূর্ণ ফিচার যাতে তারা টেস্ট করতে পারে তাদের ওয়েবসাইট কীভাবে বিয়হেভ করে যখন স্পেসিফিক রিসোর্স লোড হয় না।
এই ফিচার আপনাকে সিমুলেট করতে দেয় এমন পরিস্থিতি যেখানে একটি ইমেজ, জাভাস্ক্রিপ্ট, CSS, বা একটি পুরো ডোমেন অনরিচেয়েবল হয়ে যায়, এবং আপনি দেখতে পান আপনার ওয়েবপেজ সেটি কীভাবে হ্যান্ডেল করবে।
ব্রাউজার tarafından রিকোয়েস্ট করা রিসোর্সগুলো সবসময় ডাউনলোড হওয়ার গ্যারান্টি নেই, যা আপনার ওয়েবসাইটের ইউজারদের জন্য অনপ্রত্যাশিত অভিজ্ঞতা তৈরি করতে পারে। Chrome, Firefox, এবং Edge-এ আপনি একটি রিসোর্সের রিকোয়েস্ট ব্লক করতে পারেন এবং টেস্ট করতে পারেন আপনার সাইট কীভাবে বিয়হেভ করে।
Chrome এবং Edge-এ:
- Network প্যানেলে, আপনি যে রিসোর্স ব্লক করতে চান সেটিতে রাইট-ক্লিক করুন এবং Block request URL সিলেক্ট করুন।
- ওয়েবসাইট রিফ্রেশ করুন, এবং ব্লক করা রিসোর্স ডাউনলোড হবে না এবং ওয়েবপেজকে প্রভাবিত করবে না।
নিচের চিত্রে, আমরা Network ট্যাবে Block request URL অপশন ব্যবহার করছি একটি CSS রিকোয়েস্ট ব্লক করার জন্য এবং দেখছি ওয়েব পেজ কেমন দেখাবে যদি সিলেক্টেড CSS ফাইল লোড না হয়।
উপরের চিত্রে, আমরা ওয়েবপেজ দ্বারা করা সকল নেটওয়ার্ক রিকোয়েস্ট দেখতে পাচ্ছি যার মধ্যে ইমেজ, CSS ফাইল, জাভাস্ক্রিপ্ট ফাইল, ইত্যাদির রিকোয়েস্ট রয়েছে। আমার কেসে আমি শুধু CSS ফাইল ফিল্টার করে দেখাচ্ছি।
এখান থেকে, আপনি Network প্যানেলে CSS ফাইলে রাইট-ক্লিক করুন এবং Block request URL সিলেক্ট করুন। এই অ্যাকশন ব্রাউজারকে নেক্সট টাইম পেজ রিফ্রেশ করলে সপেসিফিক CSS ফাইল লোড করতে বাধা দেবে।
রিকোয়েস্ট ব্লক করলে, আমরা অদ্ভুত বিয়হেভিয়র ওয়াচ করতে পারি এবং ব্লক করা রিসোর্সের অভাব পেজ লোড টাইম এবং পারফরম্যান্সকে কীভাবে প্রভাবিত করছে সেটি মেজার করতে পারি।
Firefox-এ:
- Network প্যানেলে, আপনি যে রিসোর্স ব্লক করতে চান সেটিতে রাইট-ক্লিক করুন এবং Block URL সিলেক্ট করুন।
- পেজ রিলোড করুন।
আমি এটি ব্যবহার করেছি টেস্ট করতে আমার সাইট কীভাবে বিয়হেভ করে যখন আমি একটি নির্দিষ্ট জাভাস্ক্রিপ্ট ফাইল লোড করি না। এই ফিচার ডেভেলপারদের ডিবাগ করতে সাহায্য করতে পারে যেসব ইস্যু উঠতে পারে যখন ইউজাররা জাভাস্ক্রিপ্ট ডিজেবল করে।
DevTools-এ Edit and Resend Network Request
DevTools-এ সবচেYe কুল ফিচারগুলোর একটি হলো ব্রাউজারে সরাসরি নেটওয়ার্ক রিকোয়েস্ট এডিট ও রিসেন্ড করার ক্ষমতা। এই ফিচার নেটওয়ার্ক রিকোয়েস্ট সমস্যা ডিবাগ করার জন্য খুব ইউজফুল হতে পারে। উদাহরণস্বরূপ, এমন সিনেরিও যেখানে আপনি দেখতে চান রিকোয়েস্ট প্যারামিটার, হেডার, বা বডিতে পরিবর্তন আনার পর সার্ভার থেকে রেসপন্স কীভাবে প্রভাবিত হয়, ফ্রন্টএন্ড কোড চেঞ্জ না করেই বা পুরো রিকোয়েস্ট প্রসেস রিস্টার্ট না করেই।
নেটওয়ার্ক রিকোয়েস্ট করার সময়, ব্যাকএন্ড সার্ভিসে করা রিকোয়েস্টগুলো ফেইল করতে পারে বা ইচ্ছামতো ডেটা রিটার্ন নাও করতে পারে। পুরো পেজ রিলোড করে রিকোয়েস্ট রিট্রাই করা একটি কষ্ট, তাই Edit and Resend ফিচার হেল্পফুল।
Edge এবং Firefox ব্রাউজারে, আপনি একটি নেটওয়ার্ক রিকোয়েস্ট এডিট ও রিসেন্ড করতে পারেন রাইট-ক্লিক করে রিকোয়েস্টে যা আপনি এডিট বা রিসেন্ড করতে চান এবং Edit and Resend সিলেক্ট করুন, ঠিক নিচের চিত্রের মত।
উপরের চিত্রে, আমরা একটি ওয়েবসাইটে লগইন করার চেষ্টা করলাম। যখন একটি ইউজার তাদের ক্রেডেনশিয়াল সাবমিট করে, ফর্ম একটি POST রিকোয়েস্ট পাঠায় একটি API এন্ডপয়েন্টে, /auth/login, ইউজারের ইউজারনেম এবং পাসওয়ার্ড দিয়ে।
কখনও কখনও সার্ভার 400 Bad Request এরর রিটার্ন করতে পারে, এবং এরর ডিবাগ করতে এবং কেন হয়েছে সেটি জানতে, আমাদের রিকোয়েস্ট রিট্রাই করতে হয়। আমরা বার বার ফর্ম ফিল আপ করতে চাই না, তাই Edit and Resend ফিচার ব্যবহার করলাম নিচের মত।
উপরের চিত্রটি নেটওয়ার্ক Console বা একটি সাইডবার যা খুলবে Edit and Resend-এ ক্লিক করলে, রিকোয়েস্টের ডিটেইলস দেখাচ্ছে। এখানে আপনি এডিট করতে পারেন:
- URL: প্রয়োজনে URL মডিফাই করতে বা কোয়েরি প্যারামিটার যোগ করতে পারেন।
- Headers: আপনি লক্ষ্য করতে পারেন একটি মিসিং বা ভুল Content-Type হেডার, যা আপনি এখানে ফিক্স করতে পারেন।
- Body: আপনি পেলোড অ্যাডজাস্ট করতে পারেন, যেমন ইউজারনেম বা পাসওয়ার্ড ফিল্ড ক렉্ট করা।
Chrome ব্রাউজারে, Edit and Resend ফিচার শুধু XHR রিকোয়েস্টের জন্য কাজ করে, এবং আপনি এটি ব্যবহার করতে পারেন রাইট-ক্লিক করে রিকোয়েস্টে এবং Replay সিলেক্ট করুন।
DevTools-এ Coverage Tool ব্যবহার করে অনইউজড সোর্স কোড ডিটেক্ট করা
DevTools-এ Coverage টুল ডেভেলপারদের সক্ষম করে তাদের জাভাস্ক্রিপ্ট এবং CSS ফাইলগুলোর সেই এলাকাগুলো স্পট করতে যা ওয়েবপেজ লোডিং এবং ইন্টারঅ্যাকশন স্টেজের সময় অনইউজড থাকে। এটি ওয়েব পারফরম্যান্স বাড়ানোর জন্য একটি গুরুত্বপূর্ণ ফিচার ফাইল সাইজ কমিয়ে এবং অনাবশ্যক কোড এলিমিনেট করে দ্রুত পেজ লোড টাইম এবং ভালো ইউজার অভিজ্ঞতার জন্য।
অনইউজড JS এবং CSS কোড রিমুভ করা আপনার ইউজারদের ব্যান্ডউইথ বাঁচাতে একটি দুর্দান্ত উপায়। Coverage টুল আপনাকে আপনার সোর্স কোডে অনইউজড কোড খুঁজে বের করতে দেয়, এবং হয় সেটি রিমুভ করতে বা ডিফার করতে পারেন যতক্ষণ না কোডের সেই টুকরো দরকার হয়।
Chrome এবং Edge-এ:
- DevTools-এ,
Ctrl/cmd+Shift+Pচাপুন, coverage টাইপ করুন এবং Start instrumenting coverage সিলেক্ট করুন, পেজ রিফ্রেশ করুন, তারপর এন্টার চাপুন। - আপনি JS এবং CSS ফাইলগুলোর একটি টেবিল দেখবেন unused byte কলামসহ।
- ফাইলগুলোর যেকোনো একটি ক্লিক করুন এটি খোলার জন্য। বगलındaki লাইন ইন্ডিকেট করে কোন সেকশন কোড অনইউজড লাল রঙে।
নিচের চিত্রে, আমরা অনইউজড CSS কোড আইডেন্টিফাই করছি সম্ভবত রিমুভ বা ডিফার করার জন্য।
উপরের চিত্রে, রিকোর্ডিং কম্প্লিট হওয়ার পর, Coverage টুল CSS এবং জাভাস্ক্রিপ্ট ফাইলগুলোর একটি লিস্ট দেখাবে যা পেজ দ্বারা লোড হয়েছে, বিস্তারিত মেট্রিক্সসহ:
- Total Bytes: ফাইলটির সাইজ।
- Unused Bytes: ফাইলটিতে যে বাইটগুলো ব্যবহার হয়নি।
- Usage Visualization: ইউজড বনাম অনইউজড কোডের অনুপাত দেখানো একটি ভিজ্যুয়াল বার।
Safari-এ: Sources প্যানেলে, লেফ্ট নেভিগেশন সাইডবার খুলুন এবং যেকোনো JS ফাইলে ক্লিক করুন। টুলবারের টপ রাইটে, কভারেজ আইকন c-এ ক্লিক করুন এবং আপনার পেজ রিফ্রেশ করুন। আপনি দেখতে পাবেন যে এক্সিকিউট না হওয়া কোডের সেকশনগুলো গ্রে আউট হয়ে গেছে।
DevTools-এ Accessibility Tree এনেবল করা
অ্যাক্সেসিবিলিটি ট্রি এলিমেন্ট DOM ট্রির মতই এবং অ্যাসিস্টিভ টেকনোলজি (যেমন স্ক্রিন রিডার) দ্বারা ব্যবহার হয় ওয়েব কন্টেন্ট পড়তে। ডেভেলপাররা এই ফিচার ব্যবহার করতে পারেন তাদের ওয়েবসাইটের অ্যাক্সেসিবিলিটি ইস্যু ডিবাগ করতে। Chromium ব্রাউজাররা Chrome-এর অ্যাক্সেসিবিলিটি API ব্যবহার করে এটাকে সম্ভব করে, যেখানে Firefox-এর নিজস্ব অ্যাক্সেসিবিলিটি টুল আছে।
Chrome এবং Edge-এ:
- সেটিংস পেজে, Experiments ট্যাব সিলেক্ট করুন।
- Elements প্যানেলে Enable full accessibility tree view অপশনের বক্স চেক করুন।
- DevTools রিফ্রেশ করুন এবং Elements টুলে যান।
- এলিমেন্ট ভিউয়ের টপ-রাইট কর্নারে, Switch to DOM Tree view-এ ক্লিক করুন।
উদাহরণস্বরূপ, নিচের চিত্রে, আমরা চেক করছি আমাদের ওয়েবসাইটের লিংক এবং বাটনগুলো সঠিকভাবে রিকগনাইজড এবং অ্যাক্সেসিবল কিনা স্ক্রিন রিডার पर নির্ভরশীল ইউজারদের জন্য।
অ্যাক্সেসিবিলিটি ট্রি এনেবল থাকলে, আপনি DOM ট্রির একটি সিম্পলিফাইড ভার্সন দেখতে পাবেন, যা অ্যাক্সেসিবিলিটির জন্য প্রাসঙ্গিক এলিমেন্টের ওপর ফোকাসড। আপনি যখন অ্যাক্সেসিবিলিটি ট্রিতে একটি এলিমেন্ট সিলেক্ট করবেন এর প্রপার্টি ভিউ করার জন্য, ট্রি এলিমেন্টের রোল, নাম, এবং অন্যান্য গুরুত্বপূর্ণ অ্যাট্রিবিউট দেখাবে, যেমন aria-label যদি থাকে।
আপনি এছাড়া দেখতে পাবেন এলিমেন্টটি ফোকাসেবল কিনা এবং এর কম্পিউটেড অ্যাক্সেসিবিলিটি প্রপার্টি কী।
এটি খুব হেল্প করে কারণ যদি এলিমেন্টটি অ্যাক্সেসিবিলিটি ট্রিতে সঠিকভাবে আসে না বা এসেনশিয়াল অ্যাট্রিবিউট মিসিং থাকে, তবে আপনাকে আপনার HTML বা ARIA অ্যাট্রিবিউট অ্যাডজাস্ট করতে হতে পারে অ্যাক্সেসিবিলিটি উন্নত করতে।
Firefox-এ:
- Firefox DevTools-এ, অ্যাক্সেসিবিলিটি ট্যাবে ক্লিক করুন এবং ডকুমেন্ট নোড এক্সপ্যান্ড করুন।
- আপনি ভিন্ন নোডে ক্লিক করে তাদের প্রপার্টি ভিউ করতে পারেন।
- নোডের জন্য অ্যাক্সেসিবিলিটি ইস্যু Checks ট্যাবে দেখানো হবে।
সারাংশ
সংক্ষেপে, লেটেস্ট ক্রস-ব্রাউজার DevTools ফিচার আপ-টু-ডেট থাকলে আপনি একটি ওয়েব ডেভেলপার হিসেবে সময় বাঁচাতে পারবেন। এই পোস্টে এলিমেন্ট ইন্সপেকশন টিপস, কিছু Console শর্টকাট ডিবাগিং প্রসেস সহজ করার জন্য, এবং নেটওয়ার্ক মনিটরিংর জন্য কিছু ইউজফুল টিপস আলোচনা করা হয়েছে।
আশা করি আপনি আরও DevTools ফিচার এক্সপ্লোর এবং ব্যবহার করবেন আপনার ডেভেলপার অভিজ্ঞতা উন্নত করতে।
ফ্রি কোড ক্যাম্পের ওপেন সোর্স কারিকুলাম ৪০,০০০+ মানুষকে ডেভেলপার হিসেবে চাকরি পেতে সাহায্য করেছে। শুরু করুন।
