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

Jecelyn Yeen

নতুন CSS গ্রিড ডিবাগিং টুল

DevTools-এ এখন CSS গ্রিড ডিবাগিংয়ের জন্য আরও ভাল সমর্থন রয়েছে!

যখন আপনার পৃষ্ঠায় একটি HTML উপাদানের display: grid বা display: inline-grid এটিতে প্রয়োগ করা হয়, আপনি উপাদান প্যানেলে এটির পাশে একটি grid ব্যাজ দেখতে পাবেন। পৃষ্ঠায় একটি গ্রিড ওভারলে প্রদর্শন টগল করতে ব্যাজটিতে ক্লিক করুন৷

নতুন লেআউট ফলকটিতে একটি গ্রিড বিভাগ রয়েছে যা আপনাকে গ্রিডগুলি দেখার জন্য অনেকগুলি বিকল্প সরবরাহ করে।

আরও জানতে ডকুমেন্টেশন দেখুন।

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

নতুন WebAuthn ট্যাব

আপনি এখন নতুন WebAuthn ট্যাব দিয়ে প্রমাণীকরণকারীদের অনুকরণ করতে এবং ওয়েব প্রমাণীকরণ API ডিবাগ করতে পারেন।

WebAuthn ট্যাব খুলতে আরও বিকল্প > আরও সরঞ্জাম > WebAuthn নির্বাচন করুন।

নতুন WebAuthn ট্যাবের আগে, Chrome-এ কোনো নেটিভ WebAuthn ডিবাগিং সমর্থন ছিল না। বিকাশকারীদের ওয়েব প্রমাণীকরণ API দিয়ে তাদের ওয়েব অ্যাপ্লিকেশন পরীক্ষা করার জন্য শারীরিক প্রমাণীকরণকারীদের প্রয়োজন।

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

WebAuthn বৈশিষ্ট্য সম্পর্কে আরও জানতে আমাদের ডকুমেন্টেশন দেখুন।

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

উপরের এবং নীচের প্যানেলের মধ্যে সরঞ্জামগুলি সরান৷

DevTools এখন DevTools-এ উপরের এবং নীচের প্যানেলের মধ্যে চলন্ত টুল সমর্থন করে। এইভাবে, আপনি একবারে যেকোনো দুটি টুল দেখতে পারেন।

উদাহরণস্বরূপ, যদি আপনি উপাদান এবং উত্স প্যানেল একবারে দেখতে চান, আপনি উত্স প্যানেলে ডান ক্লিক করতে পারেন, এবং নীচে সরানোর জন্য নীচে সরান নির্বাচন করতে পারেন৷

একইভাবে, আপনি একটি ট্যাবে ডান ক্লিক করে নীচের যে কোনও ট্যাবকে উপরে নিয়ে যেতে পারেন এবং উপরে সরান নির্বাচন করুন।

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

উপাদান প্যানেল আপডেট

স্টাইল প্যানে কম্পিউটেড সাইডবার প্যানটি দেখুন

আপনি এখন স্টাইল প্যানে কম্পিউটেড সাইডবার প্যানটি টগল করতে পারেন।

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

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

কম্পিউটেড প্যানে CSS বৈশিষ্ট্যগুলিকে গোষ্ঠীভুক্ত করা

আপনি এখন কম্পিউটেড প্যানে বিভাগ অনুসারে CSS বৈশিষ্ট্যগুলিকে গোষ্ঠীবদ্ধ করতে পারেন।

এই নতুন গ্রুপিং বৈশিষ্ট্যের সাথে, কম্পিউটেড প্যানে (কম স্ক্রলিং) নেভিগেট করা সহজ হবে এবং সিএসএস পরিদর্শনের জন্য সম্পর্কিত বৈশিষ্ট্যগুলির একটি সেটে বেছে বেছে ফোকাস করা হবে।

উপাদান প্যানেলে, একটি উপাদান নির্বাচন করুন। CSS বৈশিষ্ট্যগুলিকে গোষ্ঠী/আনগ্রুপ করতে গ্রুপ চেকবক্সে টগল করুন।

ক্রোমিয়াম সমস্যা: 1096230 , 1084673 , 1106251

লাইটহাউস প্যানেলে বাতিঘর 6.4

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

বাতিঘর 6.4-এ নতুন অডিট:

• প্রিলোড ফন্ট . যদি font-display: optional আগে থেকে লোড করা হয়েছে।
• বৈধ উৎস মানচিত্র । বড়, প্রথম পক্ষের জাভাস্ক্রিপ্টের জন্য একটি পৃষ্ঠায় বৈধ উৎস মানচিত্র থাকলে অডিট করে।
• [পরীক্ষামূলক] বড় জাভাস্ক্রিপ্ট লাইব্রেরি । বড় জাভাস্ক্রিপ্ট লাইব্রেরি খারাপ কর্মক্ষমতা হতে পারে. এই অডিটটি সাধারণ, বৃহৎ জাভাস্ক্রিপ্ট লাইব্রেরি যেমন moment.js এর জন্য সস্তা বিকল্পের পরামর্শ দেয়।

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

টাইমিং বিভাগে performance.mark() ইভেন্ট

একটি পারফরম্যান্স রেকর্ডিংয়ের সময় বিভাগটি এখন performance.mark() ইভেন্টগুলি চিহ্নিত করে।

নেটওয়ার্ক প্যানেলে নতুন resource-type এবং url ফিল্টার

নেটওয়ার্ক অনুরোধ ফিল্টার করতে নেটওয়ার্ক প্যানেলে নতুন resource-type এবং url কীওয়ার্ড ব্যবহার করুন।

উদাহরণস্বরূপ, নেটওয়ার্ক অনুরোধের উপর ফোকাস করার জন্য resource-type:image ব্যবহার করুন যা ইমেজ।

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

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

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

শেষ পয়েন্টে COEP এবং COOP reporting to প্রদর্শন করুন

আপনি এখন নিরাপত্তা এবং বিচ্ছিন্নতা বিভাগের অধীনে শেষ পয়েন্টে ক্রস-অরিজিন এমবেডার নীতি (COEP) এবং ক্রস-অরিজিন ওপেনার নীতি (COOP) reporting to দেখতে পারেন।

Reporting API একটি নতুন HTTP শিরোনাম, Report-To সংজ্ঞায়িত করে, যা ওয়েব ডেভেলপারদেরকে সতর্কতা এবং ত্রুটি পাঠানোর জন্য ব্রাউজারের সার্ভারের শেষ পয়েন্ট নির্দিষ্ট করার একটি উপায় দেয়৷

কীভাবে COEP এবং COOP সক্ষম করবেন এবং আপনার ওয়েবসাইটকে "ক্রস-অরিজিন আইসোলেটেড" করবেন সে সম্পর্কে আরও জানতে এই নিবন্ধটি পড়ুন।

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

COEP এবং COOP report-only মোড প্রদর্শন করুন

DevTools এখন COEP এবং COOP-এর জন্য report-only লেবেল প্রদর্শন করে যেগুলি report-only মোডে সেট করা আছে।

কিভাবে তথ্য ফাঁস প্রতিরোধ করা যায় এবং আপনার ওয়েবসাইটে COOP এবং COEP সক্ষম করা যায় সে সম্পর্কে জানতে এই ভিডিওটি দেখুন।

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

আরও টুল মেনুতে Settings অবচয়

আরও টুল মেনুতে Settings অবহেলিত হয়েছে। পরিবর্তে প্রধান প্যানেল থেকে সেটিংস খুলুন।

Chromium সমস্যা: 1121312

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

CSS ওভারভিউ প্যানেলে রঙের বৈসাদৃশ্যের সমস্যাগুলি দেখুন এবং ঠিক করুন

CSS ওভারভিউ প্যানেল এখন আপনার পৃষ্ঠার কম রঙের বৈসাদৃশ্য পাঠ্যের একটি তালিকা প্রদর্শন করে।

এই উদাহরণে, ডেমো পৃষ্ঠায় একটি কম রঙের বৈসাদৃশ্য সমস্যা রয়েছে। সমস্যাটিতে ক্লিক করুন, আপনি সমস্যা আছে এমন উপাদানগুলির একটি তালিকা দেখতে পারেন।

এলিমেন্ট প্যানেলে এলিমেন্ট খুলতে তালিকার একটি এলিমেন্টে ক্লিক করুন। কম কনট্রাস্ট টেক্সট ঠিক করতে সাহায্য করার জন্য DevTools স্বয়ংক্রিয় রঙের সাজেশন প্রদান করে ।

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

DevTools-এ কীবোর্ড শর্টকাট কাস্টমাইজ করুন

আপনি এখন DevTools-এ আপনার প্রিয় কমান্ডগুলির জন্য কীবোর্ড শর্টকাটগুলি কাস্টমাইজ করতে পারেন৷

সেটিংস > শর্টকাট- এ যান, একটি কমান্ডে ঘোরানো এবং কীবোর্ড শর্টকাট কাস্টমাইজ করতে সম্পাদনা বোতামে (পেন আইকন) ক্লিক করুন।

সমস্ত শর্টকাট রিসেট করতে, ডিফল্ট শর্টকাট পুনরুদ্ধার করুন এ ক্লিক করুন।

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

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

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

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

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

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

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

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