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

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

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

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

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

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

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

ক্রোমিয়াম সমস্যা: 1254557

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

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

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

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

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

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

রেন্ডারিং ট্যাব আপডেট

CSS prefers-contrast media বৈশিষ্ট্য অনুকরণ করুন

CSS prefers-contrast media বৈশিষ্ট্য অনুকরণ করুন

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

কমান্ড মেনু খুলুন, শো রেন্ডারিং কমান্ড চালান, এবং তারপর এমুলেট সিএসএস মিডিয়া বৈশিষ্ট্য পছন্দ-কনট্রাস্ট ড্রপডাউন সেট করুন।

ক্রোমিয়াম সমস্যা: 1139777

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

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

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

কমান্ড মেনু খুলুন, শো রেন্ডারিং কমান্ড চালান, এবং তারপর এমুলেট অটো ডার্ক মোড ড্রপডাউন সেট করুন।

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

ক্রোমিয়াম সমস্যা: 1243309

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

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

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

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

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

ক্রোমিয়াম সমস্যা: 1253635

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

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

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

ক্রোমিয়াম সমস্যা: 1214030

বৈশিষ্ট্য ফলকে বৈশিষ্ট্যের প্রদর্শন উন্নত করা হয়েছে

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

Chrome 95-এ প্রোপার্টি প্যান বর্ধিতকরণের সাথে, আপনি এখন প্রাসঙ্গিক বৈশিষ্ট্যগুলি সহজে সনাক্ত করতে পারেন৷

বৈশিষ্ট্য ফলকে বৈশিষ্ট্য প্রদর্শন

Chromium সমস্যা: 1226262

কনসোল আপডেট

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

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

কনসোলে , সেটিংস আইকনে ক্লিক করুন এবং কনসোল চেকবক্সে দেখা CORS ত্রুটিগুলি আনচেক করুন৷

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

ক্রোমিয়াম সমস্যা: 1251176

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

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

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

ক্রোমিয়াম সমস্যা: 1073804

সামঞ্জস্যপূর্ণ অ্যাসিঙ্ক স্ট্যাক ট্রেস

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

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

ক্রোমিয়াম সমস্যা: 1254259

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

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

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

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

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

অ্যাপ্লিকেশন প্যানেলে অপ্রচলিত অ্যাপ্লিকেশন ক্যাশে ফলক৷

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

ক্রোমিয়াম সমস্যা: 1084190

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

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

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

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

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

অ্যাপ্লিকেশন প্যানেলে রিপোর্টিং API প্যানেল

ক্রোমিয়াম সমস্যা: 1205856

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

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

Chrome DevTools টিমের সাথে যোগাযোগ করা হচ্ছে

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

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

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

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