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

জেসেলিন ইয়েন

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

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

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

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

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

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

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

ক্রোমিয়াম সমস্যা: 1257499

শৈলী ফলকে ক্যাসকেড স্তরগুলি দেখুন

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

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

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

শৈলী ফলকে ক্যাসকেড স্তরগুলি দেখুন

ক্রোমিয়াম সমস্যা: 1240596

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 )

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

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

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

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

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

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

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

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

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

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

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

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

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