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

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

রেন্ডারিং ট্যাবটি খুলুন এবং নতুন এমুলেট দৃষ্টি ঘাটতি বৈশিষ্ট্যটি ব্যবহার করুন যাতে লোকেরা কীভাবে আপনার সাইটের বিভিন্ন ধরণের দৃষ্টি ঘাটতি অনুভব করে সে সম্পর্কে আরও ভাল ধারণা পেতে।

অস্পষ্ট দৃষ্টি অনুকরণ.

অস্পষ্ট দৃষ্টি অনুকরণ.

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

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

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

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

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

স্থানীয় অনুকরণ

আপনি এখন সেন্সর > অবস্থানে একটি অবস্থান সেট করে লোকেলস অনুকরণ করতে পারেন। কমান্ড মেনু খুলুন এবং সেন্সর ট্যাব অ্যাক্সেস করতে 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" প্যানেল খুঁজে পায়নি, তাই অডিট প্যানেল এখন বাতিঘর প্যানেল।

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

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

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

সব ওভাররাইড মুছুন

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

দীর্ঘ টাস্ক UI আপডেট করা হয়েছে

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

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

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

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

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

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

আপনার মুখোশযোগ্য আইকন Android Oreo ডিভাইসে ভাল দেখাবে কিনা তা পরীক্ষা করতে ম্যানিফেস্ট ফলকে শুধুমাত্র মুখোশযোগ্য আইকনগুলির জন্য ন্যূনতম নিরাপদ এলাকা দেখান চেকবক্সটি চালু করুন। চেক আউট আমার বর্তমান আইকন প্রস্তুত? আরও জানতে.

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

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

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

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

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

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

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

DevTools সিরিজে নতুন কী আছে সব কিছুর একটি তালিকা।

ক্রোম 123

ক্রোম 122

ক্রোম 121

ক্রোম 120

ক্রোম 119

ক্রোম 118

ক্রোম 117

ক্রোম 116

ক্রোম 115

ক্রোম 114

ক্রোম 113

ক্রোম 112

ক্রোম 111

ক্রোম 110

ক্রোম 109

ক্রোম 108

ক্রোম 107

ক্রোম 106

ক্রোম 105

ক্রোম 104

ক্রোম 103

ক্রোম 102

ক্রোম 101

ক্রোম 100

ক্রোম 99

ক্রোম 98

ক্রোম 97

ক্রোম 96

ক্রোম 95

ক্রোম 94

ক্রোম 93

ক্রোম 92

ক্রোম 91

ক্রোম 90

ক্রোম ৮৯

ক্রোম 88

ক্রোম 87

ক্রোম 86

ক্রোম 85

ক্রোম 84

ক্রোম ৮৩

ক্রোম 82

Chrome 82 বাতিল করা হয়েছে

ক্রোম 81

ক্রোম 80

ক্রোম 79

ক্রোম 78

ক্রোম 77

ক্রোম 76

ক্রোম 75

ক্রোম 74

ক্রোম 73

ক্রোম 72

ক্রোম 71

ক্রোম 70

ক্রোম 68

ক্রোম 67

ক্রোম 66

ক্রোম 65

ক্রোম 64

ক্রোম 63

ক্রোম 62

ক্রোম 61

ক্রোম 60

ক্রোম 59