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

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

ক্রোম 100

এখানে 100তম ক্রোম সংস্করণ! Chrome DevTools ডেভেলপারদের ওয়েবে তৈরি করার জন্য নির্ভরযোগ্য টুল প্রদান করা চালিয়ে যাবে। মাইলফলক উদযাপন করতে নতুন কী ট্যাবে চারপাশে ক্লিক করার জন্য কিছুক্ষণ সময় নিন।

যথারীতি, আপনি ছবিটিতে ক্লিক করে DevTools ভিডিওতে নতুন কী আছে তা দেখতে পারেন।

স্টাইল প্যানে নিয়মে @supports দেখুন এবং সম্পাদনা করুন

আপনি এখন শৈলী ফলকে CSS @supports at-rules দেখতে এবং সম্পাদনা করতে পারেন। এই পরিবর্তনগুলি রিয়েল টাইমে অ্যাট-রুলগুলির সাথে পরীক্ষা করা সহজ করে তোলে৷ এই ডেমো পৃষ্ঠাটি খুলুন, <div class=”box”> উপাদানটি পরিদর্শন করুন , শৈলী ফলকে @supports at-rules দেখুন। এটি সম্পাদনা করতে নিয়মের ঘোষণাতে ক্লিক করুন।

নিয়মে @supports দেখুন এবং সম্পাদনা করুন

Chromium সমস্যা: 1222574 , 1222573

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

ডিফল্টরূপে সাধারণ নির্বাচকদের সমর্থন করুন

রেকর্ডিংয়ের সময় একটি অনন্য নির্বাচক নির্ধারণ করার সময়, রেকর্ডার প্যানেল এখন স্বয়ংক্রিয়ভাবে নিম্নলিখিত বৈশিষ্ট্য সহ উপাদান পছন্দ করে:

  • ডেটা-পরীক্ষিত
  • তথ্য-পরীক্ষা
  • data-qa
  • data-cy
  • ডেটা-টেস্ট-আইডি
  • ডেটা-কিউএ-আইডি
  • তথ্য-পরীক্ষা

উপরের বৈশিষ্ট্যগুলি পরীক্ষা অটোমেশনে ব্যবহৃত সাধারণ নির্বাচক।

উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠার সাথে একটি নতুন রেকর্ডিং শুরু করুন । একটি ইমেল ঠিকানা পূরণ করুন এবং নির্বাচক মান পর্যবেক্ষণ করুন।

যেহেতু ইমেল উপাদানটিতে data-testid সংজ্ঞায়িত করা হয়েছে, তাই এটি id বা class অ্যাট্রিবিউটের পরিবর্তে স্বয়ংক্রিয়ভাবে নির্বাচক হিসাবে ব্যবহৃত হয়।

ডিফল্টরূপে সাধারণ নির্বাচকদের সমর্থন করুন

রেকর্ডিং এর নির্বাচক কাস্টমাইজ করুন

আপনি যদি সাধারণ নির্বাচকগুলি ব্যবহার না করেন তবে আপনি একটি রেকর্ডিংয়ের নির্বাচককে কাস্টমাইজ করতে পারেন।

উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠাটি নির্বাচক হিসাবে data-automate অ্যাট্রিবিউট ব্যবহার করে। একটি নতুন রেকর্ডিং শুরু করুন এবং নির্বাচক বৈশিষ্ট্য হিসাবে data-automate লিখুন। একটি ইমেল ঠিকানা পূরণ করুন এবং নির্বাচক মান পর্যবেক্ষণ করুন ( [data-automate=email-address] )।

রেকর্ডিংয়ের নির্বাচক কাস্টমাইজ করুন

কাস্টম নির্বাচক নির্বাচনের ফলাফল

একটি রেকর্ডিং পুনঃনামকরণ করুন

আপনি এখন রেকর্ডিং এর শিরোনামের পাশে সম্পাদনা বোতাম (পেন্সিল আইকন) দিয়ে রেকর্ডার প্যানেলে একটি রেকর্ডিংয়ের নাম পরিবর্তন করতে পারেন।

একটি রেকর্ডিং পুনঃনামকরণ করুন

হোভারে ক্লাস/ফাংশনের বৈশিষ্ট্যগুলির পূর্বরূপ দেখুন

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

হোভারে ক্লাস/ফাংশনের বৈশিষ্ট্যগুলির পূর্বরূপ দেখুন

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

পারফরম্যান্স প্যানেলে আংশিকভাবে উপস্থাপিত ফ্রেম

পারফরম্যান্স রেকর্ডিং এখন ফ্রেম টাইমলাইনে একটি নতুন ফ্রেম বিভাগ "আংশিকভাবে উপস্থাপিত ফ্রেম" প্রদর্শন করে।

পূর্বে, ফ্রেম টাইমলাইন যেকোন ফ্রেমকে "ড্রপড ফ্রেম" হিসাবে দেখায়। যাইহোক, এমন কিছু ক্ষেত্রে রয়েছে যেখানে কিছু ফ্রেম এখনও কম্পোজিটর থ্রেড দ্বারা চালিত ভিজ্যুয়াল আপডেট (যেমন স্ক্রোলিং) তৈরি করতে পারে।

এটি ব্যবহারকারীদের বিভ্রান্তির দিকে নিয়ে যায় কারণ এই "ড্রপড ফ্রেম" এর স্ক্রিনশটগুলি এখনও ভিজ্যুয়াল আপডেটগুলিকে প্রতিফলিত করছে৷

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

পারফরম্যান্স প্যানেলে আংশিকভাবে উপস্থাপিত ফ্রেম

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

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

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

  • অনুকরণ করা ডিভাইসের জন্য আপডেট করা আইফোন ব্যবহারকারী এজেন্ট স্ট্রিং। 5 এর পরের সমস্ত iPhone সংস্করণে iPhone OS 13_2_3 সহ একটি ব্যবহারকারী-এজেন্ট স্ট্রিং রয়েছে৷ ( 1289553 )
  • আপনি এখন সরাসরি জাভাস্ক্রিপ্ট ফাইল হিসাবে স্নিপেট সংরক্ষণ করতে পারেন। পূর্বে, আপনাকে ম্যানুয়ালি .js ফাইল এক্সটেনশন যুক্ত করতে হবে। ( 1137218 )
  • সোর্স ম্যাপ দিয়ে ডিবাগ করার সময় সোর্স প্যানেল এখন সঠিকভাবে স্কোপ ভেরিয়েবলের নাম প্রদর্শন করে। পূর্বে, সোর্স ম্যাপ প্রদান করা সত্ত্বেও সোর্স প্যানেল মিনিফাইড স্কোপ পরিবর্তনশীল নাম প্রদর্শন করে। ( 1294682 )
  • উৎস প্যানেল এখন পৃষ্ঠা লোডের সময় সঠিকভাবে স্ক্রোল অবস্থান পুনরুদ্ধার করে। পূর্বে, অবস্থানটি সঠিকভাবে পুনরুদ্ধার করা হয়নি যা ডিবাগিং-এ অসুবিধা সৃষ্টি করে। ( 1294422 )

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

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

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

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

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

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

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