উন্নয়ন দক্ষতা সর্বাধিক করুন:ক্রস-ব্রাউজার ডেভটুল বৈশিষ্ট্যগুলি ব্যবহার করা

ক্রস-ব্রাউজার ওয়েব অ্যাপ্লিকেশন তৈরি করা একটি কঠিন কাজ হতে পারে, কারণ অনেক ব্রাউজার কয়েকটি ডিবাগিং টুল অফার করে যা প্রায়শই তাদের মধ্যে পরিবর্তিত হয়। সৌভাগ্যবশত, আজ বেশিরভাগ ব্রাউজার আধুনিক মান সমর্থন করে এবং বিকাশকারীদের জন্য সহায়ক বৈশিষ্ট্য প্রদান করে।

প্রধান ব্রাউজার, যেমন ক্রোম, ফায়ারফক্স, এবং এজ, ক্রমাগত তাদের ডেভেলপার টুল আপডেট করে, প্রতিটি আপডেট সম্ভাব্যভাবে ওয়েব ডেভেলপারদের জন্য নতুন বৈশিষ্ট্য নিয়ে আসে। এই নতুন বৈশিষ্ট্যগুলি স্বজ্ঞাত UI, আরও উন্নত ডিবাগিং, এবং উন্নত কর্মক্ষমতা বিশ্লেষণ সরঞ্জাম যোগ করে ব্যবহারের সহজতা বাড়ায়৷

এই পরিবর্তনগুলির সাথে আপ টু ডেট থাকা আপনাকে আপনার কার্যপ্রবাহকে আরও সহজ করতে এবং আপনার ওয়েব অ্যাপ্লিকেশনগুলির ডেলিভারির গতি বাড়ানোর জন্য আপনার ব্রাউজার DevToolsকে তার পূর্ণ সম্ভাবনায় ব্যবহার করতে দেয়৷

বিষয়বস্তুর সারণী

• DevTools

  -এ স্ক্রোল ইনটু ভিউ কীভাবে ব্যবহার করবেন

• DevTools

  -এ কীভাবে কনসোল শর্টকাট ব্যবহার করবেন

• DevTools

  -এ ওয়েবসাইট পরীক্ষার জন্য রিসোর্স রিকোয়েস্ট কীভাবে ব্লক করবেন

• কিভাবে DevTools এ নেটওয়ার্ক অনুরোধ সম্পাদনা এবং পুনরায় পাঠাতে হয়

• DevTools

  -এ অব্যবহৃত সোর্স কোড কীভাবে শনাক্ত করবেন

• কিভাবে DevTools এ অ্যাক্সেসিবিলিটি ট্রি সক্ষম করবেন

• সারাংশ

এই নিবন্ধে, আমরা কিছু ভাল ক্রস-ব্রাউজার DevTools বৈশিষ্ট্যগুলি আবিষ্কার করব এবং সেগুলি কীভাবে ব্যবহার করবেন তা নিয়ে আলোচনা করব৷

চলুন শুরু করা যাক!

ডিবাগ করার সময়, আপনার সমস্যা কোথায় তা খুঁজে বের করার জন্য অনেক এইচটিএমএল নোড থাকতে পারে। বেশিরভাগ সময়, যখন আপনি নোডটি খুঁজে পান, আপনি এটি দেখতে পাবেন না যতক্ষণ না আপনি এটি পৃষ্ঠায় যেখানে আছে সেখানে স্ক্রোল করেন।

স্ক্রোল ইনটু ভিউ বৈশিষ্ট্যটি সহজেই DOM নোডকে ডান-ক্লিক করে এবং Chrome, Firefox এবং Edge-এ স্ক্রোল ইনটু ভিউ নির্বাচন করে ভিউপোর্টে নিয়ে আসে।

এই বৈশিষ্ট্যটি CSS সমস্যাগুলি ডিবাগ করার সময় বা একটি পৃষ্ঠায় উপাদানগুলির সঠিক স্থান নির্ধারণ করতে চাইলে অনেক সময় সাশ্রয় করে, যাতে আপনি এইচটিএমএল নোডের মাধ্যমে পৃষ্ঠায় উপাদানগুলিকে ম্যানুয়ালি অনেক লাইনের মাধ্যমে স্ক্রোল করার প্রয়োজন ছাড়াই দ্রুত সনাক্ত করতে পারেন৷

নীচের ছবিতে, আমরা একটি h2 খোঁজার চেষ্টা করছি উপাদান যা অন্যান্য উপাদানের বেশ কয়েকটি স্তরের ভিতরে নেস্ট করা হয়।

উপরের ছবিতে, h2 দেখতে পুরো পৃষ্ঠায় স্ক্রোল করার পরিবর্তে উপাদান, আমরা ডান-ক্লিক করেছি এবং তাৎক্ষণিকভাবে h2 আনতে স্ক্রোল ইনটু ভিউ বৈশিষ্ট্য ব্যবহার করেছি দৃশ্যে উপাদান। যখন আমরা এটিতে স্ক্রোল করেছি তখন আমরা উপাদানটির সাথে অন্যান্য জিনিসগুলি করতে এই বৈশিষ্ট্যটি প্রসারিত করতে পারি। আমরা স্টাইল প্যানেলের মাধ্যমে রিয়েল টাইমে CSS বৈশিষ্ট্যগুলিকে টুইক করতে পারি এবং এমনকি লেআউট সমস্যাগুলি খুঁজে পেতে এবং সমাধান করতে পারি৷

কনসোলে ব্যবহার করা যেতে পারে এমন অনেক শর্টকাট রয়েছে যা আপনাকে বিকাশকারী হিসাবে দ্রুত ডিবাগ করতে দেয়। তাদের মধ্যে একটি হল $_ শর্টকাট এই শর্টকাটটি কনসোল দ্বারা মূল্যায়ন করা সাম্প্রতিকতম অভিব্যক্তির মান প্রদান করে। ধরা যাক, উদাহরণস্বরূপ, আমাদের একটি গুণক ফাংশন আছে:

নিচের ছবিতে, আপনি দেখতে পাচ্ছেন কিভাবে $_ শর্টকাটটি ব্রাউজার কনসোলে একটি বিশেষ পরিবর্তনশীল হিসাবে ব্যবহার করা হয় যাতে সাম্প্রতিক মূল্যায়ন করা অভিব্যক্তি সংরক্ষণ করা হয়:

$_ ছাড়া শর্টকাট, আপনাকে হয় সম্পূর্ণ ফাংশন কলটি পুনরায় টাইপ করতে হবে অথবা আপনি ফলাফলটি এইরকম একটি ভেরিয়েবলে সংরক্ষণ করতে পারেন:

let result = multiply(5)
result(4) // returns 20

উপরের কোডে, multiply(5) ফাংশনকে একটি ফাংশন ফেরত দিতে হবে এবং ফলাফলের জন্য ফাংশন বরাদ্দ করতে হবে, যেটিকে 4 দিয়ে ডাকা হয় প্যারামিটার হিসাবে result(4) .

আমি নিশ্চিত যে আপনি দেখতে পাচ্ছেন কিভাবে এটি ইতিমধ্যেই কিছু অপ্রয়োজনীয়তা এবং অতিরিক্ত পদক্ষেপগুলিকে প্রবর্তন করে যা আপনি যখন আরও জটিল ক্রিয়াকলাপগুলির সাথে কাজ করছেন বা গণনার একাধিক পদক্ষেপগুলি করছেন তখন কষ্টকর হতে পারে৷ এখানেই $_ শর্টকাট জ্বলজ্বল করে। যখন আমরা multiply(5) চালাই কনসোলে কোড, একটি ফাংশন ফেরত দেওয়া হয় এবং $_ এ সংরক্ষণ করা হয় কনসোল দ্বারা পরিবর্তনশীল, যা আমরা $_ ব্যবহার করে অ্যাক্সেস করতে পারি শর্টকাট।

আরেকটি শর্টকাট $0 ব্যবহার করছে কনসোল থেকে নোড অ্যাক্সেস করতে। $0 কনসোলের মধ্যে থেকে DOM ট্রিতে বর্তমানে নির্বাচিত নোড অ্যাক্সেস করতে ব্যবহার করা যেতে পারে। আপনি যখন DevTools-এর সাথে একটি ওয়েবপৃষ্ঠা পরিদর্শন করেন, আপনি প্রায়শই উপাদান প্যানেলে DOM ট্রি ব্রাউজ করেন আপনার আগ্রহের উপাদানটি খুঁজে পেতে। একবার আপনি এই প্যানেলের একটি উপাদানে ক্লিক করলে, DevTools অভ্যন্তরীণভাবে এই উপাদানটির উপর নজর রাখে এবং এটি বর্তমানে নির্বাচিত উপাদান হয়ে ওঠে।

$0 এটি একটি শর্টকাট যা কনসোলে বর্তমানে নির্বাচিত উপাদানকে নির্দেশ করে, তাই আপনি এটিকে আবার নির্বাচন করার জন্য একটি প্রশ্ন না লিখে সরাসরি কনসোলে এটি পরিচালনা করতে পারেন৷

নিচের স্ক্রিনশটটি দেখায় কিভাবে আমরা $0 ব্যবহার করতে পারি কনসোলে DOM ট্রিতে নির্বাচিত নোড অ্যাক্সেস করতে এবং পটভূমির রঙ আমরা যা চাই তা পরিবর্তন করতে পারি।

উপরের চিত্র থেকে, আমরা উপাদান প্যানেলে আমরা যে পছন্দসই উপাদানটি চেয়েছিলাম তা পরিদর্শন করে শুরু করেছি। এখন, document.querySelector('#element') ব্যবহার করে আবার উপাদানটি জিজ্ঞাসা করার পরিবর্তে , আপনি শুধু $0 ব্যবহার করতে পারেন এটিকে সরাসরি এভাবে ম্যানিপুলেট করতে:

$0.style.backgroundColor = 'lightblue';

এই কোডটি নির্বাচিত <div> এর পটভূমির রঙ পরিবর্তন করে একটি মৃদু হালকা নীল থেকে. আসলেই কি $0 তৈরি করে এই ক্ষেত্রে দরকারী যে এটি আপনাকে সরাসরি DOM-এ আপনার বেছে নেওয়া সঠিক উপাদানটি উল্লেখ করতে দেয়, নিশ্চিত করে যে আপনি সঠিক উপাদানটির সাথে কাজ করছেন, এমনকি এমন ক্ষেত্রে যেখানে উপাদানগুলি গতিশীলভাবে জেনারেট করা হয়েছে বা গভীরভাবে নেস্ট করা হয়েছে৷

ব্লক রিসোর্স রিকোয়েস্ট DevTools বৈশিষ্ট্যটি ওয়েব ডেভেলপারদের জন্য একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা পরীক্ষা করার জন্য তাদের ওয়েবসাইটগুলি কীভাবে আচরণ করে যখন নির্দিষ্ট সংস্থানগুলি লোড করা যায় না৷

এই বৈশিষ্ট্যটি আপনাকে এমন পরিস্থিতিতে অনুকরণ করতে সক্ষম করে যেখানে একটি চিত্র, জাভাস্ক্রিপ্ট, সিএসএস বা একটি সম্পূর্ণ ডোমেন পৌঁছানো যায় না এবং আপনি দেখতে পাবেন যে সেই পরিস্থিতিতে আপনার ওয়েবপৃষ্ঠাটি কীভাবে আচরণ করবে৷

ব্রাউজার দ্বারা অনুরোধ করা সংস্থানগুলি সর্বদা ডাউনলোড হওয়ার গ্যারান্টি দেওয়া হয় না, যা আপনার ওয়েবসাইটের ব্যবহারকারীদের জন্য অপ্রত্যাশিত অভিজ্ঞতার দিকে নিয়ে যেতে পারে। আপনি Chrome, Firefox, এবং Edge-এ একটি রিসোর্সের অনুরোধ ব্লক করতে পারেন এবং আপনার সাইট কীভাবে আচরণ করে তা পরীক্ষা করতে পারেন।

Chrome এবং প্রান্তে:

• নেটওয়ার্ক প্যানেলে, আপনি যে সংস্থানটিকে ব্লক করতে চান তার উপর ডান-ক্লিক করুন এবং ব্লক অনুরোধ URL নির্বাচন করুন৷

• ওয়েবসাইট রিফ্রেশ করুন, এবং অবরুদ্ধ সংস্থান ডাউনলোড করা হবে না এবং ওয়েবপৃষ্ঠাকে প্রভাবিত করবে না।

নীচের ছবিতে, আমরা একটি CSS অনুরোধ ব্লক করতে নেটওয়ার্ক ট্যাবে ব্লক অনুরোধ URL বিকল্পটি ব্যবহার করছি এবং নির্বাচিত CSS ফাইলটি লোড করতে ব্যর্থ হলে ওয়েব পৃষ্ঠাটি কেমন হবে তা দেখুন৷

উপরের ছবিটি থেকে, আমরা ওয়েবপেজ দ্বারা করা সমস্ত নেটওয়ার্ক অনুরোধগুলি দেখতে পারি যার মধ্যে রয়েছে ছবি, CSS ফাইল, জাভাস্ক্রিপ্ট ফাইল এবং আরও অনেক কিছুর অনুরোধ। আমার ক্ষেত্রে আমি শুধুমাত্র সিএসএস ফাইল দেখানোর জন্য ফিল্টার করেছি।

এখান থেকে, আপনি নেটওয়ার্ক প্যানেলে CSS ফাইলটিতে ডান ক্লিক করতে পারেন এবং ব্লক অনুরোধ URL নির্বাচন করতে পারেন। এই ক্রিয়াটি ব্রাউজারটিকে পরের বার পৃষ্ঠাটি রিফ্রেশ করার সময় নির্দিষ্ট CSS ফাইলটি লোড হতে বাধা দেবে৷

অনুরোধটি ব্লক করার মাধ্যমে, আমরা অদ্ভুত আচরণের দিকে নজর রাখতে পারি এবং ব্লক করা সম্পদের অনুপস্থিতি কীভাবে পৃষ্ঠা লোডের সময় এবং কর্মক্ষমতাকে প্রভাবিত করতে পারে তাও পরিমাপ করতে পারি।

ফায়ারফক্সে:

• নেটওয়ার্ক প্যানেলে, আপনি যে সংস্থানটিকে ব্লক করতে চান তার উপর ডান-ক্লিক করুন এবং ব্লক URL নির্বাচন করুন৷

  ৷

• পৃষ্ঠাটি পুনরায় লোড করুন৷

  ৷

যখন আমি একটি নির্দিষ্ট জাভাস্ক্রিপ্ট ফাইল লোড করি না তখন আমার সাইট কীভাবে আচরণ করে তা পরীক্ষা করার জন্য আমি এটি ব্যবহার করেছি। এই বৈশিষ্ট্যটি বিকাশকারীদের সাহায্য করতে পারে ডিবাগ সমস্যা যা ব্যবহারকারীরা জাভাস্ক্রিপ্ট অক্ষম করলে দেখা দিতে পারে৷

সবচেয়ে দুর্দান্ত DevTools বৈশিষ্ট্যগুলির মধ্যে একটি হল ব্রাউজারে সরাসরি নেটওয়ার্ক অনুরোধগুলি সম্পাদনা এবং পুনরায় পাঠানোর ক্ষমতা৷ এই বৈশিষ্ট্য একটি নেটওয়ার্ক অনুরোধ সমস্যা ডিবাগ করার জন্য সত্যিই দরকারী হতে পারে. উদাহরণস্বরূপ, পরিস্থিতি যেখানে আপনি দেখতে চান কিভাবে প্যারামিটার, শিরোনাম বা বডির অনুরোধের পরিবর্তনগুলি সার্ভার থেকে প্রতিক্রিয়াকে প্রভাবিত করে, ফ্রন্টএন্ড কোডে কোনো পরিবর্তন না করে বা সম্পূর্ণ অনুরোধ প্রক্রিয়াটি পুনরায় চালু না করে।

একটি নেটওয়ার্ক অনুরোধ করার সময়, একটি ব্যাকএন্ড পরিষেবাতে করা অনুরোধগুলি ব্যর্থ হতে পারে বা উদ্দেশ্যযুক্ত ডেটার সাথে সাড়া নাও দিতে পারে৷ অনুরোধটি পুনরায় চেষ্টা করার জন্য পুরো পৃষ্ঠাটি পুনরায় লোড করতে হবে এটি একটি বেদনাদায়ক, যে কারণে সম্পাদনা এবং পুনরায় পাঠান বৈশিষ্ট্যটি সহায়ক৷

এজ এবং ফায়ারফক্স ব্রাউজারে, আপনি যে অনুরোধটি সম্পাদনা করতে চান বা পুনরায় পাঠাতে চান তার উপর ডান-ক্লিক করে একটি নেটওয়ার্ক অনুরোধ সম্পাদনা করতে এবং পুনরায় পাঠাতে পারেন এবং সম্পাদনা এবং পুনরায় পাঠান নির্বাচন করুন, ঠিক নীচের চিত্রের মতো৷

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

কখনও কখনও, সার্ভার একটি 400 ফেরত দিতে পারে খারাপ অনুরোধ ত্রুটি, এবং আমাদের ত্রুটি ডিবাগ করার জন্য এবং কেন তা খুঁজে বের করার জন্য, আমাদের অনুরোধটি পুনরায় চেষ্টা করতে হবে। আমরা ফর্মটি পূরণ করা চালিয়ে যেতে চাই না, তাই আমরা নীচে দেখানো হিসাবে সম্পাদনা এবং পুনরায় পাঠান বৈশিষ্ট্যটি ব্যবহার করি৷

উপরের ছবিটি হল নেটওয়ার্ক কনসোল বা একটি সাইডবার যা আপনি এডিট এবং রিসেন্ডে ক্লিক করলে খুলবে, অনুরোধের বিশদ বিবরণ দেখায়। এখানে, আপনি সম্পাদনা করতে পারেন:

• URL:প্রয়োজনে, আপনি URL পরিবর্তন করতে পারেন বা ক্যোয়ারী প্যারামিটার যোগ করতে পারেন।

• শিরোনাম:আপনি একটি অনুপস্থিত বা ভুল বিষয়বস্তু-প্রকার শিরোনাম লক্ষ্য করতে পারেন, যা আপনি এখানে ঠিক করতে পারেন৷

• মূল অংশ:এখানে আপনি পেলোড সামঞ্জস্য করতে পারেন, যেমন ব্যবহারকারীর নাম বা পাসওয়ার্ড ক্ষেত্রগুলি সংশোধন করা৷

ক্রোম ব্রাউজারে, সম্পাদনা এবং পুনরায় পাঠান বৈশিষ্ট্যটি শুধুমাত্র XHR অনুরোধের জন্য কাজ করে এবং আপনি অনুরোধের উপর ডান ক্লিক করে এবং রিপ্লে নির্বাচন করে এটি ব্যবহার করতে পারেন৷

DevTools-এর কভারেজ টুলটি ডেভেলপারদের তাদের JavaScript এবং CSS ফাইলের এমন এলাকা খুঁজে বের করতে সক্ষম করে যেগুলি ওয়েবপেজের লোডিং এবং ইন্টারঅ্যাকশন পর্যায়ে অব্যবহৃত থাকে। এটি ফাইলের আকার হ্রাস করে এবং দ্রুত পৃষ্ঠা লোডের সময় এবং একটি ভাল ব্যবহারকারীর অভিজ্ঞতার জন্য অপ্রয়োজনীয় কোড বাদ দিয়ে ওয়েব কর্মক্ষমতা বাড়ানোর জন্য একটি গুরুত্বপূর্ণ বৈশিষ্ট্য৷

অব্যবহৃত JS এবং CSS কোড অপসারণ করা আপনার ব্যবহারকারীদের ব্যান্ডউইথ সংরক্ষণ করার একটি দুর্দান্ত উপায়। কভারেজ টুল আপনাকে আপনার সোর্স কোডে অব্যবহৃত কোড খুঁজে পেতে এবং কোডের টুকরোটি প্রয়োজন না হওয়া পর্যন্ত এটি সরিয়ে ফেলতে বা স্থগিত করতে দেয়।

Chrome এবং প্রান্তে:

• DevTools-এ, Ctrl/cmd+Shift+P টিপুন , কভারেজ টাইপ করুন এবং স্টার্ট ইনস্ট্রুমেন্টিং কভারেজ নির্বাচন করুন, পৃষ্ঠা রিফ্রেশ করুন, তারপর এন্টার টিপুন।

• আপনি একটি অব্যবহৃত বাইট কলাম সহ JS এবং CSS ফাইলগুলির একটি টেবিল দেখতে পাবেন৷

• এটি খুলতে যেকোনো ফাইলে ক্লিক করুন। পাশের লাইনটি নির্দেশ করে যে কোডের কোন বিভাগটি লাল রঙে অব্যবহৃত নয়।

নীচের ছবিতে, আমরা অব্যবহৃত সিএসএস কোড চিহ্নিত করছি যাতে কোডটি লোড করা সম্ভব হয় বা মুছে ফেলা যায়।

উপরের চিত্র থেকে, রেকর্ডিং সম্পূর্ণ হওয়ার পরে, কভারেজ টুলটি বিস্তারিত মেট্রিক্স সহ পৃষ্ঠা দ্বারা লোড করা CSS এবং JavaScript ফাইলগুলির একটি তালিকা প্রদর্শন করবে:

• মোট বাইট:ফাইলের আকার।

• অব্যবহৃত বাইট:ফাইলে ব্যবহৃত বাইটের সংখ্যা।

• ব্যবহার ভিজ্যুয়ালাইজেশন:একটি ভিজ্যুয়াল বার যা ব্যবহৃত বনাম অব্যবহৃত কোডের অনুপাতকে প্রতিনিধিত্ব করে।

সাফারিতে:উত্স প্যানেলে, বাম নেভিগেশন সাইডবার খুলুন এবং যেকোনো JS ফাইলে ক্লিক করুন। টুলবারের উপরের ডানদিকে, কভারেজ আইকনে ক্লিক করুন c এবং আপনার পৃষ্ঠা রিফ্রেশ করুন। আপনি দেখতে সক্ষম হবেন যে কোডের বিভাগগুলি কার্যকর করা হয়নি ধূসর হয়ে গেছে৷

অ্যাক্সেসিবিলিটি ট্রিটি উপাদান DOM গাছের অনুরূপ এবং ওয়েব সামগ্রী পড়ার জন্য স্ক্রিন রিডারের মতো সহায়ক প্রযুক্তি দ্বারা ব্যবহৃত হয়। বিকাশকারীরা তাদের ওয়েবসাইটে অ্যাক্সেসযোগ্যতার সমস্যাগুলি ডিবাগ করতে এই বৈশিষ্ট্যটি ব্যবহার করতে পারে। ক্রোমিয়াম ব্রাউজারগুলি এটি সম্ভব করার জন্য Chrome এর অ্যাক্সেসিবিলিটি API ব্যবহার করে, যখন Firefox এর নিজস্ব অ্যাক্সেসিবিলিটি টুল রয়েছে৷

Chrome এবং প্রান্তে:

• সেটিংস পৃষ্ঠায়, পরীক্ষা ট্যাবটি নির্বাচন করুন৷

  ৷

• এলিমেন্টস প্যানেলে সম্পূর্ণ অ্যাক্সেসিবিলিটি ট্রি ভিউ বিকল্পের জন্য বাক্সটি চেক করুন।

• DevTools রিফ্রেশ করুন এবং এলিমেন্ট টুলে যান।

• এলিমেন্ট ভিউয়ের উপরের-ডান কোণে, DOM ট্রি ভিউতে স্যুইচ করুন ক্লিক করুন।

উদাহরণস্বরূপ, নীচের ছবিতে, আমরা আমাদের ওয়েবসাইটের লিঙ্ক এবং বোতামগুলি সঠিকভাবে স্বীকৃত এবং স্ক্রিন রিডারের উপর নির্ভরশীল ব্যবহারকারীদের কাছে অ্যাক্সেসযোগ্য কিনা তা পরীক্ষা করছি:

অ্যাক্সেসিবিলিটি ট্রি সক্ষম করে, আপনি DOM ট্রির একটি সরলীকৃত সংস্করণ দেখতে পারেন, যা অ্যাক্সেসযোগ্যতার জন্য প্রাসঙ্গিক উপাদানগুলির উপর দৃষ্টি নিবদ্ধ করে৷ আপনি যখন অ্যাক্সেসিবিলিটি ট্রিতে একটি উপাদান নির্বাচন করেন তার বৈশিষ্ট্যগুলি দেখার জন্য, গাছটি উপাদানটির ভূমিকা, নাম এবং অন্যান্য গুরুত্বপূর্ণ বৈশিষ্ট্যগুলি প্রদর্শন করে, যেমন অ্যারিয়া-লেবেল উপস্থিত থাকলে৷

আপনি উপাদানটি ফোকাসযোগ্য কিনা এবং এর গণনাকৃত অ্যাক্সেসিবিলিটি বৈশিষ্ট্যগুলি কী তাও দেখতে পাবেন।

এটি একটি দুর্দান্ত চুক্তিতে সাহায্য করে কারণ যদি উপাদানটি অ্যাক্সেসিবিলিটি ট্রিতে সঠিকভাবে প্রদর্শিত না হয় বা প্রয়োজনীয় বৈশিষ্ট্যগুলি অনুপস্থিত থাকে তবে অ্যাক্সেসযোগ্যতা উন্নত করতে আপনাকে আপনার HTML বা ARIA বৈশিষ্ট্যগুলি সামঞ্জস্য করতে হতে পারে৷

ফায়ারফক্সে:

• Firefox DevTools-এ, অ্যাক্সেসিবিলিটি ট্যাবে ক্লিক করুন এবং ডকুমেন্ট নোড প্রসারিত করুন।

• আপনি তাদের বৈশিষ্ট্য দেখতে বিভিন্ন নোড ক্লিক করতে পারেন.

• নোডগুলির জন্য অ্যাক্সেসযোগ্যতার সমস্যাগুলি চেক ট্যাবে প্রদর্শিত হবে৷

  ৷

সারাংশ

সংক্ষেপে, সাম্প্রতিক ক্রস-ব্রাউজার DevTools বৈশিষ্ট্যগুলির সাথে বর্তমান থাকা একটি ওয়েব বিকাশকারী হিসাবে আপনার সময় বাঁচাবে৷ এই পোস্টটি উপাদান পরিদর্শন টিপস, আপনার ডিবাগিং প্রক্রিয়াকে সহজ করার জন্য কিছু কনসোল শর্টকাট এবং নেটওয়ার্ক পর্যবেক্ষণের জন্য কিছু দরকারী টিপসকে স্পর্শ করে৷

আশা করি, আপনি আপনার ডেভেলপার অভিজ্ঞতা উন্নত করতে আরও DevTools বৈশিষ্ট্যগুলি অন্বেষণ এবং ব্যবহার করতে থাকবেন৷

বিনামূল্যে কোড শিখুন. freeCodeCamp-এর ওপেন সোর্স পাঠ্যক্রম 40,000-এরও বেশি লোককে ডেভেলপার হিসেবে চাকরি পেতে সাহায্য করেছে। শুরু করুন