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

জেসলিন ইয়েন

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

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

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

ক্রোমিয়াম সমস্যা: ১১৪৭৮৭২

CSS স্ক্রোল-স্ন্যাপ ভিজ্যুয়ালাইজ করুন

CSS স্ক্রল-স্ন্যাপ অ্যালাইনমেন্ট পরীক্ষা করার জন্য আপনি এখন এলিমেন্টস প্যানেলে scroll-snap ব্যাজটি টগল করতে পারেন।

সিএসএস স্ক্রোল-স্ন্যাপ

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

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

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

নতুন মেমোরি ইন্সপেক্টর

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

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

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

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

মেমোরি ইন্সপেক্টর

ক্রোমিয়াম সমস্যা: ১১৬৬৫৭৭

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

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

এলিমেন্টস প্যানেলে ব্যাজ সেটিংস প্যান

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

ক্রোমিয়াম সমস্যা: ১০৬৬৭৭২

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

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

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

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

ছবির প্রিভিউ দেখতে ক্লিক করলে, ছবির আকৃতির অনুপাতের তথ্য নেটওয়ার্ক প্যানেলেও পাওয়া যাবে।

নেটওয়ার্ক প্যানেলে ছবির আকৃতির অনুপাতের তথ্য

ক্রোমিয়াম সমস্যা: ১১৪৯৮৩২ , ১১৭০৬৫৬

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

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

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

কন্টেন্ট-এনকোডিং কনফিগার করার বিকল্প সহ নতুন নেটওয়ার্ক কন্ডিশন বোতাম

ক্রোমিয়াম সমস্যা: ১১৬২০৪২

স্টাইলস প্যান বর্ধিতকরণ

স্টাইলস প্যানে গণনা করা মান দেখার জন্য নতুন শর্টকাট

এখন আপনি Styles প্যানে একটি CSS প্রোপার্টিতে ডান ক্লিক করতে পারেন এবং View computed value নির্বাচন করে কম্পিউটেড CSS মান দেখতে পারেন।

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

ক্রোমিয়াম সমস্যা: ১০৭৬১৯৮

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

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

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

উচ্চারণ-রঙ

ক্রোমিয়াম সমস্যা: ১০৯২০৯৩

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

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

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

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

ক্রোমিয়াম সমস্যা: ১১৮৩২৪১

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

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

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

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

ক্রোমিয়াম সমস্যা: ১১২৬৮২৪

ফ্রেমের বিবরণ ভিউতে ব্লক করা বৈশিষ্ট্যগুলির বিবরণ দেখুন

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

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

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

ফ্রেমের বিবরণ ভিউতে ব্লক করা বৈশিষ্ট্যগুলি

ক্রোমিয়াম সমস্যা: ১১৫৮৮২৭

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

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

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

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

Vary HTTP রেসপন্স হেডার দেখতে Cache Storage প্যানে নতুন Vary Header কলামটি ব্যবহার করুন।

হেডার কলাম পরিবর্তন করুন

ক্রোমিয়াম সমস্যা: ১১৮৬০৪৯

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

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

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

এই প্রাইভেট ব্র্যান্ড চেক বৈশিষ্ট্যটি যেকোনো বস্তুর উপর প্রাইভেট ক্লাস ফিল্ড পরীক্ষা সমর্থন করার জন্য ইন অপারেটরকে প্রসারিত করে।

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

জাভাস্ক্রিপ্টের ব্যক্তিগত ব্র্যান্ড চেক

ক্রোমিয়াম সমস্যা: ১১৩৭৪

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

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

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

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

[] নোটেশন সহ হোভার প্রিভিউ সমর্থন করুন

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

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

ক্রোমিয়াম সমস্যা: ১১৭৮৩০৫

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

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

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

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

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

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

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

পূর্বে DevTools শুধুমাত্র Error stack traces-এ জেনেরিক Wasm রেফারেন্স প্রদর্শন করত।

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

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

ক্রোমিয়াম সমস্যা: ১১৮৯১৬১

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

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

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

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

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

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