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

Jecelyn Yeen

সিএসএস গ্রিড এডিটর

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

যখন আপনার পৃষ্ঠার কোনও HTML উপাদানে display: grid অথবা display: inline-grid প্রয়োগ করা হয়, তখন আপনি Styles প্যানে তার পাশে একটি আইকন দেখতে পাবেন। CSS গ্রিড এডিটর টগল করতে আইকনে ক্লিক করুন। এখানে আপনি অন-স্ক্রিন আইকনগুলির (যেমন justify-content: space-around ) সাহায্যে সম্ভাব্য পরিবর্তনগুলি পূর্বরূপ দেখতে পারেন এবং মাত্র এক ক্লিকে গ্রিডের উপস্থিতি তৈরি করতে পারেন।

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

কনসোলে const পুনঃঘোষণার জন্য সমর্থন

কনসোল এখন বিদ্যমান let এবং class redeclarations ছাড়াও const স্টেটমেন্টের redeclaration সমর্থন করে। নতুন জাভাস্ক্রিপ্ট কোড পরীক্ষা করার জন্য কনসোল ব্যবহার করে এমন ওয়েব ডেভেলপারদের জন্য redeclare করতে না পারা একটি সাধারণ বিরক্তিকর বিষয় ছিল।

এর ফলে ডেভেলপাররা DevTools কনসোলে কোড কপি-পেস্ট করতে পারবেন যাতে তারা এটি কীভাবে কাজ করে তা দেখতে বা পরীক্ষা করতে, কোডে ছোট ছোট পরিবর্তন করতে এবং পৃষ্ঠাটি রিফ্রেশ না করেই প্রক্রিয়াটি পুনরাবৃত্তি করতে পারে। পূর্বে, কোডটি যদি একটি const বাইন্ডিং পুনরায় ঘোষণা করে তবে DevTools একটি সিনট্যাক্স ত্রুটি ছুড়ে দিত।

নিচের উদাহরণটি দেখুন। const redeclaration পৃথক REPL স্ক্রিপ্টগুলিতে সমর্থিত (ভেরিয়েবল a দেখুন)। মনে রাখবেন যে নিম্নলিখিত পরিস্থিতিগুলি ডিজাইন দ্বারা সমর্থিত নয়:

• REPL স্ক্রিপ্টে পৃষ্ঠা স্ক্রিপ্টের const পুনঃঘোষণা অনুমোদিত নয়।
• একই REPL স্ক্রিপ্টের মধ্যে const পুনঃঘোষণা অনুমোদিত নয় (ভেরিয়েবল b দেখুন)

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

সোর্স অর্ডার ভিউয়ার

আরও ভালো অ্যাক্সেসিবিলিটি পরিদর্শনের জন্য আপনি এখন স্ক্রিনে উৎস উপাদানগুলির ক্রম দেখতে পারেন।

একটি HTML ডকুমেন্টের কন্টেন্টের ক্রম সার্চ ইঞ্জিন অপ্টিমাইজেশন এবং অ্যাক্সেসিবিলিটির জন্য গুরুত্বপূর্ণ। নতুন CSS বৈশিষ্ট্যগুলি ডেভেলপারদের এমন কন্টেন্ট তৈরি করতে সাহায্য করে যা HTML ডকুমেন্টের চেয়ে অন-স্ক্রিন ক্রমে খুব আলাদা দেখায়। এটি একটি বড় অ্যাক্সেসিবিলিটি সমস্যা কারণ স্ক্রিন রিডার ব্যবহারকারীরা দৃষ্টিশক্তিসম্পন্ন ব্যবহারকারীদের তুলনায় ভিন্ন, সম্ভবত বিভ্রান্তিকর অভিজ্ঞতা পাবেন।

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

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

এলিমেন্টস প্যানেলে আইফ্রেম এলিমেন্টে ডান ক্লিক করে আইফ্রেমের বিবরণ দেখুন এবং Show frame details নির্বাচন করুন।

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

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

উন্নত CORS ডিবাগিং সমর্থন

ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS) ত্রুটিগুলি এখন সমস্যা ট্যাবে দেখা যাচ্ছে। CORS ত্রুটির বিভিন্ন কারণ রয়েছে। সম্ভাব্য কারণ এবং সমাধানগুলি বুঝতে প্রতিটি সমস্যা প্রসারিত করতে ক্লিক করুন।

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

নেটওয়ার্ক প্যানেল আপডেট

XHR লেবেলের নাম পরিবর্তন করে Fetch/XHR করুন

XHR লেবেলটির নাম এখন Fetch/XHR রাখা হয়েছে। এই পরিবর্তনটি স্পষ্ট করে যে এই ফিল্টারটিতে XMLHttpRequest এবং Fetch API নেটওয়ার্ক অনুরোধ উভয়ই অন্তর্ভুক্ত রয়েছে।

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

নেটওয়ার্ক প্যানেলে Wasm রিসোর্সের ধরণ ফিল্টার করুন

Wasm নেটওয়ার্ক অনুরোধগুলি ফিল্টার করতে আপনি এখন নতুন Wasm বোতামে ক্লিক করতে পারেন।

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

নেটওয়ার্ক কন্ডিশন ট্যাবে ডিভাইসের জন্য ব্যবহারকারী-এজেন্ট ক্লায়েন্টের ইঙ্গিত

ইউজার-এজেন্ট ক্লায়েন্ট ইঙ্গিতগুলি এখন নেটওয়ার্ক কন্ডিশন ট্যাবের অধীনে ইউজার এজেন্ট ক্ষেত্রের ডিভাইসগুলির জন্য প্রয়োগ করা হয়।

ইউজার-এজেন্ট ক্লায়েন্ট হিন্টস হল ক্লায়েন্ট হিন্টস API-এর একটি নতুন সম্প্রসারণ, যা ডেভেলপারদের গোপনীয়তা-সংরক্ষণ এবং এরগনোমিক উপায়ে ব্যবহারকারীর ব্রাউজার সম্পর্কে তথ্য অ্যাক্সেস করতে সক্ষম করে।

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

সমস্যা ট্যাবে Quirks মোডের সমস্যাগুলি রিপোর্ট করুন

DevTools এখন Quirks Mode এবং Limited-quirks Mode সমস্যাগুলি রিপোর্ট করে।

কুইর্কস মোড এবং লিমিটেড-কুইর্কস মোড হল ওয়েব স্ট্যান্ডার্ড তৈরির আগেকার লিগ্যাসি ব্রাউজার মোড। এই মোডগুলি প্রাক-মানক-যুগের লেআউট আচরণগুলিকে অনুকরণ করে যা প্রায়শই অপ্রত্যাশিত ভিজ্যুয়াল এফেক্ট তৈরি করে।

লেআউট সমস্যাগুলি ডিবাগ করার সময়, ডেভেলপাররা ভাবতে পারেন যে এটি ব্যবহারকারী-লেখক CSS বা HTML বাগের কারণে হচ্ছে, যখন আসল সমস্যা হল পৃষ্ঠাটি যে Compat মোডে রয়েছে। DevTools এটি ঠিক করার জন্য পরামর্শ প্রদান করে।

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

পারফরম্যান্স প্যানেলে কম্পিউট ইন্টারসেকশন অন্তর্ভুক্ত করুন

DevTools এখন শিখা চার্টে কম্পিউট ইন্টারসেকশন দেখায়। এই পরিবর্তনগুলি আপনাকে ইন্টারসেকশন পর্যবেক্ষক ইভেন্টগুলি সনাক্ত করতে এবং এর সম্ভাব্য কর্মক্ষমতা ওভারহেডগুলি ডিবাগ করতে সহায়তা করে।

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

লাইটহাউস প্যানেলে লাইটহাউস ৭.৫

লাইটহাউস প্যানেলটি এখন লাইটহাউস ৭.৫ সংস্করণে চলছে। CSS-এ সংজ্ঞায়িত aspect-ratio সহ চিত্রগুলির জন্য "অনুপস্থিত স্পষ্ট প্রস্থ এবং উচ্চতা" সতর্কতা এখন সরানো হয়েছে। পূর্বে, লাইটহাউস প্রস্থ এবং উচ্চতা সংজ্ঞায়িত না করা চিত্রগুলির জন্য সতর্কতা দেখিয়েছিল।

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

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

কল স্ট্যাকে "ফ্রেম পুনঃসূচনা করুন" প্রসঙ্গ মেনুটি বন্ধ করা হয়েছে

রিস্টার্ট ফ্রেম বিকল্পটি এখন বন্ধ করা হয়েছে। এই বৈশিষ্ট্যটি ভালভাবে কাজ করার জন্য আরও উন্নয়ন প্রয়োজন, এটি বর্তমানে নষ্ট এবং প্রায়শই ক্র্যাশ করে।

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

[পরীক্ষামূলক] প্রোটোকল মনিটর

Chrome DevTools Chrome ব্রাউজারগুলিকে ইন্সট্রুমেন্ট, পরিদর্শন, ডিবাগ এবং প্রোফাইল করার জন্য Chrome DevTools প্রোটোকল (CDP) ব্যবহার করে। প্রোটোকল মনিটর আপনাকে DevTools দ্বারা করা সমস্ত CDP অনুরোধ এবং প্রতিক্রিয়া দেখার একটি উপায় প্রদান করে।

সিডিপি পরীক্ষার সুবিধার্থে দুটি নতুন ফাংশন যুক্ত করা হয়েছে:

• নতুন সেভ বোতামটি আপনাকে রেকর্ড করা বার্তাগুলিকে JSON ফাইল হিসাবে ডাউনলোড করতে দেয়।
• একটি নতুন ক্ষেত্র যা আপনাকে সরাসরি একটি কাঁচা CDP কমান্ড পাঠাতে দেয়।

ক্রোমিয়াম সমস্যা: 1204004 , 1204466

[পরীক্ষামূলক] পাপেটিয়ার রেকর্ডার

পাপেটিয়ার রেকর্ডার এখন ব্রাউজারের সাথে আপনার মিথস্ক্রিয়ার উপর ভিত্তি করে ধাপগুলির একটি তালিকা তৈরি করে, যেখানে পূর্বে DevTools সরাসরি একটি পাপেটিয়ার স্ক্রিপ্ট তৈরি করত। ধাপগুলি পাপেটিয়ার স্ক্রিপ্ট হিসাবে রপ্তানি করার জন্য একটি নতুন এক্সপোর্ট বোতাম যুক্ত করা হয়েছে।

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

অনুগ্রহ করে মনে রাখবেন যে এটি একটি প্রাথমিক পর্যায়ের পরীক্ষা। আমরা সময়ের সাথে সাথে রেকর্ডারের কার্যকারিতা উন্নত এবং সম্প্রসারিত করার পরিকল্পনা করছি।

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

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

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

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

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

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

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

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