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

Jecelyn Yeen

নতুন CSS ফ্লেক্সবক্স ডিবাগিং টুল

DevTools-এ এখন ডেডিকেটেড CSS ফ্লেক্সবক্স ডিবাগিং টুল রয়েছে!

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

স্টাইলস প্যানে, আপনি display: flex অথবা display: inline-flex পাশে থাকা নতুন আইকনে ক্লিক করে Flexbox এডিটর খুলতে পারেন। Flexbox এডিটর flexbox প্রোপার্টিগুলি সম্পাদনা করার একটি দ্রুত উপায় প্রদান করে। নিজে চেষ্টা করে দেখুন!

এছাড়াও, লেআউট প্যানে একটি ফ্লেক্সবক্স বিভাগ রয়েছে, যা পৃষ্ঠার সমস্ত ফ্লেক্সবক্স উপাদান প্রদর্শন করে। আপনি প্রতিটি উপাদানের ওভারলে টগল করতে পারেন।

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

নতুন কোর ওয়েব ভাইটালস ওভারলে

নতুন কোর ওয়েব ভাইটালস ওভারলে ব্যবহার করে আপনার পৃষ্ঠার কর্মক্ষমতা আরও ভালোভাবে কল্পনা করুন এবং পরিমাপ করুন।

কোর ওয়েব ভাইটালস হল গুগলের একটি উদ্যোগ যা ওয়েবে দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য প্রয়োজনীয় মানসম্পন্ন সিগন্যালের জন্য একীভূত নির্দেশিকা প্রদান করে।

কমান্ড মেনু খুলুন, Show Rendering কমান্ডটি চালান, এবং তারপর Core Web Vitals চেকবক্সটি সক্রিয় করুন।

ওভারলে বর্তমানে প্রদর্শিত হচ্ছে:

• সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (LCP) : লোডিং কর্মক্ষমতা পরিমাপ করে। ব্যবহারকারীর অভিজ্ঞতা ভালো করার জন্য, পৃষ্ঠাটি প্রথম লোড হওয়া শুরু হওয়ার 2.5 সেকেন্ডের মধ্যে LCP হওয়া উচিত।
• প্রথম ইনপুট বিলম্ব (FID) : ইন্টারঅ্যাক্টিভিটি পরিমাপ করে। একটি ভালো ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য, পৃষ্ঠাগুলির FID 100 মিলিসেকেন্ডের কম হওয়া উচিত।
• ক্রমযোজিত লেআউট শিফট (CLS) : ভিজ্যুয়াল স্থিতিশীলতা পরিমাপ করে। একটি ভালো ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য, পৃষ্ঠাগুলির CLS 0.1 এর কম বজায় রাখা উচিত।

ক্রোমিয়াম সমস্যা: ১১৫২০৮৯

ট্যাব আপডেটের সমস্যা

সমস্যা গণনা কনসোল স্ট্যাটাস বারে সরানো হয়েছে

সমস্যা সংক্রান্ত সতর্কতার দৃশ্যমানতা উন্নত করার জন্য কনসোল স্ট্যাটাস বারে এখন একটি নতুন সমস্যা গণনা বোতাম যুক্ত করা হয়েছে। এটি কনসোলে সমস্যা বার্তাটি প্রতিস্থাপন করবে।

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

বিশ্বস্ত ওয়েব কার্যকলাপের সমস্যাগুলি রিপোর্ট করুন

"সমস্যা" ট্যাবটি এখন বিশ্বস্ত ওয়েব কার্যকলাপের সমস্যাগুলি রিপোর্ট করে। এর লক্ষ্য হল ডেভেলপারদের তাদের সাইটের বিশ্বস্ত ওয়েব কার্যকলাপের সমস্যাগুলি বুঝতে এবং সমাধান করতে সাহায্য করা, যার ফলে তাদের অ্যাপ্লিকেশনগুলির মান উন্নত হয়।

একটি বিশ্বস্ত ওয়েব অ্যাক্টিভিটি খুলুন। তারপর, সমস্যাগুলি দেখতে কনসোল স্ট্যাটাস বারে সমস্যা গণনা বোতামে ক্লিক করে সমস্যা ট্যাবগুলি খুলুন। বিশ্বস্ত ওয়েব অ্যাক্টিভিটি কীভাবে তৈরি এবং স্থাপন করবেন সে সম্পর্কে আরও জানতে আন্দ্রে-র এই আলোচনাটি দেখুন।

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

কনসোলে স্ট্রিংগুলিকে (বৈধ) জাভাস্ক্রিপ্ট স্ট্রিং লিটারেল হিসেবে ফর্ম্যাট করুন

এখন, কনসোল কনসোলে স্ট্রিংগুলিকে বৈধ জাভাস্ক্রিপ্ট স্ট্রিং লিটারেল হিসেবে ফর্ম্যাট করে। পূর্বে, স্ট্রিং প্রিন্ট করার সময় কনসোল ডাবল কোট এড়াতে পারত না।

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

অ্যাপ্লিকেশন প্যানেলে নতুন ট্রাস্ট টোকেন ফলক

DevTools এখন অ্যাপ্লিকেশন প্যানেলের অধীনে নতুন Trust Tokens প্যানে বর্তমান ব্রাউজিং প্রসঙ্গে সমস্ত উপলব্ধ Trust Tokens প্রদর্শন করে।

ট্রাস্ট টোকেন হল একটি নতুন API যা জালিয়াতির বিরুদ্ধে লড়াই করতে এবং বটকে প্রকৃত মানুষ থেকে আলাদা করতে সাহায্য করে, প্যাসিভ ট্র্যাকিং ছাড়াই। ট্রাস্ট টোকেন দিয়ে কীভাবে শুরু করবেন তা শিখুন।

ক্রোমিয়াম সমস্যা: ১১২৬৮২৪

CSS color-gamut মিডিয়া বৈশিষ্ট্যটি অনুকরণ করুন

color-gamut মিডিয়া কোয়েরি আপনাকে ব্রাউজার এবং আউটপুট ডিভাইস দ্বারা সমর্থিত রঙের আনুমানিক পরিসর পরীক্ষা করতে দেয়। উদাহরণস্বরূপ, যদি color-gamut: p3 মিডিয়া কোয়েরি মিলে যায়, তাহলে এর অর্থ হল ব্যবহারকারীর ডিভাইস Display-P3 colorspace সমর্থন করে।

কমান্ড মেনু খুলুন, Show Rendering কমান্ডটি চালান, এবং তারপর Emulate CSS media feature color-gamut ড্রপডাউন সেট করুন।

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

উন্নত প্রগতিশীল ওয়েব অ্যাপস টুলিং

DevTools এখন কনসোলে আরও বিস্তারিতভাবে প্রোগ্রেসিভ ওয়েব অ্যাপস (PWA) ইনস্টলযোগ্যতা সতর্কতা বার্তা প্রদর্শন করে, যার সাথে ডকুমেন্টেশনের লিঙ্ক থাকে।

ম্যানিফেস্টের বর্ণনা ৩২৪ অক্ষরের বেশি হলে ম্যানিফেস্ট প্যানে এখন একটি সতর্কতা বার্তা দেখাবে।

এছাড়াও, PWA-এর স্ক্রিনশট যদি প্রয়োজনীয়তার সাথে মেলে না, তাহলে ম্যানিফেস্ট প্যানে এখন একটি সতর্কতা বার্তা দেখানো হবে। PWA স্ক্রিনশট সম্পত্তি এবং এর প্রয়োজনীয়তা সম্পর্কে আরও জানুন এখানে।

ক্রোমিয়াম সমস্যা: 1146450 , 1169689 , 965802

নেটওয়ার্ক প্যানেলে নতুন Remote Address Space কলাম

প্রতিটি নেটওয়ার্ক রিসোর্সের নেটওয়ার্ক আইপি অ্যাড্রেস স্পেস দেখতে নেটওয়ার্ক প্যানেলে নতুন Remote Address Space কলামটি ব্যবহার করুন।

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

কর্মক্ষমতা উন্নতি

DevTools খোলার মাধ্যমে পৃষ্ঠা লোডের কর্মক্ষমতা এখন উন্নত হয়েছে। কিছু চরম ক্ষেত্রে আমরা ১০ গুণ কর্মক্ষমতা উন্নতি দেখেছি।

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

বাস্তবায়ন সম্পর্কে আরও বিস্তারিত ইঞ্জিনিয়ারিং ব্লগ পোস্টের জন্য আমাদের সাথেই থাকুন।

ক্রোমিয়াম সমস্যা: 1069425 , 1077657

ফ্রেমের বিবরণ ভিউতে অনুমোদিত/অনুমোদিত বৈশিষ্ট্যগুলি প্রদর্শন করুন

ফ্রেমের বিবরণ ভিউ এখন অনুমতি নীতি দ্বারা নিয়ন্ত্রিত অনুমোদিত এবং অননুমোদিত ব্রাউজার বৈশিষ্ট্যগুলির একটি তালিকা দেখায়।

অনুমতি নীতি হল একটি ওয়েব প্ল্যাটফর্ম API যা একটি ওয়েবসাইটকে তার নিজস্ব ফ্রেমে বা এটি এম্বেড করা আইফ্রেমে ব্রাউজার বৈশিষ্ট্যগুলির ব্যবহারের অনুমতি বা ব্লক করার ক্ষমতা দেয়।

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

কুকিজ প্যানে নতুন SameParty কলাম

অ্যাপ্লিকেশন প্যানেলের কুকিজ প্যানে এখন কুকিজের SameParty অ্যাট্রিবিউট প্রদর্শন করা হয়। SameParty অ্যাট্রিবিউট হল একটি নতুন বুলিয়ান অ্যাট্রিবিউট যা নির্দেশ করে যে একই First-Party Sets এর অরিজিনের অনুরোধে কুকি অন্তর্ভুক্ত করা উচিত কিনা।

ক্রোমিয়াম সমস্যা: ১১৬১৪২৭

অপ্রচলিত অ-মানক fn.displayName সমর্থন

অ-মানক fn.displayName এর জন্য সমর্থন বন্ধ করা হয়েছে। পরিবর্তে fn.name ব্যবহার করুন।

ক্রোম ঐতিহ্যগতভাবে নন-স্ট্যান্ডার্ড fn.displayName প্রোপার্টি সমর্থন করে, যাতে ডেভেলপাররা error.stack এবং DevTools স্ট্যাক ট্রেসে প্রদর্শিত ফাংশনগুলির ডিবাগ নাম নিয়ন্ত্রণ করতে পারে। উপরের উদাহরণে, কল স্ট্যাক পূর্বে noLongerSupport দেখাত।

fn.displayName স্ট্যান্ডার্ড fn.name দিয়ে প্রতিস্থাপন করুন, যা ECMAScript 2015 সালে ( Object.defineProperty এর মাধ্যমে) কনফিগারযোগ্য করা হয়েছিল এবং অ-মানক fn.displayName বৈশিষ্ট্যটি প্রতিস্থাপন করা হয়েছিল।

fn.displayName এর জন্য সমর্থন অবিশ্বাস্য এবং ব্রাউজার ইঞ্জিনগুলিতে সামঞ্জস্যপূর্ণ নয়। এটি স্ট্যাক ট্রেস সংগ্রহকে ধীর করে দেয়, এমন একটি খরচ যা ডেভেলপাররা সর্বদা প্রদান করে, তারা আসলে fn.displayName ব্যবহার করুক বা না করুক।

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

সেটিংস মেনুতে Don't show Chrome Data Saver warning বন্ধ করা হচ্ছে

Chrome ডেটা সেভার বন্ধ করে দেওয়া হয়েছে, তাই Chrome ডেটা সেভার Don't show Chrome Data Saver warning সেটিংটি সরানো হয়েছে।

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

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

সমস্যা ট্যাবে স্বয়ংক্রিয়ভাবে কম-কনট্রাস্ট সমস্যা রিপোর্টিং

DevTools সমস্যা ট্যাবে স্বয়ংক্রিয়ভাবে কন্ট্রাস্ট সমস্যা রিপোর্ট করার জন্য পরীক্ষামূলক সহায়তা যোগ করেছে।

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

কম-কনট্রাস্ট সমস্যা সহ একটি পৃষ্ঠা খুলুন (যেমন এই ডেমো )। তারপর, সমস্যাগুলি দেখতে কনসোল স্ট্যাটাস বারে সমস্যা গণনা বোতামে ক্লিক করে সমস্যা ট্যাবগুলি খুলুন।

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

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

আপনি এখন একটি পৃষ্ঠার নতুন এবং উন্নত পূর্ণ অ্যাক্সেসিবিলিটি ট্রি ভিউ দেখতে টগল করতে পারেন।

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

পরীক্ষাটি সক্ষম করার পরে, এলিমেন্টস প্যানেলে একটি নতুন বোতাম প্রদর্শিত হবে, বিদ্যমান DOM ট্রি এবং সম্পূর্ণ অ্যাক্সেসিবিলিটি ট্রির মধ্যে স্যুইচ করতে ক্লিক করুন।

অনুগ্রহ করে মনে রাখবেন যে এটি একটি প্রাথমিক পর্যায়ের পরীক্ষা। আমরা সময়ের সাথে সাথে কার্যকারিতা উন্নত এবং সম্প্রসারণের পরিকল্পনা করছি।

ক্রোমিয়াম সমস্যা: 887173

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

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

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

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

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

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

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