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

Jecelyn Yeen

ক্রোম ১০০

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

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

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

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

ক্রোমিয়াম সমস্যা: 1222574 , 1222573

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

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

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

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

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

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

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

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

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

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

রেকর্ডিংটির নাম পরিবর্তন করুন

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

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

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

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

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

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

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

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

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

ক্রোমিয়াম সমস্যা: ১২৬১১৩০

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

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

• এমুলেটেড ডিভাইসের জন্য আপডেট করা আইফোন ইউজার এজেন্ট স্ট্রিং। ৫ এর পরের সকল আইফোন ভার্সনে আইফোন ওএস ১৩_২_৩ সহ একটি ইউজার-এজেন্ট স্ট্রিং রয়েছে। ( ১২৮৯৫৫৩ )
• এখন আপনি সরাসরি জাভাস্ক্রিপ্ট ফাইল হিসেবে স্নিপেট সংরক্ষণ করতে পারবেন। পূর্বে, আপনাকে .js ফাইল এক্সটেনশনটি ম্যানুয়ালি যুক্ত করতে হত। ( 1137218 )
• সোর্স ম্যাপ দিয়ে ডিবাগ করার সময় সোর্স প্যানেল এখন সঠিকভাবে স্কোপ ভেরিয়েবলের নাম প্রদর্শন করে। পূর্বে, সোর্স ম্যাপ প্রদান করা সত্ত্বেও সোর্স প্যানেল মিনিফাইড স্কোপ ভেরিয়েবলের নাম প্রদর্শন করত। ( ১২৯৪৬৮২ )
• সোর্স প্যানেল এখন পৃষ্ঠা লোডের সময় স্ক্রোল পজিশন সঠিকভাবে পুনরুদ্ধার করে। পূর্বে, পজিশনটি সঠিকভাবে পুনরুদ্ধার করা হয়নি যার ফলে ডিবাগিংয়ে অসুবিধা হচ্ছিল। ( ১২৯৪৪২২ )

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

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

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

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

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

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

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