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

Sofia Emelianova

জেমিনির কনসোল ইনসাইটগুলি বেশিরভাগ ইউরোপীয় দেশে লাইভ হচ্ছে

এই সংস্করণটি বেশিরভাগ ইউরোপীয় দেশে জেমিনির কনসোল অন্তর্দৃষ্টির সমর্থন নিয়ে আসে।

আপনি যদি সেই দেশগুলির মধ্যে একটিতে থাকেন, তাহলে আপনি এখন Gemini কে Console- এ অন্তর্দৃষ্টি প্রদান করতে বলতে পারেন, যাতে আপনি ত্রুটি এবং সতর্কতাগুলি আরও ভালভাবে বুঝতে পারেন।

পারফর্ম্যান্স প্যানেল আপডেট

এই আপডেটটি পারফরম্যান্স প্যানেলে কিছু উন্নতি এনেছে।

উন্নত নেটওয়ার্ক ট্র্যাক

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

নেটওয়ার্ক ট্র্যাক এখন নিম্নলিখিত কাজ করে:

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

অতিরিক্তভাবে, আপনি এখন ট্র্যাকের অনুরোধে অথবা সারাংশ ট্যাবে এর URL-এ ডান-ক্লিক করতে পারেন এবং ড্রপ-ডাউন মেনু থেকে "রিভিল ইন নেটওয়ার্ক প্যানেল" নির্বাচন করতে পারেন। DevTools আপনাকে নেটওয়ার্ক প্যানেলে নিয়ে যাবে এবং টেবিলে আপনি যে অনুরোধটি খুঁজছেন তা হাইলাইট করবে।

এক্সটেনসিবিলিটি API ব্যবহার করে পারফর্ম্যান্স ডেটা কাস্টমাইজ করুন

এই সংস্করণটি পারফরম্যান্স প্যানেলে এক্সটেনশন ডেটার জন্য সমর্থন নিয়ে আসে। আপনি এখন পারফরম্যান্স ট্রেসে ইভেন্ট এবং টুলটিপ বর্ণনা সহ কাস্টম ট্র্যাক, সারাংশ ট্যাবে বিশদ এবং আরও অনেক কিছু যোগ করতে পারেন। এই বৈশিষ্ট্যটি কাস্টম ইন্সট্রুমেন্টেশন সহ ফ্রেমওয়ার্ক, লাইব্রেরি এবং জটিল অ্যাপ্লিকেশনের ডেভেলপারদের জন্য কার্যকর হতে পারে।

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

সংক্ষেপে, পারফরম্যান্স ডেটা প্রসারিত করার জন্য, performance.measure() বা performance.mark() API কলের measureOption.detail বা markOption.detail প্যারামিটারগুলিতে একটি নির্দিষ্ট কাঠামো পাস করুন।

টাইমিংস ট্র্যাকে বিস্তারিত তথ্য

আপনি যদি একজন ওয়েব ডেভেলপার হন যিনি টাইমিং ট্র্যাকে এন্ট্রি যোগ করার জন্য পারফরম্যান্স API-এর ইউজার টাইমিং অংশ ব্যবহার করেন, তাহলে আপনি এখন mark অ্যান্ড measure ইভেন্ট এবং তাদের টাইমস্ট্যাম্পের জন্য সারাংশ ট্যাবে আপনার ইচ্ছামত বিবরণ দেখতে পাবেন।

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

নেটওয়ার্ক প্যানেলে তালিকাভুক্ত সমস্ত অনুরোধ কপি করুন

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

নামযুক্ত HTML ট্যাগ এবং কম বিশৃঙ্খলা সহ দ্রুত হিপ স্ন্যাপশট

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

ক্যাপচার সেটিংয়ে check_box Include সংখ্যাসূচক মানগুলির কর্মক্ষমতা দ্রুত করা হয়েছে, ডিফল্টরূপে চালু করা হয়েছে এবং মেমরি প্যানেল থেকে সরানো হয়েছে।

স্ন্যাপশটে অভ্যন্তরীণ বস্তুগুলিকে ম্যানুয়ালি অন্তর্ভুক্ত করতে, প্রথমে সেটিংস > পরীক্ষা > চেকবক্স চালু করুন। হিপ স্ন্যাপশটে অভ্যন্তরীণ বস্তুগুলি প্রকাশ করার বিকল্পটি দেখান , তারপর চেকবক্স চালু করুন । মেমরি প্যানেলে অভ্যন্তরীণ বস্তুগুলি প্রকাশ করুন (...) ।

ক্রোমিয়াম সমস্যা: 41490040 , 343341610 , 42203857 ।

অ্যানিমেশন ক্যাপচার করতে এবং @keyframes লাইভ সম্পাদনা করতে অ্যানিমেশন প্যানেল খুলুন।

অ্যানিমেশন প্যানেল এখন নিম্নলিখিত কাজগুলি করে:

• প্যানেলটি খোলার সময় ইতিমধ্যেই চলমান অ্যানিমেশনগুলি ক্যাপচার করে, তাই অ্যানিমেশনগুলি ক্যাপচার করার জন্য আপনাকে পৃষ্ঠাটি রিফ্রেশ করতে হবে না।
• @keyframes এর লাইভ এডিটিং সমর্থন করে। অন্য কথায়, Elements > Styles এর @keyframes বিভাগ সম্পাদনা করার সাথে সাথে ক্যাপচার করা অ্যানিমেশন আপডেট করে।

পরবর্তী ভিডিওতে উভয় বৈশিষ্ট্যের কার্যকারিতা দেখুন।

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

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

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

এই আপডেটে বেশ কিছু পরিবর্তন আনা হয়েছে, যার মধ্যে রয়েছে পুরানো ফার্স্ট মিনিংফুল পেইন্ট (FMP) মেট্রিক অপসারণ করে লার্জেস্ট কন্টেন্টফুল পেইন্ট (LCP) এর পক্ষে আনা। পরিবর্তনগুলির সম্পূর্ণ তালিকা দেখুন।

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

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

অ্যাক্সেসযোগ্যতা

এই সংস্করণে নিম্নলিখিত অ্যাক্সেসিবিলিটি উন্নতি রয়েছে:

• লাইভ এক্সপ্রেশনের সম্পাদনা ক্ষেত্রে স্বয়ংক্রিয়ভাবে সম্পন্ন হওয়ার পরে ট্যাব টিপলে ফোকাসটি পরবর্তী ফোকাস পয়েন্টে চলে যায়। পূর্বে, এটি টেক্সটকে ইন্ডেন্ট করত।
• একটি রিসাইজারে ক্লিক করলে এটির উপর ফোকাস পড়ে, তাই আপনি ডান এবং বাম তীর কী দিয়ে এটি সরাতে পারেন।
• একটি স্ক্রিন রিডার এখন সোর্সে "Add watch expression edit" ফিল্ড ঘোষণা করে এবং কীবোর্ড দিয়ে নেভিগেট করার সময় "Delete watch expression" এখন স্পষ্টভাবে দৃশ্যমান হয়।

ক্রোমিয়াম সমস্যা: 349939551 , 343942719 , 349334243 , 349428374 ।

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

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

• কর্মক্ষমতা :
  • নেটওয়ার্ক ট্র্যাক: ওয়েবসকেট সংযোগ ইভেন্ট 331351979 যোগ করা হয়েছে।
  • পারফরম্যান্স প্যানেল এখন ব্যস্ততম প্রধান থ্রেড কার্যকলাপ 345599356 তে সঠিকভাবে জুম করে।
  • ভুল ট্রেস ফাইল টাইপ আপলোড করার ক্ষেত্রে একটি বাগ সংশোধন করা হয়েছে, এটি এখন সঠিক .json বা .gz 349864878 ছাড়া অন্য কোনও টাইপ আপলোড করা থেকে বিরত রাখে।
• উপাদান > শৈলী :
  • দৈর্ঘ্যের বৈশিষ্ট্যের মানগুলির ইউনিট ড্রপ-ডাউন এখন 41495618 অবচিত হয়েছে।
  • নেস্টেড at-rules 346732737 এর জন্য স্থির সমাধানকারী সক্রিয় বৈশিষ্ট্য।
  • নিষ্ক্রিয় @position-try বিভাগগুলি এখন ধূসর হয়ে গেছে 40246493 ।
• প্রয়োগ :
  • কুকিজ : 348683488 এ রিফ্রেশ ক্লিক করলে কুকিজ রিফ্রেশ না করার একটি বাগ ঠিক করা হয়েছে।
  • স্থানীয় সঞ্চয়স্থান : আপনি এখন বর্ণানুক্রমিকভাবে কী অনুসারে সাজাতে পারেন 341129585 ।

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

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

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

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

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

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

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