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

Jecelyn Yeen

CSS গ্রিড সম্পাদক

একটি অত্যন্ত অনুরোধ করা বৈশিষ্ট্য. আপনি এখন নতুন সিএসএস গ্রিড সম্পাদকের সাথে সিএসএস গ্রিডের পূর্বরূপ দেখতে এবং লেখক করতে পারেন!

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

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

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

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

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

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

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

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

উৎস অর্ডার দর্শক

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

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

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

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

এলিমেন্টস প্যানেলে iframe উপাদানটিতে ডান-ক্লিক করে iframe বিবরণ দেখুন এবং ফ্রেমের বিবরণ দেখান নির্বাচন করুন।

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

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

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

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

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

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

এক্সএইচআর লেবেলের নাম পরিবর্তন করে ফেচ/এক্সএইচআর করুন

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

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

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

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

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

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

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

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

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

ইস্যু ট্যাবে Quirks মোড সংক্রান্ত সমস্যার রিপোর্ট করুন

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

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

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

Chromium সমস্যা: 622660

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

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

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

বাতিঘর প্যানেলে বাতিঘর 7.5

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

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

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

কল স্ট্যাকের মধ্যে "রিস্টার্ট ফ্রেম" কনটেক্সট মেনু বাতিল করা হয়েছে

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

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

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

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

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

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

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

[পরীক্ষামূলক] পুতুল রেকর্ডার

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

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

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

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

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

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

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

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

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

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

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