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

Jecelyn Yeen

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

DevTools-এ এখন ডেডিকেটেড CSS flexbox ডিবাগিং টুল রয়েছে!

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

শৈলী ফলকে, আপনি display: flex বা display: inline-flex ফ্লেক্সবক্স সম্পাদক খুলতে ইনলাইন-ফ্লেক্স। ফ্লেক্সবক্স সম্পাদক ফ্লেক্সবক্স বৈশিষ্ট্য সম্পাদনা করার একটি দ্রুত উপায় প্রদান করে। এটি নিজেই চেষ্টা করুন!

উপরন্তু, লেআউট প্যানে একটি ফ্লেক্সবক্স বিভাগ রয়েছে, পৃষ্ঠায় সমস্ত ফ্লেক্সবক্স উপাদান প্রদর্শন করুন। আপনি প্রতিটি উপাদানের ওভারলে টগল করতে পারেন।

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

নতুন কোর ওয়েব ভাইটাল ওভারলে

নতুন Core Web Vitals ওভারলে দিয়ে আপনার পৃষ্ঠার কর্মক্ষমতা আরও ভালভাবে কল্পনা করুন এবং পরিমাপ করুন।

Core Web Vitals হল Google-এর একটি উদ্যোগ যা ওয়েবে একটি দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য প্রয়োজনীয় গুণমান সংকেতের জন্য একীভূত নির্দেশিকা প্রদান করে।

কমান্ড মেনু খুলুন, শো রেন্ডারিং কমান্ড চালান এবং তারপরে কোর ওয়েব ভাইটালস চেকবক্স সক্ষম করুন।

ওভারলে বর্তমানে প্রদর্শন করে:

• সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (LCP) : লোডিং কর্মক্ষমতা পরিমাপ করে। একটি ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদান করার জন্য, পৃষ্ঠাটি প্রথম লোড হওয়া শুরু হওয়ার 2.5 সেকেন্ডের মধ্যে LCP হওয়া উচিত।
• প্রথম ইনপুট বিলম্ব (FID) : ইন্টারঅ্যাক্টিভিটি পরিমাপ করে। একটি ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে, পৃষ্ঠাগুলিতে 100 মিলিসেকেন্ডের কম FID থাকা উচিত৷
• Cumulative Layout Shift (CLS) : চাক্ষুষ স্থিতিশীলতা পরিমাপ করে। একটি ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য, পৃষ্ঠাগুলির একটি CLS 0.1-এর কম বজায় রাখা উচিত৷

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

সমস্যা ট্যাব আপডেট

কনসোল স্ট্যাটাস বারে সমস্যা সংখ্যা সরানো হয়েছে

সমস্যা সতর্কতাগুলির দৃশ্যমানতা উন্নত করতে কনসোল স্ট্যাটাস বারে এখন একটি নতুন ইস্যু গণনা বোতাম যোগ করা হয়েছে। এটি কনসোলে সমস্যা বার্তা প্রতিস্থাপন করবে।

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

বিশ্বস্ত ওয়েব কার্যকলাপ সমস্যা রিপোর্ট করুন

ইস্যু ট্যাবটি এখন বিশ্বস্ত ওয়েব অ্যাক্টিভিটি সমস্যা রিপোর্ট করে। এর লক্ষ্য হল ডেভেলপারদের তাদের সাইটের বিশ্বস্ত ওয়েব অ্যাক্টিভিটি সমস্যাগুলি বুঝতে এবং ঠিক করতে সাহায্য করা, তাদের অ্যাপ্লিকেশনের গুণমান উন্নত করা।

একটি বিশ্বস্ত ওয়েব কার্যকলাপ খুলুন। তারপর, সমস্যাগুলি দেখতে কনসোল স্ট্যাটাস বারে সমস্যা গণনা বোতামে ক্লিক করে সমস্যা ট্যাব খুলুন। বিশ্বস্ত ওয়েব অ্যাক্টিভিটি কীভাবে তৈরি এবং স্থাপন করা যায় সে সম্পর্কে আরও জানতে আন্দ্রের এই আলোচনাটি দেখুন।

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

কনসোলে জাভাস্ক্রিপ্ট স্ট্রিং লিটারেল হিসাবে (বৈধ) স্ট্রিংগুলি ফর্ম্যাট করুন

এখন, কনসোলে স্ট্রিংগুলিকে কনসোলে বৈধ জাভাস্ক্রিপ্ট স্ট্রিং লিটারেল হিসাবে ফর্ম্যাট করে। পূর্বে, স্ট্রিং প্রিন্ট করার সময় কনসোল ডবল কোট এড়িয়ে যাবে না।

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

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

DevTools এখন অ্যাপ্লিকেশন প্যানেলের অধীনে নতুন ট্রাস্ট টোকেন প্যানে বর্তমান ব্রাউজিং প্রসঙ্গে সমস্ত উপলব্ধ ট্রাস্ট টোকেন প্রদর্শন করে৷

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

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

CSS কালার-গামুট মিডিয়া বৈশিষ্ট্য অনুকরণ করুন

color-gamut মিডিয়া ক্যোয়ারী আপনাকে ব্রাউজার এবং আউটপুট ডিভাইস দ্বারা সমর্থিত রঙের আনুমানিক পরিসর পরীক্ষা করতে দেয়। উদাহরণস্বরূপ, যদি color-gamut: p3 মিডিয়া ক্যোয়ারী মিলে যায়, তাহলে এর মানে হল যে ব্যবহারকারীর ডিভাইস ডিসপ্লে-P3 কালারস্পেস সমর্থন করে।

কমান্ড মেনু খুলুন, শো রেন্ডারিং কমান্ড চালান, এবং তারপর এমুলেট সিএসএস মিডিয়া বৈশিষ্ট্য কালার-গামুট ড্রপডাউন সেট করুন।

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

উন্নত প্রগতিশীল ওয়েব অ্যাপস টুলিং

DevTools এখন ডকুমেন্টেশনের লিঙ্ক সহ কনসোলে আরও বিস্তারিত প্রগ্রেসিভ ওয়েব অ্যাপস (PWA) ইনস্টলেবিলিটি সতর্কতা বার্তা প্রদর্শন করে।

ম্যানিফেস্টের বিবরণ 324 অক্ষরের বেশি হলে ম্যানিফেস্ট ফলক এখন একটি সতর্কতা বার্তা দেখায়।

উপরন্তু, PWA-এর স্ক্রিনশট প্রয়োজনীয়তার সাথে না মিললে ম্যানিফেস্ট ফলক এখন একটি সতর্কতা বার্তা দেখায়। এখানে PWA স্ক্রিনশট সম্পত্তি এবং এর প্রয়োজনীয়তা সম্পর্কে আরও জানুন।

ক্রোমিয়াম সমস্যা: 1146450 , 1169689 , 965802

নেটওয়ার্ক প্যানেলে নতুন Remote Address Space কলাম

প্রতিটি নেটওয়ার্ক রিসোর্সের নেটওয়ার্ক আইপি অ্যাড্রেস স্পেস দেখতে নেটওয়ার্ক প্যানেলে নতুন Remote Address Space কলাম ব্যবহার করুন।

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

কর্মক্ষমতা উন্নতি

DevTools খোলার সাথে পৃষ্ঠা লোডের কার্যক্ষমতা এখন উন্নত হয়েছে। কিছু চরম ক্ষেত্রে আমরা 10x কর্মক্ষমতা উন্নতি দেখেছি।

DevTools স্ট্যাক ট্রেস সংগ্রহ করে এবং কোনও সমস্যার ক্ষেত্রে বিকাশকারীর দ্বারা পরবর্তী ব্যবহারের জন্য কনসোল বার্তা বা অ্যাসিঙ্ক্রোনাস টাস্কগুলিতে সংযুক্ত করে। যেহেতু এই সংগ্রহটি ব্রাউজার ইঞ্জিনে সিঙ্ক্রোনাসভাবে ঘটতে হবে, তাই স্লো স্ট্যাক ট্রেস সংগ্রহটি DevTools খোলার সাথে পৃষ্ঠাটিকে উল্লেখযোগ্যভাবে ধীর করে দিতে পারে। আমরা স্ট্যাক ট্রেস সংগ্রহের ওভারহেড উল্লেখযোগ্যভাবে হ্রাস করতে পেরেছি।

আরও বিস্তারিত প্রকৌশল ব্লগ পোস্টের জন্য সাথে থাকুন যা বাস্তবায়ন সম্পর্কে ব্যাখ্যা করা হয়েছে।

ক্রোমিয়াম সমস্যা: 1069425 , 1077657৷

ফ্রেম বিশদ দৃশ্যে অনুমোদিত/অনুমোদিত বৈশিষ্ট্যগুলি প্রদর্শন করুন৷

ফ্রেম বিশদ দৃশ্য এখন অনুমতি নীতি দ্বারা নিয়ন্ত্রিত অনুমোদিত এবং অননুমোদিত ব্রাউজার বৈশিষ্ট্যগুলির একটি তালিকা দেখায়৷

অনুমতি নীতি হল একটি ওয়েব প্ল্যাটফর্ম API যা একটি ওয়েবসাইটকে তার নিজস্ব ফ্রেমে বা এটি এম্বেড করা আইফ্রেমে ব্রাউজার বৈশিষ্ট্যগুলির ব্যবহারের অনুমতি বা ব্লক করার ক্ষমতা দেয়৷

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

কুকিজ ফলকে নতুন SameParty কলাম

অ্যাপ্লিকেশন প্যানেলে কুকিজ প্যানে এখন কুকিজের SameParty অ্যাট্রিবিউট প্রদর্শন করে। একই ফার্স্ট-পার্টি সেটের উত্সের অনুরোধে একটি কুকি অন্তর্ভুক্ত করা উচিত কিনা তা নির্দেশ করার জন্য SameParty অ্যাট্রিবিউট হল একটি নতুন বুলিয়ান অ্যাট্রিবিউট।

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

অবহেলিত অ-মানক fn.displayName সমর্থন

অ-মানক fn.displayName এর সমর্থন বাতিল করা হয়েছে। পরিবর্তে fn.name ব্যবহার করুন।

error.stack এবং DevTools স্ট্যাক ট্রেসে প্রদর্শিত ফাংশনগুলির জন্য ডেভেলপারদের ডিবাগ নাম নিয়ন্ত্রণ করার উপায় হিসাবে Chrome ঐতিহ্যগতভাবে অ-মানক fn.displayName বৈশিষ্ট্যকে সমর্থন করেছে৷ উপরের উদাহরণে, কল স্ট্যাক পূর্বে noLongerSupport দেখাবে।

fn.displayName স্ট্যান্ডার্ড fn.name দিয়ে প্রতিস্থাপন করুন, যা অ-মানক fn.displayName বৈশিষ্ট্য প্রতিস্থাপন করতে ECMAScript 2015-এ কনফিগারযোগ্য ( Object.defineProperty এর মাধ্যমে) করা হয়েছিল।

fn.displayName এর জন্য সমর্থন অবিশ্বস্ত এবং ব্রাউজার ইঞ্জিন জুড়ে সামঞ্জস্যপূর্ণ নয়। এটি স্ট্যাক ট্রেস সংগ্রহকে ধীর করে দেয়, এমন একটি খরচ যা ডেভেলপাররা সর্বদা প্রদান করে তা তারা আসলে fn.displayName ব্যবহার করুক বা না করুক না কেন।

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

সেটিংস মেনুতে Don't show Chrome Data Saver warning এর অবচয়

Don't show Chrome Data Saver warning সেটিংটি সরানো হয়েছে কারণ Chrome ডেটা সেভার অবমুক্ত করা হয়েছে ৷

Chromium সমস্যা: 1056922

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

সমস্যা ট্যাবে স্বয়ংক্রিয় কম-কনট্রাস্ট সমস্যা রিপোর্টিং

DevTools ইস্যু ট্যাবে স্বয়ংক্রিয়ভাবে বৈপরীত্য সমস্যা রিপোর্ট করার জন্য পরীক্ষামূলক সমর্থন যোগ করেছে।

কম-কনট্রাস্ট টেক্সট হল ওয়েবে সবচেয়ে সাধারণ স্বয়ংক্রিয়ভাবে সনাক্তযোগ্য অ্যাক্সেসযোগ্যতা সমস্যা। ইস্যু ট্যাবে এই সমস্যাগুলি দেখালে ডেভেলপারদের এই সমস্যাগুলি সহজে খুঁজে পেতে সাহায্য করে।

কম-কনট্রাস্ট সমস্যা সহ একটি পৃষ্ঠা খুলুন (যেমন এই ডেমো )। তারপর, সমস্যাগুলি দেখতে কনসোল স্ট্যাটাস বারে সমস্যা গণনা বোতামে ক্লিক করে সমস্যা ট্যাব খুলুন।

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

এলিমেন্টস প্যানেলে সম্পূর্ণ অ্যাক্সেসিবিলিটি ট্রি ভিউ

আপনি এখন একটি পৃষ্ঠার নতুন এবং উন্নত সম্পূর্ণ অ্যাক্সেসিবিলিটি ট্রি ভিউ দেখতে টগল করতে পারেন।

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

পরীক্ষা সক্রিয় করার পরে, উপাদান প্যানেলে একটি নতুন বোতাম দেখাবে, বিদ্যমান DOM ট্রি এবং সম্পূর্ণ অ্যাক্সেসিবিলিটি ট্রির মধ্যে স্যুইচ করতে ক্লিক করুন৷

দয়া করে মনে রাখবেন এটি একটি প্রাথমিক পর্যায়ের পরীক্ষা। আমরা সময়ের সাথে সাথে কার্যকারিতা উন্নত এবং প্রসারিত করার পরিকল্পনা করি।

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

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

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

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

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

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

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

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