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

প্রিভিউ বৈশিষ্ট্য: নতুন CSS ওভারভিউ প্যানেল

আপনার পৃষ্ঠায় সম্ভাব্য CSS উন্নতি সনাক্ত করতে নতুন CSS ওভারভিউ প্যানেল ব্যবহার করুন। CSS ওভারভিউ প্যানেলটি খুলুন , তারপর আপনার পৃষ্ঠার CSS এর একটি প্রতিবেদন তৈরি করতে ক্যাপচার ওভারভিউতে ক্লিক করুন।

আপনি তথ্যটি আরও গভীরভাবে বিশ্লেষণ করতে পারেন। উদাহরণস্বরূপ, একই রঙ প্রয়োগকারী উপাদানগুলির তালিকা দেখতে রঙ বিভাগে একটি রঙের উপর ক্লিক করুন। উপাদান প্যানেলে উপাদানটি খুলতে একটি উপাদানের উপর ক্লিক করুন।

CSS ওভারভিউ প্যানেলটি একটি প্রিভিউ বৈশিষ্ট্য। আমাদের দল এখনও এটি নিয়ে সক্রিয়ভাবে কাজ করছে এবং আরও উন্নতির জন্য আমরা আপনার প্রতিক্রিয়া আশা করছি।

CSS ওভারভিউ প্যানেল সম্পর্কে আরও জানতে এই নিবন্ধটি পড়ুন।

সিএসএস ওভারভিউ প্যানেল

ক্রোমিয়াম সমস্যা: ১২৫৪৫৫৭

পুনরুদ্ধার এবং উন্নত CSS দৈর্ঘ্য সম্পাদনা এবং অনুলিপি অভিজ্ঞতা

দৈর্ঘ্য সহ CSS বৈশিষ্ট্যের জন্য CSS কপি এবং টেক্সট হিসেবে সম্পাদনা অভিজ্ঞতা পুনরুদ্ধার করা হয়েছে। এই অভিজ্ঞতাগুলি শেষ প্রকাশে ভেঙে গেছে।

এছাড়াও, আপনি ড্রপডাউনের মাধ্যমে ইউনিট মান সামঞ্জস্য করতে এবং ইউনিটের ধরণ আপডেট করতে টেনে আনতে পারেন। এই অ্যাড-অন দৈর্ঘ্যের অথরিং বৈশিষ্ট্যটি প্রাথমিক সম্পাদনা হিসাবে পাঠ্য অভিজ্ঞতাকে প্রভাবিত করবে না।

যদি আপনার কোন সমস্যা দেখা দেয় তাহলে দয়া করে goo.gle/length-feedback এর মাধ্যমে রিপোর্ট করুন।

আপনি স্টাইলস প্যান চেকবক্সে সেটিংস > পরীক্ষা > CSS দৈর্ঘ্য অথরিং টুল সক্ষম করুন এর মাধ্যমে এটি নিষ্ক্রিয় করতে পারেন।

ক্রোমিয়াম সমস্যা: 1259088 , 1172993

ট্যাব আপডেট রেন্ডার করা হচ্ছে

CSS প্রিফারস-কনট্রাস্ট মিডিয়া ফিচারটি অনুকরণ করুন

CSS প্রিফারস-কনট্রাস্ট মিডিয়া ফিচারটি অনুকরণ করুন

ব্যবহারকারী পৃষ্ঠায় কমবেশি কন্ট্রাস্টের অনুরোধ করেছেন কিনা তা সনাক্ত করতে প্রিফারস-কন্ট্রাস্ট মিডিয়া বৈশিষ্ট্যটি ব্যবহার করা হয়।

কমান্ড মেনু খুলুন, Show Rendering কমান্ডটি চালান, এবং তারপর Emulate CSS মিডিয়া বৈশিষ্ট্য prefers-contrast ড্রপডাউন সেট করুন।

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

Chrome এর অটো ডার্ক থিম বৈশিষ্ট্যটি অনুকরণ করুন

Chrome-এর অটো ডার্ক থিম চালু থাকলে আপনার পৃষ্ঠাটি কেমন দেখাবে তা সহজেই দেখতে DevTools ব্যবহার করে অটো ডার্ক থিম অনুকরণ করুন।

Chrome 96 অ্যান্ড্রয়েডে অটো ডার্ক থিমের জন্য একটি অরিজিন ট্রায়াল চালু করেছে। এই বৈশিষ্ট্যের সাহায্যে, ব্যবহারকারী যখন অপারেটিং সিস্টেমে ডার্ক থিম বেছে নেন, তখন ব্রাউজারটি হালকা থিমযুক্ত সাইটগুলিতে স্বয়ংক্রিয়ভাবে তৈরি হওয়া ডার্ক থিম প্রয়োগ করে।

কমান্ড মেনু খুলুন, Show Rendering কমান্ডটি চালান, এবং তারপর Emulate auto dark mode ড্রপডাউন সেট করুন।

Chrome এর অটো ডার্ক থিম বৈশিষ্ট্যটি অনুকরণ করুন

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

স্টাইলস প্যানে জাভাস্ক্রিপ্ট হিসেবে ঘোষণা কপি করুন

জাভাস্ক্রিপ্ট বৈশিষ্ট্য হিসেবে CSS নিয়মগুলি সহজেই কপি করার জন্য কনটেক্সট মেনুতে দুটি নতুন বিকল্প যুক্ত করা হয়েছে। এই শর্টকাট বিকল্পগুলি বিশেষ করে CSS-in-JS লাইব্রেরিগুলির সাথে কাজ করা ডেভেলপারদের জন্য কার্যকর।

স্টাইলস প্যানে, একটি CSS নিয়মের উপর ডান ক্লিক করুন। আপনি একটি একক নিয়ম অনুলিপি করতে JS হিসাবে ঘোষণা কপি করুন অথবা সমস্ত নিয়ম অনুলিপি করতে JS হিসাবে সমস্ত ঘোষণা কপি করুন নির্বাচন করতে পারেন।

উদাহরণস্বরূপ, নীচের উদাহরণটি paddingLeft: '1.5rem' ক্লিপবোর্ডে কপি করবে।

ঘোষণাটি জাভাস্ক্রিপ্ট হিসেবে কপি করুন

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

নেটওয়ার্ক প্যানেলে নতুন পেলোড ট্যাব

পেলোড সহ কোনও নেটওয়ার্ক অনুরোধ পরিদর্শন করার সময় নেটওয়ার্ক প্যানেলে নতুন পেলোড ট্যাবটি ব্যবহার করুন। পূর্বে, পেলোড তথ্য হেডার ট্যাবের অধীনে পাওয়া যেত।

নেটওয়ার্ক প্যানেলে পেলোড ট্যাব

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

প্রোপার্টিজ প্যানে প্রোপার্টিজের প্রদর্শন উন্নত করা হয়েছে।

প্রোপার্টিজ প্যানে এখন ইনস্ট্যান্সের সমস্ত প্রোপার্টি দেখানোর পরিবর্তে শুধুমাত্র প্রাসঙ্গিক প্রোপার্টি দেখাবে। DOM প্রোটোটাইপ এবং পদ্ধতিগুলি এখন সরানো হয়েছে।

Chrome 95-এ প্রোপার্টিজ প্যান বর্ধনের সাথে, আপনি এখন প্রাসঙ্গিক প্রোপার্টিগুলি আরও সহজে খুঁজে পেতে পারেন।

প্রোপার্টিজ প্যানে প্রোপার্টিজ প্রদর্শন

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

কনসোল আপডেট

কনসোলে CORS ত্রুটি লুকানোর বিকল্প

আপনি কনসোলে CORS ত্রুটিগুলি লুকাতে পারেন। যেহেতু CORS ত্রুটিগুলি এখন সমস্যা ট্যাবে রিপোর্ট করা হয়, তাই কনসোলে CORS ত্রুটিগুলি লুকালে বিশৃঙ্খলা হ্রাস করতে সহায়তা করতে পারে।

কনসোলে , সেটিংস আইকনে ক্লিক করুন এবং Show CORS errors in console চেকবক্সটি আনচেক করুন।

কনসোলে CORS ত্রুটি লুকানোর বিকল্প

ক্রোমিয়াম সমস্যা: ১২৫১১৭৬

কনসোলে সঠিক Intl বস্তুর পূর্বরূপ এবং মূল্যায়ন

Intl অবজেক্টগুলির এখন যথাযথ প্রিভিউ রয়েছে এবং কনসোলে আগ্রহের সাথে মূল্যায়ন করা হয়। পূর্বে, Intl অবজেক্টগুলি আগ্রহের সাথে মূল্যায়ন করা হত না।

কনসোলে Intl অবজেক্ট

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

ধারাবাহিক অ্যাসিঙ্ক স্ট্যাক ট্রেস

কনসোল এখন async ফাংশনগুলির জন্য async স্ট্যাক ট্রেস রিপোর্ট করে যাতে এটি অন্যান্য অ্যাসিঙ্ক কাজের সাথে সামঞ্জস্যপূর্ণ হয় এবং কল স্ট্যাকে যা দেখানো হয়েছে তার সাথে সামঞ্জস্যপূর্ণ হয়।

অ্যাসিঙ্ক স্ট্যাক ট্রেস

ক্রোমিয়াম সমস্যা: ১২৫৪২৫৯

কনসোল সাইডবারটি ধরে রাখুন

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

অবচয় রোধের নোটিশ থেকে আমরা এখন যথেষ্ট প্রতিক্রিয়া পেয়েছি এবং আমরা সাইডবারটি অপসারণের পরিবর্তে এটি উন্নত করার জন্য কাজ করব।

কনসোল সাইডবার

ক্রোমিয়াম সমস্যা: 1232937 , 1255586

অ্যাপ্লিকেশন প্যানেলে অ্যাপ্লিকেশন ক্যাশে ফলকটি বন্ধ করা হয়েছে

ক্রোম এবং অন্যান্য ক্রোমিয়াম-ভিত্তিক ব্রাউজার থেকে অ্যাপক্যাশের সমর্থন সরানো হওয়ায় অ্যাপ্লিকেশন প্যানেলের অ্যাপ্লিকেশন ক্যাশে প্যানটি এখন সরানো হয়েছে।

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

[পরীক্ষামূলক] অ্যাপ্লিকেশন প্যানেলে নতুন রিপোর্টিং API ফলক

রিপোর্টিং এপিআই আপনার পৃষ্ঠার নিরাপত্তা লঙ্ঘন, বন্ধ করা এপিআই কল এবং আরও অনেক কিছু পর্যবেক্ষণ করতে সাহায্য করার জন্য ডিজাইন করা হয়েছে।

এই পরীক্ষাটি সক্ষম করার মাধ্যমে, আপনি এখন অ্যাপ্লিকেশন প্যানেলের নতুন রিপোর্টিং API প্যানে রিপোর্টের স্থিতি দেখতে পারবেন।

অনুগ্রহ করে মনে রাখবেন যে এন্ডপয়েন্টস বিভাগটি বর্তমানে সক্রিয়ভাবে তৈরি হচ্ছে (আপাতত কোনও রিপোর্টিং এন্ডপয়েন্ট দেখানো হচ্ছে না)।

এই নিবন্ধটি থেকে রিপোর্টিং API সম্পর্কে আরও জানুন।

অ্যাপ্লিকেশন প্যানেলে API ফলকটি রিপোর্ট করা হচ্ছে

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

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

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

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

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

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

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