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

Sofia Emelianova

কর্মক্ষমতা প্যানেল উন্নতি

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

নতুন কর্মক্ষমতা অন্তর্দৃষ্টি

কর্মক্ষমতা > অন্তর্দৃষ্টি ট্যাব নতুন অন্তর্দৃষ্টি পায়:

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

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

আপনি এখন সারাংশ , বটম-আপ , কল ট্রি , এবং ইভেন্ট লগ টেবিলের আইটেমগুলিতে ক্লিক করতে পারেন সংশ্লিষ্ট ইভেন্টগুলিকে ট্রেসে হাইলাইট রাখতে এবং পারফরম্যান্স ট্রেস ব্রাউজ করার সাথে সাথে বাকিগুলিকে ম্লান করতে পারেন৷

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

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

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

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

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

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

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

স্বয়ংসম্পূর্ণ উপাদান > শৈলীতে corner-shape এবং corner-*-shape সমর্থন করে

এলিমেন্টস > শৈলীতে স্বয়ংসম্পূর্ণ এখন corner-shape এবং corner-*-shape বৈশিষ্ট্যগুলির জন্য সংশ্লিষ্ট মানগুলি সুপারিশ করতে পারে।

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

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

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

এলিমেন্টস প্যানেল বর্তমানে <select> এর অবৈধ বংশধর, অমিল ARIA সংজ্ঞা এবং অবৈধ ARIA বৈশিষ্ট্যগুলিকে হাইলাইট করে৷

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

বাতিঘর 12.5.0

Lighthouse প্যানেল এখন Lighthouse 12.5.0 চালায়।

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

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

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

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

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

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

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

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

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

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

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

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

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