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

Kayce Basques

নতুন সমস্যা ট্যাব ব্যবহার করে সাইটের সমস্যাগুলি সমাধান করুন

ড্রয়ারে থাকা নতুন সমস্যা ট্যাবটির লক্ষ্য হল কনসোলের বিজ্ঞপ্তির ক্লান্তি এবং বিশৃঙ্খলা কমাতে সাহায্য করা। বর্তমানে, ওয়েবসাইট ডেভেলপার, লাইব্রেরি, ফ্রেমওয়ার্ক এবং Chrome-এর জন্য বার্তা, সতর্কতা এবং ত্রুটি লগ করার জন্য কনসোলই কেন্দ্রীয় স্থান। সমস্যা ট্যাবটি ব্রাউজার থেকে সতর্কতাগুলিকে একটি কাঠামোগত, সমষ্টিগত এবং কার্যকর উপায়ে উপস্থাপন করে, DevTools-এর মধ্যে প্রভাবিত সংস্থানগুলির সাথে লিঙ্ক করে এবং সমস্যাগুলি কীভাবে সমাধান করা যায় সে সম্পর্কে নির্দেশিকা প্রদান করে। সময়ের সাথে সাথে, Chrome-এর আরও বেশি সতর্কতা কনসোলের পরিবর্তে সমস্যা ট্যাবে প্রদর্শিত হবে, যা কনসোলের বিশৃঙ্খলা কমাতে সাহায্য করবে।

শুরু করতে "Chrome DevTools সমস্যা সমাধানের সমস্যা খুঁজুন এবং সমাধান করুন" ট্যাবটি দেখুন।

ক্রোমিয়াম বাগ: #১০৬৮১১৬

ইন্সপেক্ট মোড টুলটিপে অ্যাক্সেসিবিলিটি তথ্য দেখুন

ইন্সপেক্ট মোড টুলটিপ এখন নির্দেশ করে যে এলিমেন্টটির একটি অ্যাক্সেসযোগ্য নাম এবং ভূমিকা আছে কিনা এবং এটি কীবোর্ড-ফোকাসযোগ্য কিনা ।

ক্রোমিয়াম বাগ: #১০৪০০২৫

পারফর্ম্যান্স প্যানেল আপডেট

ফুটারে মোট ব্লকিং টাইম (TBT) তথ্য দেখুন

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

মোট ব্লকিং সময়ের তথ্য পেতে, পৃষ্ঠাটি পুনরায় লোড করুন ব্যবহার করবেন না পৃষ্ঠা লোড কর্মক্ষমতা রেকর্ড করার জন্য ওয়ার্কফ্লো। পরিবর্তে, রেকর্ড ক্লিক করুন , পৃষ্ঠাটি ম্যানুয়ালি পুনরায় লোড করুন, পৃষ্ঠাটি লোড হওয়ার জন্য অপেক্ষা করুন এবং তারপর রেকর্ডিং বন্ধ করুন। যদি আপনি Total Blocking Time: Unavailable দেখতে পান তবে এর অর্থ হল DevTools Chrome এর অভ্যন্তরীণ প্রোফাইলিং ডেটা থেকে প্রয়োজনীয় তথ্য পায়নি।

ক্রোমিয়াম বাগ: #১০৫৪৩৮১

নতুন অভিজ্ঞতা বিভাগে লেআউট শিফট ইভেন্ট

পারফরম্যান্স প্যানেলের নতুন এক্সপেরিয়েন্স বিভাগটি আপনাকে লেআউট শিফট সনাক্ত করতে সাহায্য করতে পারে। কিউমুলেটিভ লেআউট শিফট (CLS) হল একটি মেট্রিক যা আপনাকে অবাঞ্ছিত ভিজ্যুয়াল অস্থিরতা পরিমাপ করতে সাহায্য করতে পারে এবং এটি গুগলের নতুন কোর ওয়েব ভাইটালগুলির মধ্যে একটি।

"Summary" ট্যাবে লেআউট শিফটের বিশদ দেখতে "Laout Shift" ইভেন্টে ক্লিক করুন। "Moved from" এবং "Moved to" ফিল্ডের উপর কার্সার রাখুন এবং লেআউট শিফটটি কোথায় ঘটেছে তা দেখুন।

কনসোলে আরও সঠিক প্রতিশ্রুতি পরিভাষা

একটি Promise লগ করার সময় কনসোলটি Promise অবস্থাকে ভুলভাবে resolved হিসাবে বর্ণনা করত:

কনসোল এখন fulfilled শব্দটি ব্যবহার করে, যা Promise spec এর সাথে সামঞ্জস্যপূর্ণ :

V8 বাগ: #6751

স্টাইলস প্যান আপডেট

revert কীওয়ার্ডের জন্য সমর্থন

স্টাইলস পেনের অটোকম্পলিট UI এখন revert CSS কীওয়ার্ড সনাক্ত করে, যা একটি প্রোপার্টির ক্যাসকেডেড মানকে সেই মানটিতে ফিরিয়ে দেয় যা এলিমেন্টের স্টাইলিংয়ে কোনও পরিবর্তন না করা হলে মানটি হত।

ক্রোমিয়াম বাগ: #১০৭৫৪৩৭

ছবির প্রিভিউ

টুলটিপে ছবির প্রিভিউ দেখতে স্টাইলস প্যানে একটি background-image মানের উপর কার্সার রাখুন।

ক্রোমিয়াম বাগ: #১০৪০০১৯

কালার পিকার এখন স্থান-বিচ্ছিন্ন কার্যকরী রঙের স্বরলিপি ব্যবহার করে

CSS কালার মডিউল লেভেল ৪ উল্লেখ করে যে rgb() মতো কালার ফাংশনগুলি স্পেস-সেপারেটেড আর্গুমেন্ট সমর্থন করবে। উদাহরণস্বরূপ, rgb(0, 0, 0) হল rgb(0 0 0) এর সমতুল্য।

যখন আপনি কালার পিকার দিয়ে রঙ নির্বাচন করবেন অথবা Styles প্যানে Shift চেপে ধরে রঙের মান ক্লিক করে রঙের উপস্থাপনার মধ্যে বিকল্প করবেন, তখন আপনি এখন স্পেস-সেপারেটেড আর্গুমেন্ট সিনট্যাক্স দেখতে পাবেন।

আপনি কম্পিউটেড প্যানে এবং ইন্সপেক্ট মোড টুলটিপে সিনট্যাক্সটিও দেখতে পাবেন।

DevTools নতুন সিনট্যাক্স ব্যবহার করছে কারণ color() এর মতো আসন্ন CSS বৈশিষ্ট্যগুলি অবচিত কমা-বিভাজিত আর্গুমেন্ট সিনট্যাক্স সমর্থন করে না ।

স্পেস-সেপারেটেড আর্গুমেন্ট সিনট্যাক্সটি বেশিরভাগ ব্রাউজারেই বেশ কিছুদিন ধরে সমর্থিত। দেখুন আমি কি স্পেস-সেপারেটেড ফাংশনাল কালার নোটেশন ব্যবহার করতে পারি?

ক্রোমিয়াম বাগ: #১০৭২৯৫২

এলিমেন্টস প্যানেলে প্রোপার্টিজ প্যানের অবচয়

এলিমেন্টস প্যানেলের প্রোপার্টিজ প্যানটি বন্ধ করে দেওয়া হয়েছে। এর পরিবর্তে কনসোলে console.dir($0) চালান।

তথ্যসূত্র:

• console.dir()
• $0

ম্যানিফেস্ট প্যানে অ্যাপ শর্টকাট সমর্থন

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

আরও জানতে অ্যাপ শর্টকাট ব্যবহার করে দ্রুত কাজ সম্পন্ন করুন দেখুন।

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

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

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

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

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

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

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