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

Sofia Emelianova

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

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

পারফরম্যান্সে প্রোফাইল এবং ফাংশন কলের জন্য অরিজিন এবং স্ক্রিপ্ট লিঙ্ক

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

অতিরিক্তভাবে, নেটওয়ার্ক এবং প্রধান ট্র্যাকগুলি এখন ইভেন্টগুলির উপর কার্সার রাখলে আপনাকে টুলটিপগুলিতে তৃতীয় পক্ষের নাম, যদি থাকে, দেখায়।

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

'পর্যায়ক্রমে LCP' ফিল্ড ডেটা সাপোর্ট

ফিল্ড ডেটা চালু থাকায়, পারফরম্যান্স > ইনসাইটস > LCP বাই ফেজ ইনসাইট এখন আপনাকে Chrome UX রিপোর্ট থেকে ৭৫তম পার্সেন্টাইল ছবির সময় একটি অতিরিক্ত টেবিলে দেখাবে, যাতে আপনি ইনসাইট থেকে সরাসরি সময় তুলনা করতে পারেন।

'নেটওয়ার্ক নির্ভরতা বৃক্ষ' অন্তর্দৃষ্টি

পারফরম্যান্স > ইনসাইটস ট্যাবটি তার সংগ্রহে নতুন নেটওয়ার্ক নির্ভরতা ট্রি ইনসাইট যোগ করে। ইনসাইটটি আপনাকে বলে যে আপনি কি গুরুত্বপূর্ণ অনুরোধগুলিকে চেইন করে রেখেছেন, যা সুপারিশ করা হয় না। নেটওয়ার্ক ট্র্যাকে হাইলাইট করা দেখতে ইনসাইটটিতে তালিকাভুক্ত অনুরোধগুলির উপর কার্সার রাখুন।

আরও জানতে, গুরুত্বপূর্ণ অনুরোধগুলিকে চেইন করা এড়িয়ে চলুন দেখুন।

সবচেয়ে ভারী স্ট্যাক হাইলাইটিং

এখন পারফরম্যান্স প্যানেলটি মেইন ট্র্যাকের আইটেমগুলিকে হাইলাইট করে যখন আপনি কল ট্রি অথবা বটম-আপ > হেভিয়েস্ট স্ট্যাক সাইডবারে তাদের উপর কার্সার রাখেন এবং বাকি অংশটি ম্লান করে দেন। এটি আপনাকে কল স্ট্যাকের মধ্যে সবচেয়ে বেশি সময় নেয় এমন নেস্টেড আইটেমগুলি দৃশ্যত খুঁজে পেতে দেয়।

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

এলিমেন্টস প্যানেলে এখন ডিফল্টরূপে পূর্ণ-পৃষ্ঠা অ্যাক্সেসিবিলিটি ট্রি ভিউ চালু আছে।

পূর্বে, আপনি Elements > Accessibility ট্যাবে একটি পৃথক অ্যাক্সেসিবিলিটি ট্রি ব্রাউজ করতে পারতেন। এখন আপনি Elements প্যানেলে DOM ট্রির উপরের ডানদিকে কোণায় accessibility_new Switch to Accessibility Tree view বোতামে ক্লিক করে DOM এবং পূর্ণ-পৃষ্ঠা অ্যাক্সেসিবিলিটি ট্রিগুলির মধ্যে এদিক-ওদিক স্যুইচ করতে পারেন, যাতে আপনি তাদের এবং তাদের সম্পর্ক আরও সহজে অন্বেষণ করতে পারেন।

অ্যাক্সেসিবিলিটি ট্রি আপনাকে পরীক্ষা করতে দেয় যে সহায়ক প্রযুক্তি আপনার কন্টেন্ট কীভাবে দেখে এবং আপনাকে ARIA বৈশিষ্ট্য এবং DOM নোডের গণনাকৃত অ্যাক্সেসিবিলিটি বৈশিষ্ট্যগুলি দেখায়। আরও জানতে, Chrome DevTools-এ সম্পূর্ণ অ্যাক্সেসিবিলিটি ট্রি দেখুন।

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

বিভিন্ন প্যানেলের জন্য উন্নত খালি অবস্থা

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

'আস্ক এআই' বিকল্পটি মেনুর নীচে সরানো হয়েছে

"আস্ক এআই" বিকল্পটি এখন ড্রপ-ডাউন মেনুর নীচে, উপরে না থেকে।

crbug.com/364805393 এ AI সহায়তা প্যানেলে আপনার মতামত জানাতে দ্বিধা করবেন না।

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

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

এই সংস্করণটি কিছু পারফরম্যান্স অডিটকে পাস করা অডিট বিভাগে লুকিয়ে রাখার পরিবর্তে পাসিং শর্তে তথ্যবহুল হিসেবে চিহ্নিত করে। পরিবর্তনের সম্পূর্ণ তালিকা দেখুন।

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

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

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

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

• পারফরম্যান্স > সারাংশ : দুটি মোট সময় এবং স্বয়ং সময়রেখাকে একটি এক-লাইনের সময়কাল দিয়ে প্রতিস্থাপন করা হয়েছে যা বন্ধনীতে (self time) ও দেখায়, যদি থাকে ( crbug.com/395572753 )।
• সমস্যা : নতুন সমস্যার ধরণ যোগ করা হয়েছে: <select> অ্যাক্সেসিবিলিটি ট্রিতে সমস্যা এবং SRI মেসেজ সিগনেচার ত্রুটি যা নেটওয়ার্ক পরিষেবায় পার্সিং বা যাচাইকরণের সময় ঘটে ( crbug.com/381044049 , crbug.com/347890366 )।
• অ্যাক্সেসিবিলিটি : এলিমেন্টস > স্টাইলস ট্যাব এখন কীবোর্ড নেভিগেশন ব্যবহার করে আপনি যে উপাদানগুলির মধ্য দিয়ে যাবেন তার রূপরেখা দেখায় ( crbug.com/396311936 )।
• এলিমেন্টস : <select> এর সমস্যাগুলি এখন সমর্থিত এবং একটি তরঙ্গায়িত আন্ডারলাইন ( crbug.com/378738916 ) দিয়ে হাইলাইট করা হয়েছে।
• নেটওয়ার্ক : 'ওভাররাইড ডট' এবং কুকি সতর্কতা আইকনগুলি এখন ট্যাব নামের ডানদিকে, বাম দিকে ( crbug.com/390556283 ) দেখানো হয়।

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

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

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

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

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

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

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