DevTools এ নতুন কি আছে (Chrome 87)

Jecelyn Yeen

নতুন CSS গ্রিড ডিবাগিং টুল

CSS গ্রিড ডিবাগিংয়ের জন্য DevTools এখন আরও ভালো সমর্থন প্রদান করে!

যখন আপনার পৃষ্ঠার কোনও HTML উপাদানে display: grid অথবা display: inline-grid প্রয়োগ করা হয়, তখন আপনি Elements প্যানেলে তার পাশে একটি grid ব্যাজ দেখতে পাবেন। পৃষ্ঠায় একটি গ্রিড ওভারলে প্রদর্শন টগল করতে ব্যাজটিতে ক্লিক করুন।

নতুন লেআউট প্যানে একটি গ্রিড বিভাগ রয়েছে যা আপনাকে গ্রিডগুলি দেখার জন্য বেশ কয়েকটি বিকল্প প্রদান করে।

আরও জানতে ডকুমেন্টেশনটি দেখুন।

ক্রোমিয়াম সমস্যা: ১০৪৭৩৫৬

নতুন WebAuthn ট্যাব

আপনি এখন নতুন WebAuthn ট্যাব ব্যবহার করে প্রমাণীকরণকারী অনুকরণ করতে এবং ওয়েব প্রমাণীকরণ API ডিবাগ করতে পারেন।

WebAuthn ট্যাব খুলতে আরও বিকল্প > আরও সরঞ্জাম > WebAuthn নির্বাচন করুন।

নতুন WebAuthn ট্যাবের আগে, Chrome-এ কোনও নেটিভ WebAuthn ডিবাগিং সাপোর্ট ছিল না। ডেভেলপারদের ওয়েব অথেনটিকেশন API দিয়ে তাদের ওয়েব অ্যাপ্লিকেশন পরীক্ষা করার জন্য ফিজিক্যাল অথেনটিকেশনেটরের প্রয়োজন হত।

নতুন WebAuthn ট্যাবের সাহায্যে, ওয়েব ডেভেলপাররা এখন এই প্রমাণীকরণকারীদের অনুকরণ করতে, তাদের ক্ষমতা কাস্টমাইজ করতে এবং তাদের অবস্থা পরিদর্শন করতে পারবেন, কোনও শারীরিক প্রমাণীকরণকারীদের প্রয়োজন ছাড়াই। এটি ডিবাগিং অভিজ্ঞতাকে অনেক সহজ করে তোলে।

WebAuthn বৈশিষ্ট্য সম্পর্কে আরও জানতে আমাদের ডকুমেন্টেশন দেখুন।

ক্রোমিয়াম সমস্যা: ১০৩৪৬৬৩

উপরের এবং নীচের প্যানেলের মধ্যে সরঞ্জামগুলি সরান

DevTools এখন DevTools-এ উপরের এবং নীচের প্যানেলের মধ্যে টুলগুলি সরানোর সুবিধা প্রদান করে। এইভাবে, আপনি একবারে যেকোনো দুটি টুল দেখতে পারবেন।

উদাহরণস্বরূপ, যদি আপনি একবারে Elements and Sources প্যানেল দেখতে চান, তাহলে আপনি Sources প্যানেলে ডান ক্লিক করতে পারেন এবং এটিকে নীচে সরাতে Move to bottom নির্বাচন করতে পারেন।

একইভাবে, আপনি যেকোনো নীচের ট্যাবকে উপরে সরাতে পারেন একটি ট্যাবে ডান ক্লিক করে এবং Move to top নির্বাচন করে।

ক্রোমিয়াম সমস্যা: ১০৭৫৭৩২

এলিমেন্ট প্যানেল আপডেট

স্টাইলস প্যানে কম্পিউটেড সাইডবার প্যানটি দেখুন

আপনি এখন স্টাইলস প্যানে কম্পিউটেড সাইডবার প্যানটি টগল করতে পারেন।

স্টাইলস পেনের কম্পিউটেড সাইডবার পেইনটি ডিফল্টভাবে আড়াল করা থাকে। এটি টগল করতে বোতামে ক্লিক করুন।

ক্রোমিয়াম সমস্যা: ১০৭৩৮৯৯

কম্পিউটেড প্যানে CSS প্রোপার্টি গ্রুপ করা

আপনি এখন কম্পিউটেড প্যানে বিভাগ অনুসারে CSS বৈশিষ্ট্যগুলিকে গোষ্ঠীভুক্ত করতে পারেন।

এই নতুন গ্রুপিং বৈশিষ্ট্যের সাহায্যে, কম্পিউটেড প্যানে নেভিগেট করা (কম স্ক্রলিং) সহজ হবে এবং CSS পরিদর্শনের জন্য সম্পর্কিত বৈশিষ্ট্যের একটি সেটে বেছে বেছে ফোকাস করা যাবে।

এলিমেন্টস প্যানেলে, একটি এলিমেন্ট নির্বাচন করুন। CSS প্রোপার্টিগুলিকে গ্রুপ/আনগ্রুপ করতে গ্রুপ চেকবক্সটি টগল করুন।

ক্রোমিয়াম সমস্যা: 1096230 , 1084673 , 1106251

লাইটহাউস প্যানেলে লাইটহাউস 6.4

লাইটহাউস প্যানেলটি এখন লাইটহাউস 6.4 চালাচ্ছে। পরিবর্তনগুলির সম্পূর্ণ তালিকার জন্য রিলিজ নোটগুলি দেখুন।

লাইটহাউস ৬.৪-এ নতুন অডিট:

• প্রিলোড ফন্ট । font-display: optional ব্যবহার করে এমন সমস্ত ফন্ট প্রিলোড করা হয়েছে কিনা তা যাচাই করে।
• বৈধ উৎস মানচিত্র । বৃহৎ, প্রথম-পক্ষের জাভাস্ক্রিপ্টের জন্য কোনও পৃষ্ঠায় বৈধ উৎস মানচিত্র আছে কিনা তা অডিট করে।
• [পরীক্ষামূলক] বৃহৎ জাভাস্ক্রিপ্ট লাইব্রেরি । বৃহৎ জাভাস্ক্রিপ্ট লাইব্রেরি খারাপ কর্মক্ষমতা সৃষ্টি করতে পারে। এই অডিটটি moment.js এর মতো সাধারণ, বৃহৎ জাভাস্ক্রিপ্ট লাইব্রেরির সস্তা বিকল্পগুলির পরামর্শ দেয়।

ক্রোমিয়াম সমস্যা: ৭৭২৫৫৮

সময় বিভাগে performance.mark() ইভেন্টগুলি

একটি পারফরম্যান্স রেকর্ডিংয়ের সময় বিভাগটি এখন performance.mark() ইভেন্টগুলিকে চিহ্নিত করে।

নেটওয়ার্ক প্যানেলে নতুন resource-type এবং url ফিল্টার

নেটওয়ার্ক অনুরোধ ফিল্টার করতে নেটওয়ার্ক প্যানেলে নতুন resource-type এবং url কীওয়ার্ড ব্যবহার করুন।

উদাহরণস্বরূপ, নেটওয়ার্ক অনুরোধগুলিতে ফোকাস করতে resource-type:image ব্যবহার করুন, যা চিত্র।

resource-type এবং url মতো আরও বিশেষ কীওয়ার্ড আবিষ্কার করতে বৈশিষ্ট্য অনুসারে ফিল্টার অনুরোধগুলি দেখুন।

ক্রোমিয়াম সমস্যা: 1121141 , 1104188

ফ্রেমের বিবরণ দেখুন আপডেট

এন্ডপয়েন্টে COEP এবং COOP reporting to প্রদর্শন করুন

আপনি এখন নিরাপত্তা ও বিচ্ছিন্নতা বিভাগের অধীনে ক্রস-অরিজিন এম্বেডার পলিসি (COEP) এবং ক্রস-অরিজিন ওপেনার পলিসি (COOP) এন্ডপয়েন্টে reporting to দেখতে পারবেন।

রিপোর্টিং এপিআই একটি নতুন HTTP হেডার, Report-To , সংজ্ঞায়িত করে, যা ওয়েব ডেভেলপারদের ব্রাউজারকে সতর্কতা এবং ত্রুটি পাঠানোর জন্য সার্ভার এন্ডপয়েন্ট নির্দিষ্ট করার একটি উপায় দেয়।

COEP এবং COOP কীভাবে সক্ষম করবেন এবং আপনার ওয়েবসাইটকে "ক্রস-অরিজিন আইসোলেটেড" করবেন সে সম্পর্কে আরও জানতে এই নিবন্ধটি পড়ুন।

ক্রোমিয়াম সমস্যা: ১০৫১৪৬৬

COEP এবং COOP report-only মোড প্রদর্শন করুন

DevTools এখন COEP এবং COOP-এর জন্য report-only লেবেল প্রদর্শন করে, যেগুলি report-only মোডে সেট করা আছে।

তথ্য ফাঁস রোধ এবং আপনার ওয়েবসাইটে COOP এবং COEP কীভাবে সক্ষম করবেন তা জানতে এই ভিডিওটি দেখুন।

ক্রোমিয়াম সমস্যা: ১০৫১৪৬৬

আরও সরঞ্জাম মেনুতে Settings বন্ধ করা

"আরও সরঞ্জাম" মেনুতে থাকা Settings বন্ধ করে দেওয়া হয়েছে। এর পরিবর্তে মূল প্যানেল থেকে সেটিংসটি খুলুন।

ক্রোমিয়াম সমস্যা: ১১২১৩১২

পরীক্ষামূলক বৈশিষ্ট্য

CSS ওভারভিউ প্যানেলে রঙের বৈপরীত্যের সমস্যাগুলি দেখুন এবং সমাধান করুন

CSS ওভারভিউ প্যানেল এখন আপনার পৃষ্ঠার কম রঙের বৈপরীত্যযুক্ত লেখার একটি তালিকা প্রদর্শন করে।

এই উদাহরণে, ডেমো পৃষ্ঠায় রঙের বৈপরীত্য কম। সমস্যাটির উপর ক্লিক করলে, আপনি সমস্যাযুক্ত উপাদানগুলির একটি তালিকা দেখতে পাবেন।

তালিকার একটি উপাদানের উপর ক্লিক করে এলিমেন্ট প্যানেলে এলিমেন্টটি খুলুন। DevTools আপনাকে কম কনট্রাস্ট টেক্সট ঠিক করতে সাহায্য করার জন্য স্বয়ংক্রিয় রঙের পরামর্শ প্রদান করে ।

ক্রোমিয়াম সমস্যা: ১১২০৩১৬

DevTools-এ কীবোর্ড শর্টকাট কাস্টমাইজ করুন

আপনি এখন DevTools-এ আপনার পছন্দের কমান্ডের জন্য কীবোর্ড শর্টকাটগুলি কাস্টমাইজ করতে পারেন।

সেটিংস > শর্টকাট এ যান, একটি কমান্ডের উপর হোভার করে এবং কীবোর্ড শর্টকাটটি কাস্টমাইজ করতে সম্পাদনা বোতামে (পেন আইকন) ক্লিক করুন।

সমস্ত শর্টকাট রিসেট করতে, ডিফল্ট শর্টকাট পুনরুদ্ধার করুন এ ক্লিক করুন।

ক্রোমিয়াম সমস্যা: ১৭৪৩০৯

প্রিভিউ চ্যানেলগুলি ডাউনলোড করুন

আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসেবে Chrome Canary , Dev , অথবা Beta ব্যবহার করার কথা বিবেচনা করুন। এই প্রিভিউ চ্যানেলগুলি আপনাকে সর্বশেষ DevTools বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, আপনাকে অত্যাধুনিক ওয়েব প্ল্যাটফর্ম API পরীক্ষা করতে দেয় এবং আপনার ব্যবহারকারীদের আগে আপনার সাইটে সমস্যাগুলি খুঁজে পেতে সহায়তা করে!

Chrome DevTools টিমের সাথে যোগাযোগ করুন

DevTools সম্পর্কিত নতুন বৈশিষ্ট্য, আপডেট বা অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন।

• crbug.com এ আমাদের কাছে প্রতিক্রিয়া এবং বৈশিষ্ট্য অনুরোধ জমা দিন।
• more_vert ব্যবহার করে DevTools সমস্যা রিপোর্ট করুন। আরও বিকল্প > সাহায্য > DevTools-এ DevTools সমস্যা রিপোর্ট করুন ।
• @ChromeDevTools- এ টুইট করুন।
• DevTools YouTube ভিডিওতে নতুন কী আছে বা DevTools Tips YouTube ভিডিওগুলিতে মন্তব্য করুন।

DevTools-এ নতুন কী আছে

DevTools সিরিজে নতুন কী কী বিষয় অন্তর্ভুক্ত করা হয়েছে তার একটি তালিকা।