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

কেইস বাস্ক
Kayce Basques

ডিভাইস মোডে Moto G4 সাপোর্ট

ডিভাইস টুলবার সক্রিয় করার পর আপনি এখন ডিভাইস তালিকা থেকে একটি Moto G4 ভিউপোর্টের মাত্রা সিমুলেট করতে পারবেন।

একটি Moto G4 ভিউপোর্ট সিমুলেট করা

ভিউপোর্টের চারপাশে Moto G4 হার্ডওয়্যার দেখানোর জন্য Show Device Frame এ ক্লিক করুন।

Moto G4 হার্ডওয়্যার দেখানো হচ্ছে

সম্পর্কিত বৈশিষ্ট্য:

  • কমান্ড মেনু খুলুন এবং Capture screenshot কমান্ডটি চালান যাতে Moto G4 হার্ডওয়্যার সহ ভিউপোর্টের একটি স্ক্রিনশট নেওয়া যায় ( Show Device Frame সক্ষম করার পরে)।
  • মোবাইল ব্যবহারকারীর ওয়েব ব্রাউজিং অবস্থা আরও সঠিকভাবে অনুকরণ করতে নেটওয়ার্ক এবং সিপিইউ থ্রোটল করুন

ক্রোমিয়াম সমস্যা #৯২৪৬৯৩

কুকি-সম্পর্কিত আপডেট

কুকিজ ফলকে ব্লক করা কুকিজ

অ্যাপ্লিকেশন প্যানেলের কুকিজ প্যানটি এখন হলুদ ব্যাকগ্রাউন্ড সহ ব্লক করা কুকিজগুলিকে রঙ করে।

অ্যাপ্লিকেশন প্যানেলের কুকিজ প্যানে ব্লক করা কুকিজ

নেটওয়ার্ক প্যানেল থেকে একই ধরণের UI অ্যাক্সেস করার পদ্ধতি জানতে কেন কুকি ব্লক করা হয়েছিল তা ডিবাগ করুন দেখুন।

ক্রোমিয়াম সমস্যা #১০৩০২৫৮

কুকি প্যানে কুকির অগ্রাধিকার

নেটওয়ার্ক এবং অ্যাপ্লিকেশন প্যানেলের কুকিজ টেবিলগুলিতে এখন একটি অগ্রাধিকার কলাম অন্তর্ভুক্ত রয়েছে।

ক্রোমিয়াম সমস্যা #১০২৬৮৭৯

সকল কুকির মান সম্পাদনা করুন

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

কুকির মান সম্পাদনা করা হচ্ছে

কুকি ডেটা অন্তর্ভুক্ত করার জন্য Node.js ফেচ হিসেবে কপি করুন

একটি নেটওয়ার্ক অনুরোধে ডান-ক্লিক করুন এবং Copy > Copy as Node.js fetch নির্বাচন করুন যাতে কুকি ডেটা অন্তর্ভুক্ত একটি fetch এক্সপ্রেশন পাওয়া যায়।

Node.js ফেচ হিসেবে কপি করুন

ক্রোমিয়াম সমস্যা #১০২৯৮২৬

আরও সঠিক ওয়েব অ্যাপ ম্যানিফেস্ট আইকন

পূর্বে, অ্যাপ্লিকেশন প্যানেলের ম্যানিফেস্ট প্যানটি ওয়েব অ্যাপ ম্যানিফেস্ট আইকনগুলি প্রদর্শনের জন্য নিজস্ব অনুরোধগুলি সম্পাদন করত। DevTools এখন Chrome ব্যবহার করে ঠিক একই ম্যানিফেস্ট আইকনটি দেখায়।

ম্যানিফেস্ট প্যানে আইকনগুলি

ক্রোমিয়াম সমস্যা #৯৮৫৪০২

আনস্কেপড মান দেখতে CSS content প্রপার্টিগুলির উপর কার্সার রাখুন

কোনও content প্রপার্টির মানের উপর কার্সার রাখুন এবং সেই মানের আনস্কেপড ভার্সনটি দেখুন।

উদাহরণস্বরূপ, এই ডেমোতে যখন আপনি p::after pseudo-element পরীক্ষা করবেন তখন আপনি Styles প্যানে একটি escaped স্ট্রিং দেখতে পাবেন:

পালিয়ে যাওয়া স্ট্রিং

যখন আপনি content মানের উপর কার্সার রাখবেন তখন আপনি আনস্কেপড মানটি দেখতে পাবেন:

অপ্রত্যাশিত মান

কনসোলে আরও বিস্তারিত সোর্স ম্যাপ ত্রুটি

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

কনসোলে একটি সোর্স ম্যাপ লোডিং ত্রুটি

ফাইলের শেষের দিকে স্ক্রোলিং অক্ষম করার জন্য সেটিং

সেটিংস খুলুন এবং তারপর Preferences > Sources > Allow scrolling passes passes passes of file অক্ষম করুন যাতে Sources প্যানেলে ডিফল্ট UI আচরণ অক্ষম করা যায় যা আপনাকে ফাইলের শেষের দিকে স্ক্রোল করতে দেয়।

এখানে বৈশিষ্ট্যটির একটি GIF দেওয়া হল।

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

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

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

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

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

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