DevTools, Chrome 136-এ নতুন কী আছে৷

সোফিয়া এমেলিয়ানোভা
Sofia Emelianova
GitHub

পারফর্মেন্স প্যানেলের উন্নতি

এই সংস্করণটি পারফরম্যান্স প্যানেলে বেশ কিছু উন্নতি এনেছে।

নতুন পারফর্ম্যান্স অন্তর্দৃষ্টি

পারফরম্যান্স > ইনসাইটস ট্যাবে নতুন ইনসাইট পাওয়া যাবে:

  • আধুনিক HTTP যা পুরানো HTTP/1.1 প্রোটোকল ব্যবহার করে এমন অনুরোধগুলিকে হাইলাইট করে।
  • দক্ষ ক্যাশে লাইফটাইম ব্যবহার করুন যা এমন অনুরোধগুলিকে হাইলাইট করে যা দীর্ঘ ক্যাশে লাইফটাইম থেকে উপকৃত হতে পারে এবং আপনার ওয়েবসাইটের লোডিং সময়কে দ্রুততর করতে পারে।
  • ফন্ট ডিসপ্লে যা font-display অপ্টিমাইজ করলে আপনার আনুমানিক সময় সাশ্রয় দেখায়।

ইনসাইটস ট্যাবে তিনটি নতুন ইনসাইট।

হাইলাইট করতে ক্লিক করুন

আপনি এখন Summary , Bottom-up , Call tree এবং Event log টেবিলের আইটেমগুলিতে ক্লিক করে ট্রেসে সংশ্লিষ্ট ইভেন্টগুলি হাইলাইট করতে পারেন এবং পারফরম্যান্স ট্রেস ব্রাউজ করার সময় বাকিগুলি ম্লান করতে পারেন।

নেটওয়ার্ক অনুরোধের সারসংক্ষেপে সার্ভারের সময়

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

একটি নেটওয়ার্ক অনুরোধের সারাংশে 'সার্ভারের সময়' সারণী।

পারফরম্যান্স প্যানেল Server-Timing রেসপন্স হেডার হেডার থেকে ডেটা নেয়।

'গোপনীয়তা এবং নিরাপত্তা' বিভাগে কুকিজ ফিল্টার করুন

গোপনীয়তা এবং নিরাপত্তা > গোপনীয়তা > তৃতীয় পক্ষের কুকিজ বিভাগের টেবিলটিতে একটি ফিল্টার রয়েছে, যাতে আপনি আপনার আগ্রহের কুকিগুলি দ্রুত খুঁজে পেতে পারেন।

'তৃতীয় পক্ষের কুকিজ' টেবিলের ফিল্টার।

প্যানেল জুড়ে টেবিলে kB ইউনিটে আকার

একই প্রসঙ্গে ইউনিটগুলিকে একই রাখার জন্য, নেটওয়ার্ক এবং মেমোরি প্যানেলে টেবিল এবং পারফরম্যান্স > সারাংশে 1p / 3p টেবিল এখন kB তে সমস্ত আকার দেখায়। এটি আপনাকে MB বনাম kB বনাম B ইউনিটের উপর নজর রাখার পরিবর্তে একই কলামে এবং প্যানেল জুড়ে সংখ্যাগুলির সরাসরি তুলনা করতে দেয়।

একীকরণের আগে এবং পরে আকারের একক।

এলিমেন্টস > স্টাইলে অটোকমপ্লিট corner-shape এবং corner-*-shape সাপোর্ট করে।

এলিমেন্টস > স্টাইলস -এ অটোকম্পলিট এখন corner-shape এবং corner-*-shape প্রোপার্টিগুলির জন্য সংশ্লিষ্ট মানগুলি সুপারিশ করতে পারে।

'corner-shape' বৈশিষ্ট্যের জন্য স্বয়ংক্রিয়ভাবে সম্পূর্ণ হওয়ার বিকল্পগুলি।

ক্রোমিয়াম সমস্যা: 402346406 ।

পরীক্ষামূলক: DOM-এ উপাদান এবং বৈশিষ্ট্যের সমস্যাগুলি হাইলাইট করা

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

DOM ট্রিতে একটি DOM সমস্যা হাইলাইট করার আগে এবং পরে একটি টুলটিপ এবং সমস্যা প্যানেলের লিঙ্ক সহ।

এলিমেন্টস প্যানেল বর্তমানে <select> এর অবৈধ ডিসেন্ডেন্ট, অমিল ARIA সংজ্ঞা এবং অবৈধ ARIA অ্যাট্রিবিউট হাইলাইট করে।

ক্রোমিয়াম সমস্যা: 378738916 ।

বাতিঘর ১২.৫.০

লাইটহাউস প্যানেলটি এখন লাইটহাউস ১২.৫.০ চালিত।

সবচেয়ে উল্লেখযোগ্যভাবে, এই সংস্করণে legacy-javascript এখন esmodules এর পরিবর্তে Baseline ব্যবহার করে। পরিবর্তনগুলির সম্পূর্ণ তালিকা দেখুন।

DevTools-এ Lighthouse প্যানেল ব্যবহারের মূল বিষয়গুলি জানতে, Lighthouse: ওয়েবসাইটের গতি অপ্টিমাইজ করুন দেখুন।

ক্রোমিয়াম সমস্যা: 40543651 ।

বিবিধ হাইলাইটস

এই রিলিজে কিছু উল্লেখযোগ্য সংশোধন এবং উন্নতি রয়েছে:

  • পারফরম্যান্স > অন্তর্দৃষ্টি > নেটওয়ার্ক নির্ভরতা ট্রি : এখন নেটওয়ার্ক ট্রিতে ( 400708304 ) সমস্ত নেটওয়ার্ক অনুরোধের জন্য সময় দেখায়।
    • নেটওয়ার্ক নির্ভরতা ট্রি : এখন নেটওয়ার্ক ট্রিতে ( 400708304 ) সমস্ত নেটওয়ার্ক অনুরোধের জন্য সময় দেখায়।
  • অ্যানিমেশন : ক্যাপচার করা অ্যানিমেশন 400635410 এর কারণে মেমরি প্যানেলে বিচ্ছিন্ন উপাদানগুলি প্রদর্শিত হওয়ার কারণে একটি বাগ সংশোধন করা হয়েছে।
  • রেকর্ডার : এখন প্রথমবার রেকর্ডিং চালানোর সময় কোড পেস্ট করার মতো একই নিশ্চিতকরণ ডায়ালগ ব্যবহার করে।
  • স্তর : এখন নীচের স্ট্যাটাস বারে স্তরের মোট সংখ্যা এবং সমস্ত দৃশ্যমান স্তরের মোট মেমরি দেখায়।
  • মেমোরি : একজন ( 42203857 ) ব্যবহার না করে দুজন কর্মীর মধ্যে কাজ সমান্তরাল করে হিপ স্ন্যাপশট ইনিশিয়ালাইজেশনকে আরও উন্নত করা হয়েছে।
  • সমস্যা : এখন স্থানীয় নেটওয়ার্ক অ্যাক্সেস (LNA) CORS ত্রুটি ( 395895368 ) রিপোর্ট করে।
  • অ্যাক্সেসযোগ্যতা :
    • টুলটিপস : এখন ফোকাসের পরিবর্তে হটকি প্রেস করলে দেখা যাবে ( 396311936 )।
    • Elements > Styles : var() ফাংশনটি এখন কীবোর্ডের সাথে ইন্টারঅ্যাক্ট করা যেতে পারে, অর্থাৎ আপনি --custom-property নির্বাচন করতে পারেন এবং Enter টিপে এর লিঙ্ক টার্গেটে যেতে পারেন ( 401212692 )।

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

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

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

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

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

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