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

Jecelyn Yeen

ওয়েব ভাইটাল তথ্য পারফরম্যান্স প্যানেলে পপ আপ হয়

পারফরম্যান্স প্যানেলে একটি ওয়েব ভাইটাল মার্কারে হোভার করুন সূচকটি কী তা বোঝার জন্য - পারফরম্যান্স ভাল কিনা, উন্নতির প্রয়োজন বা খারাপ।

Chromium সমস্যা: 1147872

CSS স্ক্রোল-স্ন্যাপ কল্পনা করুন

CSS স্ক্রোল-স্ন্যাপ সারিবদ্ধকরণ পরিদর্শন করতে আপনি এখন এলিমেন্টস প্যানেলে scroll-snap ব্যাজ টগল করতে পারেন।

যখন আপনার পৃষ্ঠায় একটি HTML উপাদান (যেমন এই ডেমো পৃষ্ঠা) এটিতে scroll-snap-type প্রয়োগ করা হয়, আপনি উপাদান প্যানেলে এটির পাশে একটি scroll-snap ব্যাজ দেখতে পাবেন। পৃষ্ঠায় একটি স্ক্রোল-স্ন্যাপ ওভারলে প্রদর্শন টগল করতে ব্যাজটিতে ক্লিক করুন।

উপরের উদাহরণে, আপনি স্ন্যাপ প্রান্তগুলিতে বিন্দু চিহ্ন দেখতে পারেন। স্ন্যাপ আইটেম ড্যাশ আউটলাইন আছে যখন স্ক্রল পোর্ট কঠিন রূপরেখা আছে. স্ক্রোল প্যাডিং সবুজ রঙে ভরা হয় যখন স্ক্রোল মার্জিন কমলা রঙে ভরা হয়।

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

নতুন মেমরি পরিদর্শক

জাভাস্ক্রিপ্টে একটি ArrayBuffer পরিদর্শন করার জন্য নতুন মেমরি পরিদর্শক ব্যবহার করুন, সেইসাথে Wasm মেমরি।

এই ডেমো পৃষ্ঠা খুলুন. উত্স প্যানেলে, demo-js.js ফাইলটি খুলুন এবং লাইন 18 এ একটি ব্রেকপয়েন্ট সেট করুন৷

পৃষ্ঠাটি রিফ্রেশ করুন। ডান ডিবাগার প্যানে স্কোপ বিভাগটি প্রসারিত করুন। বাফার মানের পাশে নতুন আইকনটি লক্ষ্য করুন। মেমরি ইন্সপেক্টর প্রকাশ করতে এটিতে ক্লিক করুন।

এই নতুন মেমরি পরিদর্শকের সাথে JavaScript ArrayBuffer এবং WebAssembly.Memory পরিদর্শন সম্পর্কে আরও জানতে ডকুমেন্টেশন দেখুন।

Chromium সমস্যা: 1166577

এলিমেন্টস প্যানেলে নতুন ব্যাজ সেটিংস ফলক

আপনি এখন এলিমেন্টস প্যানেলে ব্যাজ সেটিংসের মাধ্যমে বেছে বেছে ব্যাজ সক্ষম বা অক্ষম করতে পারেন। কাস্টমাইজ করার জন্য এই বৈশিষ্ট্যটি ব্যবহার করুন এবং ওয়েব পৃষ্ঠাগুলি পরিদর্শন করার সময় গুরুত্বপূর্ণ ব্যাজগুলিতে মনোনিবেশ করুন৷

এলিমেন্টস প্যানেলে, যেকোনো উপাদানে ডান ক্লিক করুন। প্রসঙ্গ মেনু থেকে ব্যাজ সেটিংস নির্বাচন করুন, ব্যাজ সেটিংস ফলক উপরে প্রদর্শিত হবে। ব্যাজ দেখাতে/লুকানোর জন্য যেকোনো চেকবক্স সক্রিয় বা অক্ষম করুন।

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

আকৃতির অনুপাতের তথ্য সহ উন্নত চিত্রের পূর্বরূপ

এলিমেন্টস প্যানেলে ইমেজ প্রিভিউ এখন ইমেজ সম্পর্কে আরও তথ্য প্রদর্শন করে - রেন্ডার করা সাইজ, রেন্ডার করা অ্যাসপেক্ট রেশিও, ইন্ট্রিনসিক সাইজ, ইনট্রিনসিক অ্যাসপেক্ট রেশিও এবং ফাইল সাইজ।

এই তথ্যগুলি আপনাকে আপনার ছবিগুলিকে আরও ভালভাবে বুঝতে এবং আপনার প্রয়োজন হলে অপ্টিমাইজেশান প্রয়োগ করতে সহায়তা করে৷

ইমেজ অ্যাসপেক্ট রেশিও তথ্য নেটওয়ার্ক প্যানেলে পাওয়া যায় যখন আপনি ছবিটির পূর্বরূপ দেখতে ক্লিক করেন।

ক্রোমিয়াম সমস্যা: 1149832 , 1170656

Content-Encoding কনফিগার করার বিকল্পগুলির সাথে নতুন নেটওয়ার্ক শর্ত বোতাম

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

নেটওয়ার্ক শর্ত ট্যাবে একটি নতুন স্বীকৃত বিষয়বস্তু-এনকোডিং বিকল্প যোগ করা হয়েছে। জিজিপ, ব্রোটলি, বা অন্যান্য ভবিষ্যতের Content-Encoding সমর্থন করে না এমন ব্রাউজারগুলিতে সার্ভারের প্রতিক্রিয়াগুলি সঠিকভাবে এনকোড করা হয়েছে কিনা তা পরীক্ষা করার জন্য এটি কনফিগার করুন৷

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

শৈলী ফলক বর্ধিতকরণ

শৈলী ফলকে গণনা করা মান দেখার জন্য নতুন শর্টকাট

আপনি এখন শৈলী ফলকে একটি CSS বৈশিষ্ট্যে ডান ক্লিক করতে পারেন এবং গণনা করা CSS মান দেখতে গণনা করা মান দেখুন নির্বাচন করতে পারেন।

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

accent-color কীওয়ার্ডের জন্য সমর্থন

শৈলী ফলকের স্বয়ংসম্পূর্ণ UI এখন accent-color CSS কীওয়ার্ড সনাক্ত করে, যা ওয়েব বিকাশকারীদের UI নিয়ন্ত্রণের জন্য অ্যাকসেন্ট রঙ নির্দিষ্ট করতে দেয় (যেমন চেকবক্স, রেডিও বোতাম) উপাদান দ্বারা তৈরি।

accent-color CSS প্রপার্টি বর্তমানে পরীক্ষামূলক । এটি পরীক্ষা করতে দয়া করে chrome://flags/#enable-experimental-web-platform-features সক্ষম করুন৷

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

রঙ এবং আইকন সহ সমস্যার ধরন শ্রেণীবদ্ধ করুন

ইস্যু ট্যাব এখন সমস্যাগুলিকে পৃষ্ঠার ত্রুটি, আসন্ন ব্রেকিং পরিবর্তন এবং আরও ভাল তীব্রতার ইঙ্গিতের জন্য সম্ভাব্য উন্নতিগুলির মধ্যে শ্রেণীবদ্ধ করে৷ আপনি কনসোলে ইস্যু কাউন্ট বোতামে ক্লিক করে সমস্যা ট্যাব খুলতে পারেন।

• পৃষ্ঠার ত্রুটি (লাল) । পৃষ্ঠা কার্যকারিতার জন্য অবিলম্বে প্রভাব ফেলে এমন সমস্যা, যেমন সঠিক CORS হেডার সেট না করা ইত্যাদি।
• আসন্ন ব্রেকিং পরিবর্তন (হলুদ) . যে সমস্যাগুলি ওয়েব প্ল্যাটফর্মের একটি আসন্ন, বেমানান পরিবর্তন সম্পর্কে অবহিত করে যার ফলে পৃষ্ঠা কার্যকারিতা নষ্ট হতে পারে (যেমন CORS RFC 1918 পরিবর্তনের সতর্কতা)।
• সম্ভাব্য উন্নতি (নীল) । পৃষ্ঠায় সম্ভাব্য উন্নতি, কিন্তু বর্তমানে পৃষ্ঠার মৌলিক কার্যকারিতা নষ্ট করছে না (যেমন অ্যাক্সেসিবিলিটি সমস্যা)

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

ট্রাস্ট টোকেন মুছুন

আপনি এখন অ্যাপ্লিকেশান প্যানেলের অধীনে ট্রাস্ট টোকেন প্যানে নতুন ডিলিট বোতাম দিয়ে ট্রাস্ট টোকেন মুছে ফেলতে পারেন।

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

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

ফ্রেম বিশদ দৃশ্যে অবরুদ্ধ বৈশিষ্ট্যগুলির বিশদ বিবরণ দেখুন

আপনি এখন ফ্রেম বিশদ দৃশ্যে অনুমতি নীতি বিভাগের অধীনে অবরুদ্ধ বৈশিষ্ট্যগুলির বিশদ বিবরণ দেখতে পারেন।

এই ডেমো পৃষ্ঠা খুলুন. অ্যাপ্লিকেশন প্যানেলে যান এবং একটি ফ্রেম নির্বাচন করুন। অনুমতি নীতি বিভাগে, অক্ষম বৈশিষ্ট্য বৈশিষ্ট্যে স্ক্রোল করুন। বৈশিষ্ট্যটি কেন ব্লক করা হয়েছে তার বিশদ বিবরণ দেখতে Show details এ ক্লিক করুন। আইফ্রেম বা নেটওয়ার্ক অনুরোধে নেভিগেট করতে প্রতিটি নীতির পাশের আইকনে ক্লিক করুন যা বৈশিষ্ট্যটিকে অবরুদ্ধ করেছে৷

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

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

পরীক্ষা সেটিংয়ে পরীক্ষাগুলি ফিল্টার করুন৷

নতুন এক্সপেরিমেন্ট ফিল্টার দিয়ে দ্রুত পরীক্ষাগুলি খুঁজুন। উদাহরণস্বরূপ, সেটিংস > পরীক্ষা-নিরীক্ষায় যান, ফিল্টার টেক্সটবক্সে, "কনট্রাস্ট" শব্দটি দিয়ে সমস্ত পরীক্ষা ফিল্টার করতে "কন্ট্রাস্ট" টাইপ করুন।

ক্যাশে স্টোরেজ প্যানে নতুন Vary Header কলাম

Vary HTTP প্রতিক্রিয়া শিরোনাম দেখতে ক্যাশে স্টোরেজ প্যানে নতুন Vary Header কলাম ব্যবহার করুন।

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

উত্স প্যানেল উন্নতি

নতুন জাভাস্ক্রিপ্ট বৈশিষ্ট্য জন্য সমর্থন

DevTools এখন নতুন প্রাইভেট ব্র্যান্ড চেক জাভাস্ক্রিপ্ট ভাষা বৈশিষ্ট্য সমর্থন করে, ওরফে #foo in obj ।

এই প্রাইভেট ব্র্যান্ড চেক ফিচারটি যেকোনো প্রদত্ত অবজেক্টে প্রাইভেট ক্লাস ফিল্ড টেস্টিংকে সমর্থন করার জন্য ইন অপারেটরকে প্রসারিত করে।

কনসোল এবং উত্স প্যানেলে এটি ব্যবহার করে দেখুন। আপনি ডিবাগার ফলকের অধীনে স্কোপ বিভাগে ব্যক্তিগত ক্ষেত্রগুলিও পরিদর্শন করতে পারেন।

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

ব্রেকপয়েন্ট ডিবাগিংয়ের জন্য উন্নত সমর্থন

DevTools এখন সঠিকভাবে একাধিক স্ক্রিপ্টে সঠিকভাবে ব্রেকপয়েন্ট সেট করে। আধুনিক জাভাস্ক্রিপ্ট বান্ডলার (যেমন ওয়েবপ্যাক , রোলআপ ) কোড বিভাজন বৈশিষ্ট্য সমর্থন করে - এমন পরিস্থিতিতে রয়েছে যেখানে একটি ভাগ করা উপাদান একাধিক রুটে (কোড বিভক্ত) অন্তর্ভুক্ত করা যেতে পারে।

পূর্বে, DevTools শুধুমাত্র একটি কাঁচা অবস্থানে ব্রেকপয়েন্ট সেট করতে সক্ষম ছিল। এই সাম্প্রতিক উন্নতির মাধ্যমে, DevTools সমস্ত প্রাসঙ্গিক অবস্থানে সঠিকভাবে ব্রেকপয়েন্ট সেট করতে পারে।

ক্রোমিয়াম সমস্যা: 1142705 , 979000 , 1180794

[] স্বরলিপি সহ হোভার পূর্বরূপ সমর্থন করুন

DevTools এখন জাভাস্ক্রিপ্ট সদস্য অভিব্যক্তিতে হোভার প্রিভিউ সমর্থন করে যা উত্স প্যানেলে [] স্বরলিপি ব্যবহার করে।

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

HTML ফাইলের উন্নত রূপরেখা

DevTools-এ এখন HTML ফাইলগুলির জন্য আরও ভাল রূপরেখা সমর্থন রয়েছে৷ উত্স প্যানেলে, একটি HTML ফাইল খুলুন। আপনি ম্যাক-এ Cmd + Shift + O বা Windows-এ Ctrl + Shift + O কীবোর্ড দিয়ে কোডের আউটলাইন টগল করতে পারেন।

নীচের উদাহরণে, DevTools এখন আউটলাইনে সমস্ত ফাংশন সঠিকভাবে তালিকাভুক্ত করে। পূর্বে, DevTools শুধুমাত্র কিছু ফাংশন দেখাত।

ক্রোমিয়াম সমস্যা: 761019 , 1191465

Wasm ডিবাগিংয়ের জন্য সঠিক ত্রুটি স্ট্যাক ট্রেস

DevTools এখন ইনলাইন ফাংশন কল সমাধান করে এবং Wasm ডিবাগিংয়ের জন্য সঠিক ত্রুটি স্ট্যাক ট্রেস দেখায়।

পূর্বে DevTools শুধুমাত্র ত্রুটি স্ট্যাক ট্রেসে জেনেরিক Wasm রেফারেন্স প্রদর্শন করত।

বাম দিকের ক্রোমের পুরানো সংস্করণটি ত্রুটি স্ট্যাক ট্রেসে উত্স অবস্থান (যেমন dsquare ) দেখায় না, যেখানে ডানদিকের নতুন সংস্করণটি দেখায়৷

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

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

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

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

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

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

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

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