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

Jecelyn Yeen

স্টাইল ফলকে সম্পাদনাযোগ্য সিএসএস কন্টেইনার প্রশ্ন

আপনি এখন শৈলী ফলকে CSS কন্টেইনার প্রশ্নগুলি দেখতে এবং সম্পাদনা করতে পারেন।

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

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

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

Chromium সমস্যা: 1146422

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

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

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

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

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

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

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

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

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

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

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

কনসোল এখন বৈধ জাভাস্ক্রিপ্ট লিটারেল হিসাবে স্ট্রিং আউটপুট ফর্ম্যাট করে, এবং উপরন্তু আপনাকে 3টি কপি স্ট্রিং বিকল্প প্রদান করে। জাভাস্ক্রিপ্ট হিসাবে অনুলিপি আক্ষরিক বিকল্পটি উপযুক্ত বিশেষ অক্ষর এড়িয়ে যাবে এবং স্ট্রিং বিষয়বস্তুর উপর নির্ভর করে একক উদ্ধৃতি, ডবল উদ্ধৃতি বা ব্যাকটিক্সে স্ট্রিংটি মোড়ানো হবে। কপি স্ট্রিং বিষয়বস্তু পরিবর্তে কাঁচা স্ট্রিং বিষয়বস্তু (নতুন লাইন এবং অন্যান্য বিশেষ অক্ষর সহ) ক্লিপবোর্ডে মৌখিকভাবে অনুলিপি করে। অবশেষে, JSON আক্ষরিক হিসাবে অনুলিপি স্ট্রিংটিকে একটি বৈধ JSON আক্ষরিক হিসাবে ফর্ম্যাট করে এবং ক্লিপবোর্ডে অনুলিপি করে।

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

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

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

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

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

বাতিঘর 8.1

Lighthouse প্যানেল এখন Lighthouse 8.1 চালাচ্ছে।

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

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

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

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

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

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

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

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

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

ফিক্সড সিএসএস ম্যাচিং নির্বাচক

DevTools CSS ম্যাচিং নির্বাচকদের ঠিক করেছে, এটি শেষ প্রকাশে কাজ করছে না।

শৈলী ফলকে কমা বিভক্ত নির্বাচকরা নির্বাচিত DOM নোডের সাথে মেলে কিনা তার উপর নির্ভর করে ভিন্নভাবে রঙ করা হয়:

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

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

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

আপনি এখন নেটওয়ার্ক প্যানেলে JSON প্রতিক্রিয়া প্রিন্ট করতে পারেন।

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

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

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

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

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

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

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

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

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