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

Jecelyn Yeen

দ্রুত DevTools স্টার্টআপ

DevTools স্টার্টআপ এখন জাভাস্ক্রিপ্ট সংকলনের দিক থেকে ~37% দ্রুত (6.9s থেকে কমিয়ে 5s)! 🎉

স্টার্টআপের সময় সিরিয়ালাইজেশন, পার্সিং এবং ডিসিরিয়ালাইজেশনের পারফরম্যান্স ওভারহেড কমাতে দলটি কিছু অপ্টিমাইজেশন করেছে।

বাস্তবায়নের বিস্তারিত ব্যাখ্যা দিয়ে আসন্ন একটি ইঞ্জিনিয়ারিং ব্লগ পোস্ট প্রকাশিত হবে। সাথে থাকুন!

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

নতুন সিএসএস অ্যাঙ্গেল ভিজ্যুয়ালাইজেশন টুল

CSS অ্যাঙ্গেল ডিবাগিংয়ের জন্য DevTools এখন আরও ভালো সাপোর্ট পায়!

যখন আপনার পৃষ্ঠার কোনও HTML উপাদানে CSS কোণ প্রয়োগ করা হয় (যেমন background: linear-gradient(angle, color-stop1, color-stop2) , transform: rotate(angle) ), তখন স্টাইলস প্যানে কোণের পাশে একটি ঘড়ির আইকন প্রদর্শিত হয়। ঘড়ির ওভারলে টগল করতে ঘড়ির আইকনে ক্লিক করুন। ঘড়ির যেকোনো জায়গায় ক্লিক করুন অথবা কোণ পরিবর্তন করতে সুই টেনে আনুন!

কোণের মান পরিবর্তন করার জন্য মাউস এবং কীবোর্ড শর্টকাটও রয়েছে, আরও জানতে আমাদের ডকুমেন্টেশন দেখুন!

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

অসমর্থিত ছবির ধরণগুলি অনুকরণ করুন

DevTools রেন্ডারিং ট্যাবে দুটি নতুন ইমুলেশন যুক্ত করেছে, যা আপনাকে AVIF এবং WebP ইমেজ ফরম্যাট নিষ্ক্রিয় করার অনুমতি দেয়। এই নতুন ইমুলেশনগুলি ডেভেলপারদের জন্য ব্রাউজার পরিবর্তন না করেই বিভিন্ন ইমেজ লোডিং পরিস্থিতি পরীক্ষা করা সহজ করে তোলে।

ধরুন নতুন ব্রাউজারগুলির জন্য AVIF এবং WebP-তে একটি ছবি পরিবেশন করার জন্য আমাদের কাছে নিম্নলিখিত HTML কোড আছে, এবং পুরানো ব্রাউজারগুলির জন্য একটি ফলব্যাক PNG ছবি আছে।

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

রেন্ডারিং ট্যাবটি খুলুন, "AVIF ইমেজ ফর্ম্যাট অক্ষম করুন" নির্বাচন করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। img src এর উপর কার্সার রাখুন। বর্তমান ইমেজ src ( currentSrc ) এখন ফলব্যাক WebP ইমেজ।

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

স্টোরেজ প্যানে স্টোরেজ কোটার আকার সিমুলেট করুন

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

অ্যাপ্লিকেশন > স্টোরেজ এ যান, সিমুলেট কাস্টম স্টোরেজ কোটা চেকবক্সটি সক্রিয় করুন এবং স্টোরেজ কোটা অনুকরণ করতে যেকোনো বৈধ সংখ্যা লিখুন।

ক্রোমিয়াম সমস্যা: 945786 , 1146985

পারফর্মেন্স প্যানেল রেকর্ডিংয়ে নতুন ওয়েব ভাইটালস লেন

পারফর্ম্যান্স রেকর্ডিংগুলিতে এখন ওয়েব ভাইটালস তথ্য প্রদর্শনের বিকল্প রয়েছে।

আপনার লোড পারফরম্যান্স রেকর্ড করার পরে, নতুন ওয়েব ভাইটালস লেন দেখতে পারফরম্যান্স প্যানেলে ওয়েব ভাইটালস চেকবক্সটি সক্রিয় করুন।

এই লেনটি বর্তমানে ওয়েব ভাইটালস তথ্য প্রদর্শন করে যেমন ফার্স্ট কন্টেন্টফুল পেইন্ট (FCP), লার্জেস্ট কন্টেন্টফুল পেইন্ট (LCP) এবং লেআউট শিফট (LS)।

ওয়েব ভাইটালস মেট্রিক্সের সাহায্যে ব্যবহারকারীর অভিজ্ঞতা কীভাবে অপ্টিমাইজ করা যায় সে সম্পর্কে আরও জানতে web.dev/vitals দেখুন।

ক্রোমিয়াম সমস্যা: প্রযোজ্য নয়

নেটওয়ার্ক প্যানেলে CORS ত্রুটিগুলি রিপোর্ট করুন

ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS) এর কারণে যখন কোনও নেটওয়ার্ক অনুরোধ ব্যর্থ হয় তখন DevTools এখন CORS ত্রুটি দেখায়।

নেটওয়ার্ক প্যানেলে, ব্যর্থ CORS নেটওয়ার্ক অনুরোধটি লক্ষ্য করুন। স্ট্যাটাস কলামটি "CORS ত্রুটি" দেখায়। ত্রুটির উপর কার্সার রাখলে, টুলটিপটি এখন ত্রুটি কোডটি দেখায়। পূর্বে, DevTools শুধুমাত্র CORS ত্রুটির জন্য জেনেরিক "(ব্যর্থ)" অবস্থা দেখাত।

এটি CORS সমস্যার আরও বিস্তারিত বর্ণনা প্রদানের মাধ্যমে আমাদের পরবর্তী উন্নতির ভিত্তি স্থাপন করে!

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

ফ্রেমের বিবরণ দেখুন আপডেট

ফ্রেমের বিবরণ ভিউতে ক্রস-অরিজিন আইসোলেশন তথ্য

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

নতুন API প্রাপ্যতা বিভাগটি SharedArrayBuffer (SAB) এর প্রাপ্যতা এবং postMessage() ব্যবহার করে সেগুলি শেয়ার করা যাবে কিনা তা প্রদর্শন করে।

SAB এবং postMessage() বর্তমানে উপলব্ধ কিনা তা একটি অবচয় সংক্রান্ত সতর্কতা দেখানো হবে, কিন্তু প্রসঙ্গটি ক্রস-অরিজিন আইসোলেটেড নয়। ক্রস-অরিজিন আইসোলেশন সম্পর্কে আরও জানুন এবং SharedArrayBuffers মতো বৈশিষ্ট্যগুলির জন্য এটি কেন প্রয়োজন হবে তা এই নিবন্ধে জানুন।

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

ফ্রেমের বিবরণ ভিউতে নতুন ওয়েব কর্মীদের তথ্য

DevTools এখন ফ্রেমের নীচে ডেডিকেটেড ওয়েব কর্মীদের প্রদর্শন করে যা তাদের তৈরি করে।

অ্যাপ্লিকেশন প্যানেলে, ওয়েব ওয়ার্কারদের সাথে একটি ফ্রেম প্রসারিত করুন, তারপর ওয়েব ওয়ার্কারের বিবরণ দেখতে ওয়ার্কার্স ট্রির নীচে একজন কর্মী নির্বাচন করুন।

ক্রোমিয়াম সমস্যা: 1122507 , 1051466

খোলা জানালার জন্য ওপেনারের ফ্রেমের বিবরণ প্রদর্শন করুন

কোন ফ্রেমের কারণে আরেকটি উইন্ডো খোলা হয়েছে তার বিস্তারিত বিবরণ আপনি এখন দেখতে পারবেন।

উইন্ডোর বিশদ দেখতে ফ্রেম ট্রির নীচে একটি খোলা উইন্ডো নির্বাচন করুন। এলিমেন্টস প্যানেলে ওপেনারটি প্রকাশ করতে ওপেনার ফ্রেম লিঙ্কে ক্লিক করুন।

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

সার্ভিস ওয়ার্কার্স প্যান থেকে নেটওয়ার্ক প্যানেল খুলুন।

নতুন নেটওয়ার্ক অনুরোধ লিঙ্কের সাহায্যে সমস্ত পরিষেবা কর্মী (SW) অনুরোধ রাউটিং তথ্য দেখুন। এটি SW ডিবাগ করার সময় ডেভেলপারদের অতিরিক্ত প্রসঙ্গ প্রদান করে।

Application > Service Workers এ যান, SW এর Network requests এ ক্লিক করুন। নীচের প্যানেলে Network প্যানেলটি খোলা হবে যেখানে সমস্ত পরিষেবা কর্মী সম্পর্কিত অনুরোধ প্রদর্শিত হবে (নেটওয়ার্ক অনুরোধগুলি "is:service-worker-intercepted" দ্বারা ফিল্টার করা হয়)।

ক্রোমিয়াম সমস্যা: প্রযোজ্য নয়

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

প্রপার্টির মান কপি করুন

প্রসঙ্গ মেনুতে নতুন "মান অনুলিপি করুন" বিকল্পটি আপনাকে একটি নেটওয়ার্ক অনুরোধের সম্পত্তি মান অনুলিপি করতে দেয়।

নেটওয়ার্ক প্যানেলে, হেডারস প্যানটি খুলতে একটি নেটওয়ার্ক অনুরোধে ক্লিক করুন। এই বিভাগের অধীনে থাকা যেকোনো একটি বৈশিষ্ট্যে ডান ক্লিক করুন: অনুরোধ পেলোড (JSON) ফর্ম ডেটা কোয়েরি স্ট্রিং প্যারামিটার অনুরোধ শিরোনাম প্রতিক্রিয়া শিরোনাম

তারপর, আপনি আপনার ক্লিপবোর্ডে সম্পত্তির মানটি অনুলিপি করতে মান অনুলিপি করুন নির্বাচন করতে পারেন।

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

নেটওয়ার্ক ইনিশিয়েটারের জন্য স্ট্যাকট্রেস কপি করুন

একটি নেটওয়ার্ক অনুরোধে ডান-ক্লিক করুন, তারপর আপনার ক্লিপবোর্ডে স্ট্যাকট্রেসটি অনুলিপি করতে স্ট্যাকট্রেস কপি করুন নির্বাচন করুন।

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

Wasm ডিবাগিং আপডেট

মাউসওভারে Wasm ভেরিয়েবলের মান প্রিভিউ করুন

WebAssembly (Wasm) ডিসঅ্যাসেম্বলিতে যখন ব্রেকপয়েন্টে পজ করা থাকে, তখন একটি ভেরিয়েবলের উপর ঘোরানো হয়, DevTools এখন ভেরিয়েবলের বর্তমান মান দেখায়।

সোর্স প্যানেলে, একটি Wasm ফাইল খুলুন, একটি ব্রেকপয়েন্ট রাখুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। মান দেখতে একটি ভেরিয়েবলে যান।

ক্রোমিয়াম সমস্যা: 1058836 , 1071432

কনসোলে Wasm ভেরিয়েবল মূল্যায়ন করুন

ব্রেকপয়েন্টে পজ থাকা অবস্থায় আপনি এখন কনসোলে Wasm ভেরিয়েবল মূল্যায়ন করতে পারবেন।

এই উদাহরণে, আমরা local.get $input লাইনে একটি ব্রেকপয়েন্ট রেখেছি। ডিবাগ করার সময়, কনসোলে $input টাইপ করলে ভেরিয়েবলের বর্তমান মান ফিরে আসবে, যা এই ক্ষেত্রে 4 ।

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

ফাইল/মেমরির আকারের জন্য পরিমাপের ধারাবাহিক একক

DevTools এখন ফাইল/মেমোরির আকার প্রদর্শনের জন্য ধারাবাহিকভাবে kB ব্যবহার করে। পূর্বে DevTools kB (1000 বাইট) এবং KiB (1024 বাইট) মিশ্রিত করত। উদাহরণস্বরূপ, নেটওয়ার্ক প্যানেল পূর্বে "kB" লেবেল ব্যবহার করত কিন্তু আসলে KiB ব্যবহার করে গণনা করত, যা অপ্রয়োজনীয় বিভ্রান্তির সৃষ্টি করত।

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

এলিমেন্টস প্যানেলে ছদ্ম উপাদানগুলি হাইলাইট করুন

DevTools ছদ্ম উপাদানগুলির রঙের বৈপরীত্য বৃদ্ধি করেছে যাতে আপনি সেগুলিকে আরও ভালভাবে সনাক্ত করতে পারেন।

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

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

সিএসএস ফ্লেক্সবক্স ডিবাগিং টুল

ফ্লেক্সবক্স ডিবাগিং টুল আসছে!

শুরুতে, DevTools এখন এলিমেন্টস প্যানেলে display: flex সহ এলিমেন্টগুলির জন্য একটি flex ব্যাজ দেখায়: এতে ফ্লেক্স প্রয়োগ করা হয়েছে।

এর পাশাপাশি, নিম্নলিখিত ফ্লেক্সবক্স বৈশিষ্ট্যগুলিতে নতুন অ্যালাইনমেন্ট আইকন যুক্ত করা হয়েছে:

• flex-direction
• align-items
• align-content
• align-self
• justify-items
• justify-content

তার উপরে, এই আইকনগুলি প্রসঙ্গ-সচেতন। আইকনের দিকনির্দেশনা নিম্নলিখিত অনুসারে সমন্বয় করা হবে:

• flex-direction
• direction
• writing-mode

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

ফ্লেক্সবক্স টুলিং বৈশিষ্ট্যগুলির নকশা ডকুমেন্ট এখানে। শীঘ্রই আরও বৈশিষ্ট্য যুক্ত করা হবে।

একবার চেষ্টা করে দেখুন এবং আপনার মতামত আমাদের জানান !

ক্রোমিয়াম সমস্যা: 1144090 , 1139945

কর্ডস কীবোর্ড শর্টকাট কাস্টমাইজ করুন

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 সিরিজে নতুন কী কী বিষয় অন্তর্ভুক্ত করা হয়েছে তার একটি তালিকা।