DevTools, Chrome 129-এ নতুন কী রয়েছে৷

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

রেকর্ডার ফায়ারফক্সের জন্য পাপেটিয়ারে রপ্তানি সমর্থন করে

WebDriver BiDi সাপোর্টের অংশ হিসেবে, রেকর্ডার প্যানেল এখন ফায়ারফক্সের জন্য Puppeteer-এ রেকর্ডিং রপ্তানি করতে পারে। Puppeteer-এর Firefox-এর সমর্থনের মাধ্যমে, আপনি এখন Chrome DevTools রেকর্ডার প্যানেল ব্যবহার করে ব্যবহারকারীর প্রবাহ রেকর্ড করতে পারেন, রপ্তানি করতে পারেন এবং Firefox এবং Chrome উভয়ের বিরুদ্ধেই চালাতে পারেন।

রেকর্ডারের এক্সপোর্ট মেনুতে 'পাপিটিয়ার ফর ফায়ারফক্স' বিকল্পটি যোগ করার আগে এবং পরে।

আরও তথ্যের জন্য, WebDriver BiDi - ক্রস-ব্রাউজার অটোমেশনের ভবিষ্যৎ দেখুন।

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

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

লাইভ মেট্রিক্স পর্যবেক্ষণ

পারফরম্যান্স প্যানেল এখন আপনাকে আপনার স্থানীয় মেশিনে এবং Chrome UX রিপোর্ট থেকে ফিল্ড ডেটার উপর ভিত্তি করে Core Web Vitals সম্পর্কে লাইভ পর্যবেক্ষণ দেখাবে। এটি আপনাকে পারফরম্যান্সের ট্রেস ক্যাপচার না করেই পারফরম্যান্সের সমস্যাগুলি সনাক্ত করতে এবং আপনার ব্যবহারকারীদের অভিজ্ঞতার সাথে আপনার অভিজ্ঞতা কতটা প্রতিনিধিত্বমূলক তা বুঝতে সাহায্য করবে।

LCP এবং CLS-এ লাইভ পর্যবেক্ষণ দেখতে, পারফরম্যান্স প্যানেল খুলুন। INP দেখতে, একটি পৃষ্ঠায় একটি ইন্টারঅ্যাকশন করুন। Chrome UX রিপোর্ট থেকে সমষ্টিগত ব্যবহারকারীর অভিজ্ঞতার সাথে আপনার স্থানীয় মেট্রিক্সের তুলনা করতে, ফিল্ড ডেটা যোগ করুন: ডানদিকে ফিল্ড ডেটা বিভাগে, Set up এ ক্লিক করুন, এবং ডায়ালগ উইন্ডোতে, Ok এ ক্লিক করুন। আরও তথ্য সহ একটি টুলটিপ দেখতে একটি মেট্রিক মানের উপর কার্সার রাখুন।

পারফরম্যান্স প্যানেলে মেট্রিক্স সম্পর্কে লাইভ পর্যবেক্ষণ।

পারফরম্যান্স প্যানেলটি উন্নত করা যেতে পারে এমন মেট্রিক্স হাইলাইট করে এবং আপনার স্থানীয় অভিজ্ঞতাকে আপনার ব্যবহারকারীদের অভিজ্ঞতার সাথে কীভাবে মেলানো যায় সে সম্পর্কে অন্তর্দৃষ্টি এবং পরামর্শ প্রদান করে। উদাহরণস্বরূপ, আপনি CPU বা নেটওয়ার্ক থ্রোটল করতে চাইতে পারেন, যা আপনি ডানদিকে রেকর্ডিং সেটিংস বিভাগে একই স্ক্রিনে করতে পারেন।

পারফরম্যান্স প্যানেলের অনুসন্ধান বাক্সটি এখন নেটওয়ার্ক ট্র্যাক জুড়েও কাজ করে, তাই আপনি Ctrl / Cmd + F শর্টকাট ব্যবহার করে অনুরোধগুলি খুঁজে পেতে পারেন।

অনুসন্ধানের মাধ্যমে একটি নেটওয়ার্ক অনুরোধ পাওয়া গেছে।

performance.mark এবং performance.measure কলের স্ট্যাক ট্রেস দেখুন

Summary ট্যাবে, Performance প্যানেল এখন আপনাকে performance.mark এবং performance.measure কলের স্ট্যাক ট্রেস দেখাবে। আপনি আপনার কাস্টম ডেটা দিয়ে পারফর্ম্যান্স ট্রেস প্রসারিত করতে এই কলগুলি ব্যবহার করতে পারেন।

performance.mark এবং performance.measure কলের জন্য স্ট্যাক ট্রেস দেখানোর আগে এবং পরে।

আরও তথ্যের জন্য, এক্সটেনসিবিলিটি API দিয়ে আপনার কর্মক্ষমতা ডেটা কাস্টমাইজ করুন দেখুন।

অটোফিল প্যানেলে পরীক্ষার ঠিকানা ডেটা ব্যবহার করুন

অটোফিল প্যানেল এখন ঠিকানা ফর্মের জন্য পরীক্ষার ডেটা সরবরাহ করে। এটি আপনার ওয়েবসাইটে ঠিকানা ফর্মগুলি পরীক্ষা করা সহজ করে তোলে যখন আপনার Chrome এ কোনও ঠিকানা সংরক্ষিত থাকে না বা আপনি কোনও অতিথি প্রোফাইল ব্যবহার করেন।

পরীক্ষার ডেটা দিয়ে ঠিকানা ফর্মগুলি স্বয়ংক্রিয়ভাবে পূরণ করতে, অটোফিল প্যানেলটি খুলুন, চালু করুন স্বয়ংক্রিয়ভাবে পূরণ মেনুতে পরীক্ষার ঠিকানাগুলি দেখান , আপনার পৃষ্ঠায় ফাইল করা একটি ঠিকানা ফর্মে ডান-ক্লিক করুন এবং বিকাশকারী সরঞ্জাম মেনু থেকে বিকল্পগুলির মধ্যে একটি নির্বাচন করুন।

ঠিকানা ফর্ম ফিল্ড ড্রপ-ডাউন মেনুতে অটোফিল টেস্ট ডেটা বিকল্পগুলি যোগ করার আগে এবং পরে।

এলিমেন্ট প্যানেলের উন্নতি

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

নির্দিষ্ট উপাদানের জন্য আরও রাজ্য জোর করুন

Elements > Styles- এর :hov বিভাগটি এখন আপনাকে আরও ছদ্ম-ক্লাস প্রদান করে যা আপনি জোরপূর্বক সক্ষম করতে পারেন। নতুন বিকল্পগুলির সেটটি Force specific element state ড্রপ-ডাউনের অধীনে রয়েছে এবং আপনার নির্বাচিত নির্দিষ্ট উপাদানগুলির জন্য নির্দিষ্ট। উদাহরণস্বরূপ, <label> এবং <input> এর বিভিন্ন বিকল্পের সেট রয়েছে।

নির্দিষ্ট উপাদান অবস্থা জোর করার ক্ষমতা যোগ করার আগে এবং পরে।

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

এলিমেন্টস > স্টাইলস এখন আরও গ্রিড বৈশিষ্ট্য স্বয়ংক্রিয়ভাবে সম্পন্ন করে

গ্রিড এরিয়া এবং লাইনের নাম সম্পাদনা করার সময় এখন এলিমেন্টস > স্টাইলস ট্যাবটি স্বয়ংক্রিয়ভাবে সম্পূর্ণ করার বিকল্প প্রদান করে।

গ্রিড লাইনের নাম সম্পাদনা করার সময় স্বয়ংক্রিয়ভাবে সম্পূর্ণ হওয়ার আগে এবং পরে বিকল্পগুলি যোগ করা হবে।

আরও তথ্যের জন্য, বিশেষ করে CSS গ্রিড লেআউট এবং এর Show line names বিভাগটি পরিদর্শন করুন।

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

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

এই আপডেটে বেশ কিছু বাগ সংশোধন করা হয়েছে। পরিবর্তনের সম্পূর্ণ তালিকা দেখুন।

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

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

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

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

  • উপাদান :
    • ওভারলোডেড দৈর্ঘ্যের বৈশিষ্ট্য 357020613 এর ভুল রেন্ডারিং সহ একটি বাগ সংশোধন করা হয়েছে।
    • স্পেসিফিকেশন অনুসারে position-try-options নাম পরিবর্তন করে position-try-fallbacks করা হয়েছে।
    • একটি পৃষ্ঠা রিফ্রেশ এখন নির্বাচিত নোডটিকে পুনরুদ্ধার করে, এমনকি একটি আইফ্রেম 40719145 এর ভিতরেও।
    • অ্যাক্সেসিবিলিটি : স্ক্রিন রিডাররা এখন " Show element" বোতামটি 357382536 ঘোষণা করবে।
  • পারফরম্যান্স > নেটওয়ার্ক : রিভিল ইন নেটওয়ার্ক মেনু অপশনটি এখন প্রাসঙ্গিক নেটওয়ার্ক অনুরোধের হেডার ট্যাবটি খুলবে।
  • কনসোল :
    • C/C++ এক্সটেনশনের ত্রুটিগুলি এখন জোর করে কনসোল 356320158 খুলবে না।
    • 40743793 পজ করার সময় মূল্যায়ন না করার কারণে একটি JS মডিউলে import.meta এর একটি বাগ ঠিক করা হয়েছে।
  • মেমোরি : 327337527 রিটেইনার উপেক্ষা করার পরেও রিস্টোর ইগনোর করা রিটেইনারগুলি প্রদর্শিত হচ্ছে না এমন একটি বাগ সংশোধন করা হয়েছে।

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

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

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

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

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

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