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

Kayce Basques

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

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

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

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

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- এ প্রতিক্রিয়া পাঠান।

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

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

নতুন আইকনগুলির জন্য অনুপ্রেরণা ছিল অন্যান্য GUI ডিবাগিং সরঞ্জামগুলির সাথে UI কে আরও সামঞ্জস্যপূর্ণ করা (যা সাধারণত ব্রেকপয়েন্টকে লাল করে) এবং এক নজরে 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 সিরিজে নতুন কী আছে তাতে কভার করা হয়েছে এমন সবকিছুর একটি তালিকা।