DevTools এ নতুন কি আছে (Chrome 78)

কেইস বাস্ক
Kayce Basques
X GitHub

অডিট প্যানেলে মাল্টি-ক্লায়েন্ট সাপোর্ট

আপনি এখন অডিট প্যানেলটি অন্যান্য DevTools বৈশিষ্ট্য যেমন রিকোয়েস্ট ব্লকিং এবং লোকাল ওভাররাইডের সাথে একত্রে ব্যবহার করতে পারেন।

উদাহরণস্বরূপ, ধরুন আপনার অডিট প্যানেল রিপোর্ট বলছে যে আপনার পৃষ্ঠার পারফরম্যান্স স্কোর 70 এবং আপনার সবচেয়ে বড় পারফরম্যান্স সুযোগগুলির মধ্যে একটি হল রেন্ডার-ব্লকিং রিসোর্সগুলি বাদ দেওয়া ।

প্রাথমিক পারফরম্যান্স স্কোর হল ৭০।

চিত্র ১. প্রাথমিক পারফরম্যান্স স্কোর।

প্রাথমিক প্রতিবেদনে বলা হয়েছে যে ৩টি রেন্ডার-ব্লকিং স্ক্রিপ্ট একটি সমস্যা।

চিত্র ২। প্রাথমিক প্রতিবেদনে বলা হয়েছে যে ৩টি রেন্ডার-ব্লকিং স্ক্রিপ্ট একটি সমস্যা।

এখন যেহেতু অডিট প্যানেলটি রিকোয়েস্ট ব্লকিংয়ের সাথে একসাথে ব্যবহার করা যেতে পারে, তাই আপনি প্রথমে রেন্ডার-ব্লকিং স্ক্রিপ্টগুলির রিকোয়েস্টগুলি ব্লক করে রেন্ডার-ব্লকিং স্ক্রিপ্টগুলি আপনার লোড পারফরম্যান্সকে কতটা প্রভাবিত করে তা দ্রুত পরিমাপ করতে পারেন:

সমস্যাযুক্ত স্ক্রিপ্টগুলি ব্লক করতে অনুরোধ ব্লকিং ট্যাব ব্যবহার করা।

চিত্র ৩. সমস্যাযুক্ত স্ক্রিপ্টগুলি ব্লক করতে অনুরোধ ব্লকিং ট্যাব ব্যবহার করা।

এবং তারপর আবার পৃষ্ঠাটি অডিট করা হচ্ছে:

রিকোয়েস্ট ব্লকিং সক্ষম করার পর পারফরম্যান্স স্কোর ৯৭-এ উন্নীত হয়েছে।

চিত্র ৪। সমস্যাযুক্ত স্ক্রিপ্টগুলি ব্লক করার পরে পারফরম্যান্স স্কোর ৯৭-এ উন্নীত হয়েছে।

আপনি প্রতিটি স্ক্রিপ্ট ট্যাগে async অ্যাট্রিবিউট যোগ করার জন্য লোকাল ওভাররাইড ব্যবহার করতে পারেন, তবে "আমরা এটি পাঠকের জন্য একটি অনুশীলন হিসাবে রেখে দেব।" ভিডিও প্রদর্শনের জন্য এই টুইটটি দেখুন।

ক্রোমিয়াম সমস্যা #৯৯১৯০৬

পেমেন্ট হ্যান্ডলার ডিবাগিং

অ্যাপ্লিকেশন প্যানেলের ব্যাকগ্রাউন্ড সার্ভিসেস বিভাগটি এখন পেমেন্ট হ্যান্ডলার ইভেন্টগুলিকে সমর্থন করে।

  1. অ্যাপ্লিকেশন প্যানেলে যান।
  2. পেমেন্ট হ্যান্ডলার ফলকটি খুলুন।

  3. রেকর্ড এ ক্লিক করুন। DevTools ৩ দিনের জন্য পেমেন্ট হ্যান্ডলার ইভেন্ট রেকর্ড করে, এমনকি DevTools বন্ধ থাকলেও।

    পেমেন্ট হ্যান্ডলার ইভেন্ট রেকর্ড করা।

    চিত্র ৫। পেমেন্ট হ্যান্ডলারের ইভেন্ট রেকর্ড করা।

  4. আপনার পেমেন্ট হ্যান্ডলার ইভেন্টগুলি যদি অন্য কোনও অরিজিনে ঘটে তবে অন্যান্য ডোমেন থেকে ইভেন্টগুলি দেখান সক্ষম করুন।

  5. পেমেন্ট হ্যান্ডলার ইভেন্ট ট্রিগার করার পরে, ইভেন্ট সম্পর্কে আরও জানতে ইভেন্টের সারিতে ক্লিক করুন।

    একটি পেমেন্ট হ্যান্ডলার ইভেন্ট দেখা।

    চিত্র ৬। একটি পেমেন্ট হ্যান্ডলার ইভেন্ট দেখা।

ক্রোমিয়াম সমস্যা #৯৮০২৯১

অডিট প্যানেলে লাইটহাউস ৫.২

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

লাইটহাউস রিপোর্ট UI-তে 'তৃতীয় পক্ষের ব্যবহার' নিরীক্ষার একটি স্ক্রিনশট।

চিত্র ৭। তৃতীয় পক্ষের ব্যবহার নিরীক্ষা।

ক্রোমিয়াম সমস্যা #৭৭২৫৫৮

পারফরম্যান্স প্যানেলে সবচেয়ে বড় কন্টেন্টফুল পেইন্ট

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

সময় বিভাগে LCP মার্কার।

চিত্র ৮। সময় বিভাগে LCP মার্কার।

LCP এর সাথে সম্পর্কিত DOM নোড হাইলাইট করতে:

  1. সময় বিভাগে LCP মার্কারে ক্লিক করুন।

  2. ভিউপোর্টে নোডটি হাইলাইট করতে সারাংশ ট্যাবে সম্পর্কিত নোডের উপর কার্সার রাখুন।

    সারাংশ ট্যাবের সম্পর্কিত নোড বিভাগ।

    চিত্র ৯। সারাংশ ট্যাবের সম্পর্কিত নোড বিভাগ।

  3. DOM Tree তে Related Node নির্বাচন করতে ক্লিক করুন।

প্রধান মেনু থেকে DevTools সমস্যা ফাইল করুন

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

সাহায্য > DevTools সমস্যা রিপোর্ট করুন।" width="800" height="604">

চিত্র ১০. প্রধান মেনু > সাহায্য > একটি DevTools সমস্যা রিপোর্ট করুন ।

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

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

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

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

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

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