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

Kayce Basques

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

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

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

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

চিত্র 1. প্রাথমিক কর্মক্ষমতা স্কোর।

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

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

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

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

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

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

অনুরোধ ব্লকিং সক্ষম করার পরে পারফরম্যান্স স্কোর 97 এ উন্নত হয়েছে।

চিত্র 4. সমস্যাযুক্ত স্ক্রিপ্টগুলি ব্লক করার পরে পারফরম্যান্স স্কোর 97 এ উন্নীত হয়েছে।

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

ক্রোমিয়াম সমস্যা #991906

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

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

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

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

    রেকর্ডিং পেমেন্ট হ্যান্ডলার ঘটনা.

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

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

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

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

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

ক্রোমিয়াম সমস্যা #980291

অডিট প্যানেলে বাতিঘর 5.2

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

Lighthouse রিপোর্ট UI-তে 'থার্ড-পার্টি ইউসেজ' অডিটের একটি স্ক্রিনশট।

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

Chromium সমস্যা #772558

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

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

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

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

LCP এর সাথে যুক্ত DOM নোড হাইলাইট করতে:

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

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

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

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

  3. DOM ট্রিতে এটি নির্বাচন করতে সম্পর্কিত নোডটিতে ক্লিক করুন।

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

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

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

চিত্র 10. প্রধান মেনু > সাহায্য > একটি DevTools সমস্যা প্রতিবেদন করুন ।

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

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

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

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

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

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

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