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

কেইস বাস্ক
Kayce Basques
X GitHub

দৃষ্টিশক্তির ঘাটতি অনুকরণ করুন

রেন্ডারিং ট্যাবটি খুলুন এবং নতুন ইমুলেট ভিশন ডেফিসিয়েন্সি ফিচারটি ব্যবহার করুন যাতে বিভিন্ন ধরণের ভিশন ডেফিসিয়েন্সি সহ লোকেরা আপনার সাইটে কীভাবে অভিজ্ঞতা লাভ করে সে সম্পর্কে আরও ভাল ধারণা পান।

ঝাপসা দৃষ্টি অনুকরণ করা।

ঝাপসা দৃষ্টি অনুকরণ করা।

DevTools ঝাপসা দৃষ্টি এবং নিম্নলিখিত ধরণের রঙিন দৃষ্টির ঘাটতি অনুকরণ করতে পারে:

  • প্রোটানোপিয়া: কোনও লাল আলো বুঝতে না পারা।
  • ডিউটেরানোপিয়া: কোনও সবুজ আলো বুঝতে না পারা।
  • ট্রাইটানোপিয়া: নীল আলো বুঝতে না পারা।
  • অ্যাক্রোমাটোপসিয়া: ধূসর রঙের ছায়া ছাড়া অন্য কোনও রঙ বুঝতে না পারা (অত্যন্ত বিরল)।

এই বর্ণদৃষ্টির ঘাটতির কম চরম রূপ বিদ্যমান, এবং বাস্তবে এগুলি বেশি সাধারণ। উদাহরণস্বরূপ, প্রোটানোমালি হল লাল আলোর প্রতি সংবেদনশীলতা হ্রাস ( প্রোটানোপিয়ার বিপরীতে, যা লাল আলো উপলব্ধি করতে সম্পূর্ণ অক্ষমতা)। তবে, এই "-অসাধারণ" দৃষ্টি ঘাটতিগুলি স্পষ্টভাবে সংজ্ঞায়িত করা হয়নি: এই ধরণের দৃষ্টি ঘাটতিযুক্ত প্রতিটি ব্যক্তি আলাদা এবং বিভিন্ন জিনিস দেখতে পারে (প্রাসঙ্গিক রঙের কম/বেশি উপলব্ধি করতে সক্ষম)।

DevTools-এ আরও চরম সিমুলেশনের জন্য ডিজাইন করার মাধ্যমে, আপনার ওয়েব অ্যাপগুলি প্রোটানোমালি, ডিউটেরানোমালি, ট্রাইটানোমালি এবং অ্যাক্রোমাটোমালি আক্রান্ত ব্যক্তিদের জন্যও অ্যাক্সেসযোগ্য হওয়ার নিশ্চয়তা রয়েছে।

Chromium সমস্যা #1003700- এ প্রতিক্রিয়া পাঠান, অথবা বাস্তবায়ন সম্পর্কে আরও পড়ুন ।

লোকেল অনুকরণ করুন

আপনি এখন Sensors > Location এ একটি অবস্থান সেট করে লোকেল অনুকরণ করতে পারেন। কমান্ড মেনু খুলুন এবং Sensors ট্যাব অ্যাক্সেস করতে Sensors টাইপ করুন। এই ক্রিয়াগুলি সম্পাদন করার পরে DevTools বর্তমান ডিফল্ট লোকেল পরিবর্তন করে, নিম্নলিখিতগুলিকে প্রভাবিত করে:

  • Intl.* API গুলি, যেমন new Intl.NumberFormat().resolvedOptions().locale
  • অন্যান্য লোকেল-সচেতন জাভাস্ক্রিপ্ট API যেমন String.prototype.localeCompare এবং *.prototype.toLocaleString , যেমন 123_456..toLocaleString()
  • DOM API গুলি যেমন navigator.language এবং navigator.languages
  • Accept-Language HTTP অনুরোধ হেডার

নিজে চেষ্টা করার জন্য লোকেল-নির্ভর কোড উদাহরণটি দেখুন।

Chromium সমস্যা #1051822- এ প্রতিক্রিয়া পাঠান।

ক্রস-অরিজিন এম্বেডার নীতি (COEP) ডিবাগিং

নেটওয়ার্ক প্যানেল এখন ক্রস-অরিজিন এম্বেডার পলিসি ডিবাগিং তথ্য প্রদান করে।

এখন স্ট্যাটাস কলামে একটি অনুরোধ কেন ব্লক করা হয়েছিল তার একটি দ্রুত ব্যাখ্যা এবং আরও ডিবাগিংয়ের জন্য অনুরোধের হেডারগুলি দেখার জন্য একটি লিঙ্ক রয়েছে:

স্ট্যাটাস কলামে ব্লক করা অনুরোধগুলি

হেডার ট্যাবের রেসপন্স হেডার বিভাগটি সমস্যাগুলি কীভাবে সমাধান করবেন সে সম্পর্কে আরও নির্দেশিকা প্রদান করে:

রেসপন্স হেডার বিভাগে আরও নির্দেশিকা

Chromium সমস্যা #1051466- এ প্রতিক্রিয়া পাঠান।

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

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

নতুন আইকনগুলির প্রেরণা ছিল UI-কে অন্যান্য GUI ডিবাগিং টুলের সাথে আরও সামঞ্জস্যপূর্ণ করা (যা সাধারণত ব্রেকপয়েন্টগুলিকে লাল রঙ করে) এবং এক নজরে 3টি বৈশিষ্ট্যের মধ্যে পার্থক্য করা সহজ করে তোলা।

Chromium সমস্যা #1041830- এ প্রতিক্রিয়া পাঠান।

নেটওয়ার্ক প্যানেলে নতুন cookie-path ফিল্টার কীওয়ার্ড ব্যবহার করে নির্দিষ্ট কুকি পাথ সেট করে এমন নেটওয়ার্ক অনুরোধগুলিতে ফোকাস করুন।

cookie-path এর মতো আরও বিশেষ কীওয়ার্ড আবিষ্কার করতে বৈশিষ্ট্য অনুসারে ফিল্টার অনুরোধগুলি দেখুন।

কমান্ড মেনু থেকে বাম দিকে ডক করুন

কমান্ড মেনু খুলুন এবং আপনার ভিউপোর্টের বাম দিকে DevTools সরাতে Dock to left কমান্ডটি চালান।

DevTools ভিউপোর্টের বাম দিকে ডক করা আছে

Chromium সমস্যা #1011679- এ প্রতিক্রিয়া পাঠান।

প্রধান মেনুতে Settings বিকল্পটি সরানো হয়েছে

প্রধান মেনু থেকে সেটিংস খোলার বিকল্পটি এখন আরও সরঞ্জামের অধীনে পাওয়া যাবে।

'প্রধান মেনু' খোলা থাকবে 'আরও সরঞ্জাম' 'সেটিংস'-এর উপর ফোকাস করে।

Chromium সমস্যা #1050855- এ প্রতিক্রিয়া পাঠান।

অডিট প্যানেল এখন লাইটহাউস প্যানেল।

DevTools এবং Lighthouse টিমগুলি প্রায়শই ওয়েব ডেভেলপারদের কাছ থেকে প্রতিক্রিয়া পেত যে তারা শুনতে পেত যে DevTools থেকে Lighthouse চালানো সম্ভব, কিন্তু যখন তারা এটি চেষ্টা করতে গিয়েছিল তখন তারা "Lighthouse" প্যানেলটি খুঁজে পায়নি, তাই Audits প্যানেলটি এখন Lighthouse প্যানেল।

বাতিঘর প্যানেল

একটি ফোল্ডারে সমস্ত স্থানীয় ওভাররাইড মুছে ফেলুন

লোকাল ওভাররাইড সেট আপ করার পর আপনি এখন একটি ফোল্ডারে ডান-ক্লিক করতে পারেন এবং সেই ফোল্ডারে থাকা সমস্ত লোকাল ওভাররাইড মুছে ফেলার জন্য নতুন ডিলিট অল ওভাররাইড বিকল্পটি নির্বাচন করতে পারেন।

সমস্ত ওভাররাইড মুছে ফেলুন

Chromium সমস্যা #1016501- এ প্রতিক্রিয়া পাঠান।

লং টাস্ক UI আপডেট করা হয়েছে

লং টাস্ক হলো জাভাস্ক্রিপ্ট কোড যা দীর্ঘ সময় ধরে মূল থ্রেডকে একচেটিয়া করে রাখে, যার ফলে একটি ওয়েব পৃষ্ঠা জমে যায়।

আপনি বেশ কিছুদিন ধরে পারফরম্যান্স প্যানেলে লং টাস্ক ভিজ্যুয়ালাইজ করতে সক্ষম হচ্ছেন, কিন্তু Chrome 83-এ পারফরম্যান্স প্যানেলে লং টাস্ক ভিজ্যুয়ালাইজেশন UI আপডেট করা হয়েছে। একটি টাস্কের লং টাস্ক অংশটি এখন একটি ডোরাকাটা লাল ব্যাকগ্রাউন্ড দিয়ে রঙিন করা হয়েছে।

নতুন লং টাস্ক UI

Chromium সমস্যা #1054447- এ প্রতিক্রিয়া পাঠান।

ম্যানিফেস্ট প্যানে মাস্কেবল আইকন সাপোর্ট

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

আপনার মাস্কেবল আইকনটি অ্যান্ড্রয়েড ওরিও ডিভাইসে ভালো দেখাবে কিনা তা পরীক্ষা করার জন্য ম্যানিফেস্ট প্যানে নতুন Show only the minimum safe area for maskable icons চেকবক্সটি সক্ষম করুন। আরও জানতে আমার বর্তমান আইকনগুলি কি প্রস্তুত? দেখুন।

'মাস্কেবল আইকনগুলির জন্য কেবলমাত্র সর্বনিম্ন নিরাপদ এলাকা দেখান' চেকবক্স

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

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

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

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

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

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