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

Sofia Emelianova

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

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

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

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

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

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

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

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

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

নেটওয়ার্ক ট্র্যাক অনুসন্ধান অনুরোধ

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

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

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

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

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

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

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

উপাদান প্যানেল উন্নতি

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

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

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

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

উপাদান > শৈলী এখন আরও গ্রিড বৈশিষ্ট্য স্বয়ংসম্পূর্ণ করে

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

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

বাতিঘর 12.2.0

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

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

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

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

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

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

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

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

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

Chrome DevTools টিমের সাথে যোগাযোগ করা হচ্ছে

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

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

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

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