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

Jecelyn Yeen

স্টাইলস প্যানে সম্পাদনাযোগ্য CSS কন্টেইনার কোয়েরি

আপনি এখন স্টাইলস প্যানে CSS কন্টেইনার কোয়েরি দেখতে এবং সম্পাদনা করতে পারবেন।

কন্টেইনার কোয়েরিগুলি রেসপন্সিভ ডিজাইনের ক্ষেত্রে অনেক বেশি গতিশীল পদ্ধতি প্রদান করে। @container at-rule @media এর সাথে মিডিয়া কোয়েরির মতোই কাজ করে। তবে, ভিউপোর্ট এবং ব্যবহারকারী এজেন্টের কাছে তথ্যের জন্য জিজ্ঞাসা করার পরিবর্তে, @container নির্দিষ্ট মানদণ্ডের সাথে মেলে এমন পূর্বপুরুষ কন্টেইনারটিকে জিজ্ঞাসা করে।

এলিমেন্টস প্যানেলে, @container at-rule সহ একটি DOM উপাদানে ক্লিক করুন। DevTools এখন Styles প্যানে @container তথ্য প্রদর্শন করে। আকার সম্পাদনা করতে এটিতে ক্লিক করুন। Styles প্যানে সংশ্লিষ্ট কন্টেইনার তথ্যও প্রদর্শিত হয়। পৃষ্ঠায় কন্টেইনার উপাদানটি হাইলাইট করতে এবং কন্টেইনারের আকার পরীক্ষা করতে এটিতে কার্সার রাখুন। কন্টেইনার উপাদান নির্বাচন করতে এটিতে ক্লিক করুন।

কন্টেইনার কোয়েরি বৈশিষ্ট্যটি বর্তমানে পরীক্ষামূলক। এটি পরীক্ষা করার জন্য দয়া করে chrome://flags এর অধীনে #enable-container-queries পতাকাটি চালু করুন।

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

নেটওয়ার্ক প্যানেলে ওয়েব বান্ডেল প্রিভিউ

ওয়েব বান্ডেল হল একটি ফাইল ফর্ম্যাট যা এক বা একাধিক HTTP রিসোর্সকে একটি ফাইলে ধারণ করে। আপনি এখন নেটওয়ার্ক প্যানেলে ওয়েব বান্ডেলের বিষয়বস্তুর পূর্বরূপ দেখতে পারেন।

ওয়েব বান্ডেল বৈশিষ্ট্যটি বর্তমানে পরীক্ষামূলক। এটি পরীক্ষা করার জন্য দয়া করে chrome://flags এর অধীনে #enable-experimental-web-platform-features পতাকা সক্ষম করুন।

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

অ্যাট্রিবিউশন রিপোর্টিং API ডিবাগিং

অ্যাট্রিবিউশন রিপোর্টিং API ত্রুটিগুলি এখন সমস্যা ট্যাবে রিপোর্ট করা হয়।

অ্যাট্রিবিউশন রিপোর্টিং হল একটি নতুন API যা আপনাকে পরিমাপ করতে সাহায্য করে যখন কোনও ব্যবহারকারীর ক্রিয়াকলাপ (যেমন একটি বিজ্ঞাপন ক্লিক বা ভিউ) ক্রস-সাইট শনাক্তকারী ব্যবহার না করেই রূপান্তরের দিকে পরিচালিত করে।

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

কনসোলে আরও ভালো স্ট্রিং হ্যান্ডলিং

কনসোলে নতুন প্রসঙ্গ মেনু আপনাকে যেকোনো স্ট্রিংকে কন্টেন্ট হিসেবে কপি করতে দেয়, জাভাস্ক্রিপ্ট লিটারেল বা JSON লিটারেল।

Chrome 90-এ, DevTools কনসোল আপডেট করেছে যাতে স্ট্রিং আউটপুটগুলিকে সর্বদা বৈধ JSON লিটারেল হিসাবে ফর্ম্যাট করা যায় । আমরা ডেভেলপারদের কাছ থেকে প্রতিক্রিয়া পেয়েছি যে এই পরিবর্তনটি বিভ্রান্তিকর হতে পারে, কেউ কেউ মনে করেন যে এস্কেপিংয়ের পরিমাণ অত্যধিক এবং আউটপুটকে অপাঠ্য করে তোলে।

কনসোল এখন স্ট্রিং আউটপুটগুলিকে বৈধ জাভাস্ক্রিপ্ট লিটারেল হিসেবে ফরম্যাট করে এবং আপনাকে ৩টি কপি স্ট্রিং অপশন প্রদান করে। Copy as JavaScript লিটারেল অপশনটি উপযুক্ত বিশেষ অক্ষরগুলি এড়িয়ে যাবে এবং স্ট্রিং কন্টেন্টের উপর নির্ভর করে স্ট্রিংটিকে একক উদ্ধৃতি, ডাবল উদ্ধৃতি, অথবা ব্যাকটিক্সে মোড়ানো হবে। Copy string contents পরিবর্তে raw string contents (নতুন লাইন এবং অন্যান্য বিশেষ অক্ষর সহ) ক্লিপবোর্ডে কপি করে। অবশেষে, Copy as JSON literal স্ট্রিংটিকে একটি বৈধ JSON লিটারেল হিসেবে ফরম্যাট করে এবং ক্লিপবোর্ডে কপি করে।

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

উন্নত CORS ডিবাগিং

কনসোলে CORS-সম্পর্কিত TypeErrors এখন নেটওয়ার্ক প্যানেল এবং সমস্যা ট্যাবের সাথে লিঙ্ক করা হয়েছে।

নেটওয়ার্ক অনুরোধটি দেখতে, অথবা ত্রুটি বার্তাটি আরও বুঝতে এবং সমস্যা ট্যাবে সম্ভাব্য সমাধান পেতে CORS-সম্পর্কিত ত্রুটি বার্তার পাশে দুটি নতুন আইকনে ক্লিক করুন।

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

বাতিঘর 8.1

লাইটহাউস প্যানেলটি এখন লাইটহাউস 8.1 চালাচ্ছে।

যদি আপনার সাইটটি Lighthouse-এ সোর্স ম্যাপ প্রকাশ করে, তাহলে আপনার পাঠানো জাভাস্ক্রিপ্টের একটি ব্রেকডাউন দেখতে View Treemap বোতামটি সন্ধান করুন, যা লোডের আকার এবং কভারেজ অনুসারে ফিল্টার করা যাবে।

প্রতিবেদনে একটি নতুন মেট্রিক ফিল্টারও অন্তর্ভুক্ত রয়েছে (স্ক্রিনশটে ফিল্টারের সাথে প্রাসঙ্গিক অডিট দেখান)। সেই মেট্রিকটি উন্নত করার জন্য সবচেয়ে প্রাসঙ্গিক সুযোগ এবং ডায়াগনস্টিকগুলির উপর ফোকাস করার জন্য একটি মেট্রিক বেছে নিন।

অন্যান্য পারফরম্যান্স টুলের সাথে সামঞ্জস্যপূর্ণ করার জন্য এবং ওয়েবের অবস্থা আরও ভালোভাবে প্রতিফলিত করার জন্য পারফরম্যান্স বিভাগে বেশ কয়েকটি স্কোরিং পরিবর্তন করা হয়েছে।

পরিবর্তনগুলির সম্পূর্ণ তালিকার জন্য রিলিজ নোটগুলি দেখুন।

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

ম্যানিফেস্ট প্যানে নতুন নোট URL প্রদর্শন করুন

ম্যানিফেস্ট প্যানে এখন নতুন নোটের URL প্রদর্শিত হবে।

বর্তমানে ChromeOS (CrOS) তে, Chrome অ্যাপস এবং Android অ্যাপস যা "নতুন-নোট" ক্ষমতা ঘোষণা করে, সেগুলিকে Stylus সেটিংসে নোট-টেকিং অ্যাপ হিসেবে নির্বাচন করা যেতে পারে (CrOS ডিভাইসটি স্টাইলাসের সাথে ব্যবহার করা হয়েছে কিনা তা দেখাবে)। নোট-টেকিং অ্যাপ হিসেবে নির্বাচিত হলে, স্টাইলাস প্যালেটের "নোট তৈরি করুন" বোতাম থেকে অ্যাপটি চালু করা যেতে পারে। অ্যাপ্লিকেশন ম্যানিফেস্টে new-note-url ক্ষেত্র যোগ করা ওয়েব অ্যাপগুলিতে সমতুল্য কার্যকারিতা যোগ করার প্রচেষ্টার অংশ।

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

স্থির CSS ম্যাচিং নির্বাচক

DevTools CSS ম্যাচিং সিলেক্টরগুলি ঠিক করেছে, এটি শেষ রিলিজে কাজ করছিল না।

স্টাইলস প্যানে কমা দ্বারা পৃথক করা নির্বাচকগুলি নির্বাচিত DOM নোডের সাথে মেলে কিনা তার উপর নির্ভর করে ভিন্নভাবে রঙ করা হয়:

• একটি অতুলনীয় অংশ হালকা ধূসর রঙে দেখানো হয়েছে।
• একটি মিলিত নির্বাচক অংশ কালো রঙে দেখানো হয়েছে।

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

নেটওয়ার্ক প্যানেলে প্রিটি-প্রিন্টিং JSON প্রতিক্রিয়া

আপনি এখন নেটওয়ার্ক প্যানেলে JSON প্রতিক্রিয়াগুলি সুন্দরভাবে মুদ্রণ করতে পারেন।

নেটওয়ার্ক প্যানেলে একটি JSON প্রতিক্রিয়া খুলুন, এটিকে প্রিটি-প্রিন্ট করতে {} আইকনে ক্লিক করুন।

ক্রোমিয়াম বাগ: 998674

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

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

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

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

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

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

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