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

Jecelyn Yeen

বিশ্বস্ত প্রকার লঙ্ঘনের জন্য ডিবাগিং সমর্থন

বিশ্বস্ত প্রকার লঙ্ঘনের ব্রেকপয়েন্ট

আপনি এখন সোর্স প্যানেলে বিশ্বস্ত প্রকার লঙ্ঘনের ক্ষেত্রে ব্রেকপয়েন্ট সেট করতে এবং ব্যতিক্রমগুলি ধরতে পারেন।

Trusted Types API আপনাকে DOM-ভিত্তিক ক্রস-সাইট স্ক্রিপ্টিং দুর্বলতা প্রতিরোধ করতে সাহায্য করে। Trusted Types ব্যবহার করে DOM XSS দুর্বলতামুক্ত অ্যাপ্লিকেশনগুলি কীভাবে লিখতে হয়, পর্যালোচনা করতে হয় এবং রক্ষণাবেক্ষণ করতে হয় তা এখানে শিখুন।

সোর্স প্যানেলে, ডিবাগার সাইডবার প্যানটি খুলুন। CSP লঙ্ঘন ব্রেকপয়েন্ট বিভাগটি প্রসারিত করুন এবং ব্যতিক্রমগুলিতে থামাতে বিশ্বস্ত প্রকার লঙ্ঘন চেকবক্সটি সক্ষম করুন। এই ডেমো পৃষ্ঠাটি দিয়ে নিজেই চেষ্টা করুন।

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

সোর্স প্যানেলে সমস্যাটিকে "সমস্যা" ট্যাবে লিঙ্ক করুন

সোর্স প্যানেলে এখন ট্রাস্টেড টাইপ লঙ্ঘনকারী লাইনের পাশে একটি সতর্কতা আইকন দেখাবে। ব্যতিক্রমটি প্রিভিউ করতে এটিতে কার্সার রাখুন। সমস্যা ট্যাবটি প্রসারিত করতে এটিতে ক্লিক করুন, এটি ব্যতিক্রমগুলি সম্পর্কে আরও বিশদ এবং এটি কীভাবে ঠিক করবেন তার নির্দেশিকা প্রদান করে।

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

ভিউপোর্টের বাইরে নোডের স্ক্রিনশট ক্যাপচার করুন

এখন আপনি সম্পূর্ণ নোডের স্ক্রিনশট নিতে পারবেন, যার মধ্যে ফোল্ডের নীচের কন্টেন্টও অন্তর্ভুক্ত। পূর্বে, ভিউপোর্টে কন্টেন্ট দৃশ্যমান না হওয়ার কারণে স্ক্রিনশটটি কেটে ফেলা হত। এখন পূর্ণ-পৃষ্ঠার স্ক্রিনশটগুলিও সুনির্দিষ্ট।

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

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

নেটওয়ার্ক অনুরোধের জন্য নতুন ট্রাস্ট টোকেন ট্যাব

নতুন ট্রাস্ট টোকেন ট্যাব ব্যবহার করে ট্রাস্ট টোকেন নেটওয়ার্ক অনুরোধগুলি পরীক্ষা করুন।

ট্রাস্ট টোকেন হল একটি নতুন API যা জালিয়াতির বিরুদ্ধে লড়াই করতে এবং বটকে প্রকৃত মানুষ থেকে আলাদা করতে সাহায্য করে, প্যাসিভ ট্র্যাকিং ছাড়াই। ট্রাস্ট টোকেন দিয়ে কীভাবে শুরু করবেন তা শিখুন।

পরবর্তী রিলিজগুলিতে আরও ডিবাগিং সমর্থন আসবে।

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

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

লাইটহাউস প্যানেল এখন লাইটহাউস ৭ চালাচ্ছে। পরিবর্তনের সম্পূর্ণ তালিকার জন্য রিলিজ নোটগুলি দেখুন।

লাইটহাউস ৭-এ নতুন অডিট:

• সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (LCP) ইমেজ প্রিলোড করুন । আপনার LCP সময় উন্নত করার জন্য LCP এলিমেন্ট দ্বারা ব্যবহৃত ইমেজটি প্রিলোড করা আছে কিনা তা অডিট করে।
• Issues প্যানেলে লগ করা সমস্যা । Issues প্যানেলে অমীমাংসিত সমস্যার একটি তালিকা নির্দেশ করে।
• প্রোগ্রেসিভ ওয়েব অ্যাপস (PWA) । PWA বিভাগটি বেশ উল্লেখযোগ্যভাবে পরিবর্তিত হয়েছে।

• ইনস্টলেবল গ্রুপটি এখন সম্পূর্ণরূপে সক্ষমতা যাচাই দ্বারা পরিচালিত হয় যা Chrome এর ইনস্টলেবল মানদণ্ড সক্ষম করে। এই একই সংকেতগুলি ম্যানিফেস্ট প্যানে দেখা যায়।

  • "একজন পরিষেবা কর্মী নিবন্ধন করেন..." অডিটটি PWA অপ্টিমাইজড গ্রুপে স্থানান্তরিত হয় এবং "HTTPS ব্যবহার করে" অডিটটি এখন মূল "ইনস্টলযোগ্যতা প্রয়োজনীয়তা" অডিটের অংশ হিসাবে অন্তর্ভুক্ত করা হয়েছে।
  • দ্রুত এবং নির্ভরযোগ্য গ্রুপটি সরিয়ে ফেলা হয়েছে। যেহেতু পুনর্নির্মিত "ইনস্টলযোগ্যতার প্রয়োজনীয়তা" অডিটে অফলাইন-ক্ষমতা পরীক্ষা অন্তর্ভুক্ত রয়েছে, তাই "বর্তমান পৃষ্ঠা এবং start_url অফলাইনে 200 এর সাথে প্রতিক্রিয়া জানায়" অডিটটি সরিয়ে ফেলা হয়েছে। "মোবাইল নেটওয়ার্কে পৃষ্ঠা লোড যথেষ্ট দ্রুত" অডিটটিও সরিয়ে ফেলা হয়েছে।

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

এলিমেন্ট প্যানেল আপডেট

CSS :target অবস্থা জোর করে সমর্থন করে

আপনি এখন DevTools ব্যবহার করে CSS :target অবস্থা জোর করে পরীক্ষা করতে পারেন।

এলিমেন্টস প্যানেলে, একটি এলিমেন্ট নির্বাচন করুন এবং এলিমেন্টের অবস্থা টগল করুন। স্টাইলগুলিকে জোর করে পরীক্ষা করতে :target চেকবক্সটি সক্ষম করুন।

যখন URL-এর হ্যাশ এবং একটি উপাদানের আইডি একই থাকে তখন :target pseudo-class to style এলিমেন্ট ব্যবহার করুন। নিজে চেষ্টা করে দেখতে এই ডেমোটি দেখুন। এই নতুন DevTools বৈশিষ্ট্যটি আপনাকে URLটি সর্বদা ম্যানুয়ালি পরিবর্তন না করেই এই ধরণের স্টাইল পরীক্ষা করতে দেয়।

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

উপাদানের ডুপ্লিকেট করার জন্য নতুন শর্টকাট

তাৎক্ষণিকভাবে একটি উপাদান ক্লোন করতে নতুন ডুপ্লিকেট উপাদান শর্টকাট ব্যবহার করুন।

Elements প্যানেলে একটি এলিমেন্টে রাইট ক্লিক করুন, Duplicate element নির্বাচন করুন। এর অধীনে একটি নতুন এলিমেন্ট তৈরি হবে।

বিকল্পভাবে, আপনি কীবোর্ড শর্টকাট ব্যবহার করে উপাদানটি ডুপ্লিকেট করতে পারেন:

• ম্যাক: Shift + Option + ⬇️
• উইন্ডো/লিনাক্স: Shift + Alt + ⬇️

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

কাস্টম CSS বৈশিষ্ট্যের জন্য রঙ পিকার

স্টাইলস প্যানে এখন কাস্টম CSS বৈশিষ্ট্যের জন্য রঙ পিকার দেখানো হচ্ছে।

এছাড়াও, আপনি Shift কী ধরে রেখে কালার পিকারে ক্লিক করে কালার ভ্যালুর RGBA, HSLA, এবং Hex উপস্থাপনাগুলি ঘুরে দেখতে পারেন।

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

CSS বৈশিষ্ট্য কপি করার জন্য নতুন শর্টকাট

আপনি এখন কয়েকটি নতুন শর্টকাট ব্যবহার করে দ্রুত CSS বৈশিষ্ট্যগুলি অনুলিপি করতে পারবেন।

এলিমেন্টস প্যানেলে, একটি এলিমেন্ট নির্বাচন করুন। তারপর, মানটি কপি করতে স্টাইলস প্যানে একটি CSS ক্লাস বা CSS প্রোপার্টিতে ডান-ক্লিক করুন।

CSS ক্লাসের জন্য কপি অপশন:

• সিলেক্টর কপি করুন । বর্তমান সিলেক্টরের নাম কপি করুন।
• নিয়ম কপি করুন । বর্তমান নির্বাচকের নিয়ম কপি করুন।
• সকল ঘোষণা অনুলিপি করুন : বর্তমান নিয়মের অধীনে সকল ঘোষণা অনুলিপি করুন, যার মধ্যে অবৈধ এবং প্রিফিক্সযুক্ত বৈশিষ্ট্য অন্তর্ভুক্ত রয়েছে।

CSS প্রপার্টির জন্য কপি অপশন:

• ঘোষণা কপি করুন । বর্তমান লাইনের ঘোষণা কপি করুন।
• কপি প্রপার্টি । বর্তমান লাইনের প্রোপার্টি কপি করুন।
• মান কপি করুন : বর্তমান লাইনের মান কপি করুন।

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

কুকিজ আপডেট

URL-ডিকোড করা কুকি দেখানোর জন্য নতুন বিকল্প

আপনি এখন কুকিজ প্যানে URL-ডিকোড করা কুকিজ মান দেখতে বেছে নিতে পারেন।

অ্যাপ্লিকেশন প্যানেলে যান এবং কুকিজ প্যান নির্বাচন করুন। তালিকার যেকোনো কুকি নির্বাচন করুন। ডিকোড করা কুকি দেখতে নতুন Show URL decoded চেকবক্সটি সক্ষম করুন।

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

শুধুমাত্র দৃশ্যমান কুকিজ সাফ করুন

কুকিজ প্যানে " সমস্ত কুকিজ সাফ করুন" বোতামটি এখন "ক্লিয়ার ফিল্টার করা কুকিজ সাফ করুন" বোতাম দ্বারা প্রতিস্থাপিত হয়েছে।

অ্যাপ্লিকেশন প্যানেল > কুকিজ প্যানে, কুকিজ ফিল্টার করার জন্য টেক্সটবক্সে টেক্সট লিখুন। আমাদের এখানে উদাহরণে, আমরা "PREF" দ্বারা তালিকাটি ফিল্টার করি। দৃশ্যমান কুকিজ মুছে ফেলার জন্য ফিল্টার করা কুকিজ সাফ করুন বোতামে ক্লিক করুন। ফিল্টার টেক্সট সাফ করুন এবং আপনি অন্যান্য কুকিজ তালিকায় রয়ে যেতে দেখতে পাবেন। পূর্বে, আপনার কাছে কেবল সমস্ত কুকিজ সাফ করার বিকল্প ছিল।

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

স্টোরেজ প্যানে তৃতীয় পক্ষের কুকিজ সাফ করার জন্য নতুন বিকল্প

স্টোরেজ প্যানে সাইট ডেটা সাফ করার সময়, DevTools এখন ডিফল্টরূপে শুধুমাত্র প্রথম-পক্ষের কুকি সাফ করে। তৃতীয়-পক্ষের কুকি সাফ করার জন্য তৃতীয়-পক্ষের কুকি অন্তর্ভুক্ত করা সক্ষম করুন।

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

কাস্টম ডিভাইসের জন্য ব্যবহারকারী-এজেন্ট ক্লায়েন্ট ইঙ্গিত সম্পাদনা করুন

আপনি এখন কাস্টম ডিভাইসের জন্য ব্যবহারকারী-এজেন্ট ক্লায়েন্ট ইঙ্গিত সম্পাদনা করতে পারেন।

সেটিংস > ডিভাইসে যান এবং কাস্টম ডিভাইস যোগ করুন... এ ক্লিক করুন। ক্লায়েন্ট ইঙ্গিতগুলি সম্পাদনা করতে ব্যবহারকারী এজেন্ট ক্লায়েন্ট ইঙ্গিত বিভাগটি প্রসারিত করুন।

ইউজার-এজেন্ট ক্লায়েন্ট হিন্টস হল ইউজার-এজেন্ট স্ট্রিংয়ের একটি বিকল্প যা ডেভেলপারদের গোপনীয়তা-সংরক্ষণ এবং এরগনোমিক উপায়ে ব্যবহারকারীর ব্রাউজার সম্পর্কে তথ্য অ্যাক্সেস করতে সক্ষম করে। ইউজার-এজেন্ট ক্লায়েন্ট হিন্টস সম্পর্কে আরও জানুন web.dev/user-agent-client-hints/ এ।

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

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

"নেটওয়ার্ক লগ রেকর্ড করুন" সেটিংটি বজায় রাখুন

DevTools এখন "রেকর্ড নেটওয়ার্ক লগ" সেটিংটি বজায় রাখে। পূর্বে, যখনই কোনও পৃষ্ঠা পুনরায় লোড করা হয় তখন DevTools ব্যবহারকারীর পছন্দ রিসেট করত।

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

নেটওয়ার্ক প্যানেলে ওয়েবট্রান্সপোর্ট সংযোগগুলি দেখুন

নেটওয়ার্ক প্যানেল এখন ওয়েবট্রান্সপোর্ট সংযোগ প্রদর্শন করে।

WebTransport হল একটি নতুন API যা কম-বিলম্বিতা, দ্বিমুখী, ক্লায়েন্ট-সার্ভার বার্তা প্রদান করে। এর ব্যবহারের ধরণ এবং web.dev/webtransport/ এ বাস্তবায়নের ভবিষ্যত সম্পর্কে প্রতিক্রিয়া কীভাবে জানাবেন সে সম্পর্কে আরও জানুন।

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

"অনলাইন" এর নাম পরিবর্তন করে "নো থ্রটলিং" করা হয়েছে

নেটওয়ার্ক ইমুলেশন অপশন "অনলাইন" এখন "নো থ্রটলিং" নামকরণ করা হয়েছে।

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

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

কনসোল এবং সোর্স প্যানেলে অবজেক্ট কপি করার জন্য নতুন শর্টকাট

আপনি এখন কনসোল এবং সোর্স প্যানেলে নতুন শর্টকাট ব্যবহার করে অবজেক্টের মান কপি করতে পারবেন। এটি বিশেষ করে যখন আপনার কাছে একটি বড় অবজেক্ট (যেমন একটি দীর্ঘ অ্যারে) কপি করার থাকে তখন সুবিধাজনক।

ক্রোমিয়াম সমস্যা: ১১৪৯৮৫৯ , ১১৪৮৩৫৩

সোর্স প্যানেল এবং স্টাইলস প্যানে ফাইলের নাম কপি করার জন্য নতুন শর্টকাট

আপনি এখন ডান ক্লিক করে ফাইলের নাম কপি করতে পারেন:

• সোর্স প্যানেলে একটি ফাইল, অথবা
• এলিমেন্টস প্যানেলের স্টাইলস প্যানে ফাইলের নাম

ফাইলের নাম কপি করতে কনটেক্সট মেনু থেকে ফাইলের নাম কপি করুন নির্বাচন করুন।

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

ফ্রেমের বিবরণ দেখুন আপডেট

ফ্রেমের বিবরণ ভিউতে নতুন পরিষেবা কর্মীদের তথ্য

DevTools এখন নিবেদিতপ্রাণ পরিষেবা কর্মীদের ফ্রেমের নীচে প্রদর্শন করে যা তাদের তৈরি করে।

অ্যাপ্লিকেশন প্যানেলে, পরিষেবা কর্মীদের সাথে একটি ফ্রেম প্রসারিত করুন, তারপর বিশদটি দেখতে পরিষেবা কর্মীদের গাছের নীচে একটি পরিষেবা কর্মী নির্বাচন করুন।

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

ফ্রেমের বিবরণ ভিউতে মেমরির তথ্য পরিমাপ করুন

performance.measureMemory() API স্ট্যাটাস এখন API প্রাপ্যতা বিভাগের অধীনে প্রদর্শিত হবে।

নতুন performance.measureMemory() API সমগ্র ওয়েব পৃষ্ঠার মেমরি ব্যবহার অনুমান করে। এই নতুন API ব্যবহার করে আপনার ওয়েব পৃষ্ঠার মোট মেমরি ব্যবহার কীভাবে নিরীক্ষণ করবেন তা এই নিবন্ধে জানুন।

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

সমস্যা ট্যাব থেকে মতামত প্রদান করুন

যদি আপনি কখনও কোনও সমস্যার বার্তা উন্নত করতে চান, তাহলে কনসোল থেকে সমস্যা ট্যাবে যান অথবা আরও সেটিংস > আরও সরঞ্জাম > সমস্যা > সমস্যা ট্যাব খুলতে যান। একটি সমস্যার বার্তা প্রসারিত করুন এবং " কি সমস্যা বার্তাটি আপনার জন্য সহায়ক?" এ ক্লিক করুন, তারপর আপনি পপ আপে প্রতিক্রিয়া জানাতে পারেন।

পারফরম্যান্স প্যানেলে বাদ দেওয়া ফ্রেমগুলি

পারফরম্যান্স প্যানেলে লোড পারফরম্যান্স বিশ্লেষণ করার সময়, ফ্রেম বিভাগটি এখন বাদ পড়া ফ্রেমগুলিকে লাল হিসাবে চিহ্নিত করে। ফ্রেম রেট জানতে এটিতে কার্সার রাখুন।

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

ডিভাইস মোডে ফোল্ডেবল এবং ডুয়াল-স্ক্রিন অনুকরণ করুন

আপনি এখন DevTools-এ ডুয়াল-স্ক্রিন এবং ফোল্ডেবল ডিভাইসগুলি অনুকরণ করতে পারেন।

ডিভাইস টুলবার সক্রিয় করার পরে, এই ডিভাইসগুলির মধ্যে একটি নির্বাচন করুন: Surface Duo অথবা Samsung Galaxy Fold ।

সিঙ্গেল-স্ক্রিন বা ফোল্ডেড এবং ডুয়াল-স্ক্রিন বা আনফোল্ডেড ভঙ্গির মধ্যে টগল করতে নতুন স্প্যান আইকনে ক্লিক করুন।

আপনি নতুন CSS মিডিয়া screen-spanning বৈশিষ্ট্য এবং জাভাস্ক্রিপ্ট getWindowSegments API অ্যাক্সেস করার জন্য Experimental Web Platform বৈশিষ্ট্যগুলি সক্ষম করতে পারেন। Experimental Web Platform বৈশিষ্ট্যগুলির পতাকার অবস্থা পরীক্ষামূলক আইকনটি প্রদর্শন করে। পতাকাটি চালু করা হলে আইকনটি হাইলাইট করা হয়। chrome://flags এ নেভিগেট করুন এবং পতাকাটি টগল করুন।

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

পরীক্ষামূলক বৈশিষ্ট্য

পাপেটিয়ার রেকর্ডার দিয়ে স্বয়ংক্রিয় ব্রাউজার পরীক্ষা করুন

DevTools এখন ব্রাউজারের সাথে আপনার মিথস্ক্রিয়ার উপর ভিত্তি করে Puppeteer স্ক্রিপ্ট তৈরি করতে পারে, যা আপনার জন্য ব্রাউজার পরীক্ষা স্বয়ংক্রিয় করা সহজ করে তোলে। Puppeteer হল একটি Node.js লাইব্রেরি যা DevTools প্রোটোকলের মাধ্যমে Chrome বা Chromium নিয়ন্ত্রণ করার জন্য একটি উচ্চ-স্তরের API প্রদান করে।

এই ডেমো পৃষ্ঠায় যান। DevTools-এ Sources প্যানেলটি খুলুন। বাম প্যানেলে Recording ট্যাবটি নির্বাচন করুন। একটি নতুন রেকর্ডিং যোগ করুন এবং ফাইলটির নাম দিন (যেমন test01.js)।

ইন্টারঅ্যাকশন রেকর্ডিং শুরু করতে নীচের রেকর্ড বোতামে ক্লিক করুন। অন-স্ক্রিন ফর্মটি পূরণ করার চেষ্টা করুন। লক্ষ্য করুন যে Puppeteer কমান্ডগুলি ফাইলের সাথে সেই অনুযায়ী সংযুক্ত করা হয়েছে। রেকর্ডিং বন্ধ করতে আবার রেকর্ড বোতামে ক্লিক করুন।

স্ক্রিপ্টটি চালানোর জন্য, Puppeteer এর অফিসিয়াল সাইটে Getting Starting নির্দেশিকা অনুসরণ করুন।

অনুগ্রহ করে মনে রাখবেন যে এটি একটি প্রাথমিক পর্যায়ের পরীক্ষা। আমরা সময়ের সাথে সাথে রেকর্ডারের কার্যকারিতা উন্নত এবং সম্প্রসারিত করার পরিকল্পনা করছি।

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

স্টাইলস প্যানে ফন্ট এডিটর

নতুন ফন্ট এডিটর হল স্টাইলস প্যানে ফন্ট সম্পর্কিত বৈশিষ্ট্যের জন্য একটি পপওভার এডিটর যা আপনার ওয়েবপৃষ্ঠার জন্য নিখুঁত টাইপোগ্রাফি খুঁজে পেতে সহায়তা করে।

পপওভারটি একটি পরিষ্কার UI প্রদান করে যা গতিশীলভাবে টাইপোগ্রাফি পরিচালনা করে বিভিন্ন স্বজ্ঞাত ইনপুট প্রকারের মাধ্যমে।

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

সিএসএস ফ্লেক্সবক্স ডিবাগিং টুল

DevTools শেষ রিলিজ থেকে flexbox ডিবাগিংয়ের জন্য পরীক্ষামূলক সমর্থন যোগ করেছে।

DevTools এখন CSS align-items প্রপার্টিটি আরও ভালোভাবে কল্পনা করার জন্য একটি নির্দেশিকা লাইন আঁকে। CSS gap প্রপার্টিটিও সমর্থিত। আমাদের এখানে উদাহরণে, আমাদের CSS gap: 12px; আছে। প্রতিটি গ্যাপের জন্য হ্যাচিং প্যাটার্নটি লক্ষ্য করুন।

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

নতুন CSP লঙ্ঘন ট্যাব

নতুন CSP লঙ্ঘন ট্যাবে এক নজরে সমস্ত কন্টেন্ট সিকিউরিটি পলিসি (CSP) লঙ্ঘন দেখুন। এই নতুন ট্যাবটি এমন একটি পরীক্ষা যা প্রচুর পরিমাণে CSP এবং বিশ্বস্ত ধরণের লঙ্ঘন সহ ওয়েব পৃষ্ঠাগুলির সাথে কাজ করা সহজ করে তুলবে।

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

নতুন রঙের বৈসাদৃশ্য গণনা - অ্যাডভান্সড পারসেপচুয়াল কনট্রাস্ট অ্যালগরিদম (APCA)

অ্যাডভান্সড পারসেপচুয়াল কনট্রাস্ট অ্যালগরিদম (APCA) কালার পিকারে AA / AAA নির্দেশিকা কনট্রাস্ট অনুপাত প্রতিস্থাপন করছে।

রঙ উপলব্ধি সম্পর্কিত আধুনিক গবেষণার উপর ভিত্তি করে APCA হল বৈসাদৃশ্য গণনার একটি নতুন উপায়। AA/AAA নির্দেশিকাগুলির তুলনায়, APCA আরও প্রেক্ষাপট-নির্ভর। বৈসাদৃশ্যটি পাঠ্যের স্থানিক বৈশিষ্ট্য (ফন্টের ওজন এবং আকার), রঙ (পাঠ্য এবং পটভূমির মধ্যে অনুভূত হালকাতার পার্থক্য) এবং প্রেক্ষাপট (পরিবেষ্টিত আলো, পারিপার্শ্বিকতা, পাঠ্যের উদ্দেশ্য) এর উপর ভিত্তি করে গণনা করা হয়।

উদাহরণটি দেখায় যে APCA থ্রেশহোল্ড হল 38% । বৈসাদৃশ্য অনুপাত অবশ্যই তালিকাভুক্ত মানের সাথে মিলিত হতে হবে বা অতিক্রম করতে হবে। এই মানটি ফন্টের ওজন এবং আকারের উপর ভিত্তি করে গণনা করা হয়, এই APCA লুকআপ টেবিলটি উল্লেখ করে।

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

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

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

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

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

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

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

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