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

Jecelyn Yeen

CSS-ইন-JS ফ্রেমওয়ার্কের জন্য স্টাইল এডিটিং

CSS অবজেক্ট মডেল (CSSOM) API ব্যবহার করে তৈরি করা স্টাইল সম্পাদনার জন্য স্টাইলস প্যানে এখন আরও ভালো সাপোর্ট রয়েছে। অনেক CSS-ইন-JS ফ্রেমওয়ার্ক এবং লাইব্রেরি স্টাইল তৈরি করতে হুডের নিচে CSSOM API ব্যবহার করে।

আপনি এখন Constructable Stylesheets ব্যবহার করে জাভাস্ক্রিপ্টে যোগ করা স্টাইলগুলি সম্পাদনা করতে পারেন। Constructable Stylesheets হল Shadow DOM ব্যবহার করার সময় পুনর্ব্যবহারযোগ্য স্টাইল তৈরি এবং বিতরণ করার একটি নতুন উপায়।

উদাহরণস্বরূপ, CSSStyleSheet (CSSOM API) এর সাথে যোগ করা h1 স্টাইলগুলি আগে সম্পাদনাযোগ্য ছিল না। স্টাইলস প্যানে এখন সম্পাদনাযোগ্য আছে:

ক্রোমিয়াম সমস্যা #৯৪৬৯৭৫

লাইটহাউস প্যানেলে লাইটহাউস ৬

লাইটহাউস প্যানেল এখন লাইটহাউস 6 চালাচ্ছে। সমস্ত প্রধান পরিবর্তনের সারাংশের জন্য লাইটহাউস 6.0-এ নতুন কী আছে তা দেখুন, অথবা সমস্ত পরিবর্তনের সম্পূর্ণ তালিকার জন্য v6.0.0 রিলিজ নোট দেখুন ।

Lighthouse 6.0 রিপোর্টে তিনটি নতুন মেট্রিক্স প্রবর্তন করেছে: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), এবং Total Blocking Time (TBT)। LCP এবং CLS হল Google এর নতুন Core Web Vitals এর মধ্যে দুটি, এবং TBT হল আরেকটি Core Web Vital, First Input Delay এর জন্য একটি ল্যাব পরিমাপ প্রক্সি।

ব্যবহারকারীদের লোডিং অভিজ্ঞতা আরও ভালোভাবে প্রতিফলিত করার জন্য পারফরম্যান্স স্কোর সূত্রটিও পুনর্বিবেচনা করা হয়েছে।

ক্রোমিয়াম সমস্যা #৭৭২৫৫৮

ফার্স্ট মিনিংফুল পেইন্ট (FMP) অবচয়

লাইটহাউস ৬.০-তে ফার্স্ট মিনিংফুল পেইন্ট (FMP) বন্ধ করা হয়েছে। এটি পারফরম্যান্স প্যানেল থেকেও সরানো হয়েছে। লার্জেস্ট কন্টেন্টফুল পেইন্ট হল FMP-এর জন্য প্রস্তাবিত প্রতিস্থাপন। কেন এটি বন্ধ করা হয়েছিল তার ব্যাখ্যার জন্য ফার্স্ট মিনিংফুল পেইন্ট দেখুন।

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

নতুন জাভাস্ক্রিপ্ট বৈশিষ্ট্যগুলির জন্য সমর্থন

DevTools এখন জাভাস্ক্রিপ্ট ভাষার কিছু সাম্প্রতিক বৈশিষ্ট্যের জন্য আরও ভালো সমর্থন প্রদান করে:

• ঐচ্ছিক চেইনিং সিনট্যাক্স অটোকমপ্লিশন - কনসোলে প্রোপার্টি অটো-কমপ্লিশন এখন ঐচ্ছিক চেইনিং সিনট্যাক্স সমর্থন করে, যেমন name?. এখন name. এবং name[ ছাড়াও কাজ করে।
• প্রাইভেট ফিল্ডের জন্য সিনট্যাক্স হাইলাইটিং - প্রাইভেট ক্লাস ফিল্ডগুলি এখন সোর্স প্যানেলে সঠিকভাবে সিনট্যাক্স-হাইলাইট করা এবং সুন্দরভাবে মুদ্রিত করা হয়েছে।
• Nullish coalescing অপারেটরের জন্য সিনট্যাক্স হাইলাইটিং - DevTools এখন Sources প্যানেলে nullish coalescing অপারেটরটিকে সঠিকভাবে প্রিটি-প্রিন্ট করে।

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

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

অ্যাপ শর্টকাট ব্যবহারকারীদের একটি ওয়েব অ্যাপের মধ্যে সাধারণ বা প্রস্তাবিত কাজগুলি দ্রুত শুরু করতে সহায়তা করে।

ম্যানিফেস্ট প্যান এখন সতর্কতা দেখায় যদি:

• অ্যাপ শর্টকাট আইকনগুলি 96x96 পিক্সেলের চেয়ে ছোট
• অ্যাপ শর্টকাট আইকন এবং ম্যানিফেস্ট আইকনগুলি বর্গাকার নয় (কারণ এগুলি উপেক্ষা করা হবে)

ক্রোমিয়াম সমস্যা #৯৫৫৪৯৭

টাইমিং ট্যাবে পরিষেবা কর্মীর respondWith ইভেন্টগুলি

নেটওয়ার্ক প্যানেলের টাইমিং ট্যাবে এখন সার্ভিস ওয়ার্কার respondWith ইভেন্ট অন্তর্ভুক্ত রয়েছে। respondWith হল সার্ভিস ওয়ার্কার fetch ইভেন্ট হ্যান্ডলার চালানোর ঠিক আগে সেই সময় যখন fetch হ্যান্ডলারের respondWith প্রতিশ্রুতি নিষ্পত্তি হয়।

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

কম্পিউটেড ফলকের ধারাবাহিক প্রদর্শন

এলিমেন্টস প্যানেলের কম্পিউটেড প্যানটি এখন সমস্ত ভিউপোর্ট আকারে একটি প্যান হিসাবে ধারাবাহিকভাবে প্রদর্শিত হয়। পূর্বে, যখন DevTools এর ভিউপোর্টের প্রস্থ সংকীর্ণ ছিল তখন কম্পিউটেড প্যানটি স্টাইলস প্যানের ভিতরে একত্রিত হত।

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

WebAssembly ফাইলের জন্য বাইটকোড অফসেট

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

ক্রোমিয়াম সমস্যা #১০৭১৪৩২

সোর্স প্যানেলে লাইন-ভিত্তিক কপি এবং কাট

সোর্স প্যানেল এডিটরে কোনও নির্বাচন ছাড়াই কপি বা কাট করার সময়, DevTools বর্তমান লাইনের বিষয়বস্তু কপি বা কাট করবে। উদাহরণস্বরূপ, নীচের ভিডিওতে, কার্সারটি লাইন ১ এর শেষে রয়েছে। কাট কীবোর্ড শর্টকাট টিপে দেওয়ার পরে, সম্পূর্ণ লাইনটি ক্লিপবোর্ডে কপি করা হয় এবং মুছে ফেলা হয়।

ক্রোমিয়াম সমস্যা #800028

কনসোল সেটিংস আপডেট

একই কনসোল বার্তাগুলিকে গ্রুপমুক্ত করুন

কনসোল সেটিংসে "গ্রুপ অনুরূপ" টগল এখন ডুপ্লিকেট বার্তাগুলিতে প্রযোজ্য। পূর্বে এটি কেবল অনুরূপ বার্তাগুলিতে প্রযোজ্য ছিল।

উদাহরণস্বরূপ, পূর্বে, DevTools hello বার্তাগুলিকে আনগ্রুপ করত না যদিও Group similar টি আনচেক করা থাকে। এখন, hello বার্তাগুলি আনগ্রুপ করা হয়েছে:

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

নির্বাচিত প্রসঙ্গ-কেবল সেটিংস স্থায়ী রাখা

কনসোল সেটিংসে "শুধুমাত্র নির্বাচিত প্রসঙ্গ" সেটিংস এখন বহাল আছে। পূর্বে DevTools বন্ধ এবং পুনরায় খোলার সময় প্রতিবার সেটিংস রিসেট করা হত। এই পরিবর্তনটি সেটিংস আচরণকে অন্যান্য কনসোল সেটিংস বিকল্পগুলির সাথে সামঞ্জস্যপূর্ণ করে তোলে।

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

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

পারফরম্যান্স প্যানেলে জাভাস্ক্রিপ্ট সংকলন ক্যাশে তথ্য

জাভাস্ক্রিপ্ট কম্পাইলেশন ক্যাশে তথ্য এখন সর্বদা পারফরম্যান্স প্যানেলের সারাংশ ট্যাবে প্রদর্শিত হয়। পূর্বে, কোড ক্যাশিং না হলে DevTools কোড ক্যাশিং সম্পর্কিত কিছু দেখাত না।

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

পারফরম্যান্স প্যানেলে নেভিগেশন টাইমিং অ্যালাইনমেন্ট

রেকর্ডিং শুরু হওয়ার সময় অনুসারে পারফরম্যান্স প্যানেল রুলারে সময় দেখাত। এখন ব্যবহারকারী যেখানে নেভিগেট করেন সেখানে রেকর্ডিংয়ের ক্ষেত্রে এটি পরিবর্তিত হয়েছে, যেখানে DevTools এখন নেভিগেশনের সাথে সম্পর্কিত রুলার সময় দেখায়।

আমরা DOMContentLoaded , First Paint, First Contentful Paint এবং Largest Contentful Paint ইভেন্টগুলির সময়গুলি নেভিগেশন শুরুর সাথে সম্পর্কিত করার জন্য আপডেট করেছি, যার অর্থ তারা PerformanceObserver দ্বারা রিপোর্ট করা সময়ের সাথে মিলে যায়।

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

ব্রেকপয়েন্ট, কন্ডিশনাল ব্রেকপয়েন্ট এবং লগপয়েন্টের জন্য নতুন আইকন

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

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

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

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

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

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

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

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

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