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

Sofia Emelianova

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

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

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

কর্মক্ষমতা প্যানেল আপডেট

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

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

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

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

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

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

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

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

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

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

টাইমিংস ট্র্যাকে বিশদ বিবরণ

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

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

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

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

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

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

চেক_বক্সের কর্মক্ষমতা ক্যাপচার সেটিং-এ সাংখ্যিক মান অন্তর্ভুক্ত করা হয়েছে, ডিফল্টরূপে চালু করা হয়েছে এবং মেমরি প্যানেল থেকে সরানো হয়েছে।

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

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

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

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

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

নিম্নলিখিত ভিডিওতে কর্ম উভয় বৈশিষ্ট্য দেখুন.

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

বাতিঘর 12.1.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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