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

জেসলিন ইয়েন

JSON ফাইল হিসেবে রেকর্ড করা ব্যবহারকারীর প্রবাহ আমদানি এবং রপ্তানি করুন

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

উদাহরণস্বরূপ, এই JSON ফাইলটি ডাউনলোড করুন। আপনি এটি আমদানি বোতাম দিয়ে আমদানি করতে পারেন এবং ব্যবহারকারী প্রবাহ পুনরায় চালাতে পারেন ।

তা ছাড়াও, আপনি রেকর্ডিংটি এক্সপোর্টও করতে পারেন। ব্যবহারকারীর প্রবাহ রেকর্ড করার পরে, এক্সপোর্ট বোতামে ক্লিক করুন। ৩টি এক্সপোর্ট অপশন রয়েছে:

  • JSON ফাইল হিসেবে রপ্তানি করুন । JSON ফাইল হিসেবে রেকর্ডিংটি ডাউনলোড করুন।
  • @puppeteer/replay স্ক্রিপ্ট হিসেবে রপ্তানি করুন । Puppeteer Replay স্ক্রিপ্ট হিসেবে রেকর্ডিংটি ডাউনলোড করুন।
  • পাপেটিয়ার স্ক্রিপ্ট হিসেবে রপ্তানি করুন । পাপেটিয়ার স্ক্রিপ্ট হিসেবে রেকর্ডিং ডাউনলোড করুন।

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

রেকর্ডার প্যানেলে রপ্তানির বিকল্পগুলি

ক্রোমিয়াম সমস্যা: ১২৫৭৪৯৯

স্টাইলস প্যানে ক্যাসকেড স্তরগুলি দেখুন

ক্যাসকেড লেয়ারগুলি স্টাইল-স্পেসিফিকেশন দ্বন্দ্ব প্রতিরোধ করার জন্য আপনার CSS ফাইলগুলির আরও স্পষ্ট নিয়ন্ত্রণ সক্ষম করে। এটি বিশেষ করে বৃহৎ কোডবেস, ডিজাইন সিস্টেম এবং অ্যাপ্লিকেশনগুলিতে তৃতীয় পক্ষের স্টাইল পরিচালনা করার সময় কার্যকর।

এই উদাহরণে , 3টি ক্যাসকেড স্তর সংজ্ঞায়িত করা হয়েছে: page , component এবং base । স্টাইলস ফলকে, আপনি প্রতিটি স্তর এবং এর শৈলী দেখতে পারেন।

স্তরের ক্রম দেখতে স্তরের নামের উপর ক্লিক করুন। page স্তরটির সর্বোচ্চ নির্দিষ্টতা রয়েছে, তাই box পটভূমি সবুজ।

স্টাইলস প্যানে ক্যাসকেড স্তরগুলি দেখুন

ক্রোমিয়াম সমস্যা: ১২৪০৫৯৬

hwb() রঙ ফাংশনের জন্য সমর্থন

আপনি এখন DevTools-এ HWB রঙের ফর্ম্যাট দেখতে এবং সম্পাদনা করতে পারবেন।

স্টাইলস প্যানে, Shift কী ধরে রাখুন এবং রঙের বিন্যাস পরিবর্তন করতে যেকোনো রঙের প্রিভিউতে ক্লিক করুন। HWB রঙের বিন্যাস যোগ করা হয়েছে।

বিকল্পভাবে, আপনি কালার পিকারে কালার ফরম্যাট HWB তে পরিবর্তন করতে পারেন।

hwb() রঙের ফাংশন

ব্যক্তিগত সম্পত্তির প্রদর্শন উন্নত করা হয়েছে

DevTools এখন সঠিকভাবে ব্যক্তিগত অ্যাক্সেসর মূল্যায়ন করে এবং প্রদর্শন করে। পূর্বে, আপনি কনসোল এবং সোর্স প্যানেলে ব্যক্তিগত অ্যাক্সেসর দিয়ে ক্লাস প্রসারিত করতে পারতেন না।

কনসোলে ব্যক্তিগত সম্পত্তি

ক্রোমিয়াম সমস্যা: 1296855 , https://crbug.com/1303407

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

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

  • ব্যাক/ফরোয়ার্ড ক্যাশে এখন সেই এক্সটেনশন আইডি প্রদর্শন করে যা উপস্থিত থাকাকালীন bfcache ব্লক করেছিল। ( 1284548 )
  • অ্যারের মতো বস্তু, CSS ক্লাসের নাম, map.get এবং HTML ট্যাগের জন্য স্থির স্বয়ংসম্পূর্ণতা সমর্থন। ( 1297101 , 1297491 , 1293807 , 1296983 )
  • শব্দের উপর ডাবল-ক্লিক করে অটোকমপ্লিট পূর্বাবস্থায় ফেরানোর সময় ভুল হাইলাইটগুলি ঠিক করা হয়েছে। ( 1298437 , 1298667 )
  • সোর্স প্যানেলে মন্তব্যের কীবোর্ড শর্টকাট ঠিক করা হয়েছে। ( 1296535 )
  • সোর্স প্যানেলে মাল্টি সিলেকশনের জন্য Alt (বিকল্প) কী ব্যবহারের জন্য সমর্থন পুনরায় সক্ষম করুন। ( 1304070 )

[পরীক্ষামূলক] লাইটহাউস প্যানেলে নতুন টাইমস্প্যান এবং স্ন্যাপশট মোড

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

উদাহরণস্বরূপ, ব্যবহারকারীর মিথস্ক্রিয়া বিশ্লেষণ করার জন্য আপনি টাইমস্প্যান রিপোর্ট ব্যবহার করতে পারেন। এই ডেমো পৃষ্ঠাটি খুলুন। টাইমস্প্যান মোড নির্বাচন করুন এবং Start timespan এ ক্লিক করুন। পৃষ্ঠায়, একটি কফিতে ক্লিক করুন এবং টাইমস্প্যানটি শেষ করুন। ইন্টারঅ্যাকশনের কারণে মোট ব্লকিং সময় এবং ক্রমবর্ধমান লেআউট শিফট খুঁজে বের করতে রিপোর্টটি পড়ুন।

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

লাইটহাউস প্যানেলহাউসে সময়কাল এবং স্ন্যাপশট মোড

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

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

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

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

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

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

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