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

Jecelyn Yeen

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

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

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

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

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

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

DevTools-এ এখন CSS অ্যাঙ্গেল ডিবাগিংয়ের জন্য আরও ভাল সমর্থন রয়েছে!

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

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

ক্রোমিয়াম সমস্যা: 1126178 , 1138633

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

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

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

<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 ) এখন ফলব্যাক ওয়েবপি চিত্র।

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

স্টোরেজ প্যানে স্টোরেজ কোটার আকার অনুকরণ করুন

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

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

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

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

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

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

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

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

Chromium সমস্যা: N/A

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

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

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

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

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

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

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

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

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

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

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

ফ্রেম বিশদ দৃশ্যে নতুন ওয়েব কর্মীদের তথ্য

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

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

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

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

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

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

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

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

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

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

Chromium সমস্যা: N/A

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

সম্পত্তির মান কপি করুন

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

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

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

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

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

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

Chromium সমস্যা: 1139615

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

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

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

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

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

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

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

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

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

ফাইল/মেমরি আকারের জন্য পরিমাপের সামঞ্জস্যপূর্ণ একক

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

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

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

DevTools ছদ্ম উপাদানগুলির রঙের বৈসাদৃশ্য বাড়িয়েছে যাতে আপনাকে সেগুলি আরও ভালভাবে চিহ্নিত করতে সহায়তা করে।

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

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

CSS Flexbox ডিবাগিং টুল

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

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

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

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

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

• flex-direction
• direction
• writing-mode

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

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

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

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

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

DevTools শেষ প্রকাশের পর থেকে কাস্টমাইজ কীবোর্ড শর্টকাটগুলির জন্য পরীক্ষামূলক সমর্থন যোগ করেছে৷

আপনি এখন শর্টকাট সম্পাদকে কর্ড (ওরফে মাল্টি-কিপ্রেস শর্টকাট) তৈরি করতে পারেন।

সেটিংস > শর্টকাট -এ যান, একটি কমান্ডে ঘোরাঘুরি করুন এবং কর্ড শর্টকাট কাস্টমাইজ করতে সম্পাদনা বোতামে (পেন আইকন) ক্লিক করুন।

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

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

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

Chrome DevTools টিমের সাথে যোগাযোগ করা হচ্ছে

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

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

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

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

Jecelyn Yeen

দ্রুত ডিভটুলস স্টার্টআপ

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

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

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

ক্রোমিয়াম ইস্যু: 1029427

নতুন সিএসএস কোণ ভিজ্যুয়ালাইজেশন সরঞ্জাম

ডেভটুলসের এখন সিএসএস অ্যাঙ্গেল ডিবাগিংয়ের জন্য আরও ভাল সমর্থন রয়েছে!

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

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

ক্রোমিয়াম ইস্যু: 1126178 , 1138633

অসমর্থিত চিত্রের ধরণগুলি অনুকরণ করুন

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

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

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

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

ক্রোমিয়াম ইস্যু: 1130556

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

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

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

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

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

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

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

লেন বর্তমানে ওয়েব ভাইটাল তথ্য যেমন প্রথম সামগ্রী পেইন্ট (এফসিপি), বৃহত্তম সামগ্রী পেইন্ট (এলসিপি) এবং লেআউট শিফট (এলএস) এর মতো প্রদর্শন করে।

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

ক্রোমিয়াম ইস্যু: এন/এ

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

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

নেটওয়ার্ক প্যানেলে, ব্যর্থ সিওআরএস নেটওয়ার্ক অনুরোধটি পর্যবেক্ষণ করুন। স্থিতি কলামটি "কর্স ত্রুটি" দেখায়। ত্রুটিটি ঘুরে দেখুন, টুলটিপটি এখন ত্রুটি কোডটি দেখায়। পূর্বে, ডিভটুলগুলি কেবল সিওআরএস ত্রুটির জন্য জেনেরিক "(ব্যর্থ)" স্থিতি দেখিয়েছিল।

এটি কর্স সমস্যার আরও বিশদ বিবরণ প্রদানের ক্ষেত্রে আমাদের পরবর্তী বর্ধনের ভিত্তি রাখে!

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

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

ফ্রেমের বিশদ বিবরণে ক্রস-অরিজিন বিচ্ছিন্নতার তথ্য

ক্রস-অরিজিন বিচ্ছিন্ন স্থিতি এখন সুরক্ষা এবং বিচ্ছিন্নতা বিভাগের অধীনে প্রদর্শিত হয়।

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

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

ক্রোমিয়াম ইস্যু: 1139899

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

ডেভটুলগুলি এখন ফ্রেমের নীচে উত্সর্গীকৃত ওয়েব কর্মীদের প্রদর্শন করে যা তাদের তৈরি করে।

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

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

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

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

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

ক্রোমিয়াম ইস্যু: 1107766

পরিষেবা কর্মীদের ফলক থেকে নেটওয়ার্ক প্যানেল খুলুন

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

অ্যাপ্লিকেশন > পরিষেবা কর্মীদের কাছে যান, একটি এসডাব্লু এর নেটওয়ার্ক অনুরোধগুলিতে ক্লিক করুন। নেটওয়ার্ক প্যানেলটি সমস্ত পরিষেবা কর্মী সম্পর্কিত অনুরোধগুলি প্রদর্শন করে নীচের প্যানেলে খোলা হয়েছে (নেটওয়ার্কের অনুরোধগুলি "আইএস: পরিষেবা-কর্মী-ইন্টারসেপ্টেড" দ্বারা ফিল্টার করা হয়েছে)।

ক্রোমিয়াম ইস্যু: এন/এ

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

সম্পত্তির মান অনুলিপি করুন

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

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

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

ক্রোমিয়াম ইস্যু: 1132084

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

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

ক্রোমিয়াম ইস্যু: 1139615

ওয়াসম ডিবাগিং আপডেটগুলি

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

ব্রেকপয়েন্টে বিরতি দেওয়ার সময় ওয়েবসেম্বলি (ডাব্লুএএসএম) বিচ্ছিন্নভাবে কোনও পরিবর্তনশীলকে ঘোরাঘুরি করার সময়, ডেভটুলগুলি এখন পরিবর্তনশীল বর্তমান মানটি দেখায়।

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

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

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

ব্রেকপয়েন্টে বিরতি দেওয়ার সময় আপনি এখন কনসোলে WASM ভেরিয়েবলের মূল্যায়ন করতে পারেন।

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

ক্রোমিয়াম ইস্যু: 1127914

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

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

ক্রোমিয়াম ইস্যু: 1035309

উপাদান প্যানেলে সিউডো উপাদানগুলি হাইলাইট করুন

ডিভটুলস আপনাকে আরও ভালভাবে চিহ্নিত করতে সহায়তা করার জন্য সিউডো উপাদানগুলির রঙের বিপরীতে বাড়িয়েছে।

ক্রোমিয়াম ইস্যু: 1143833

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

সিএসএস ফ্লেক্সবক্স ডিবাগিং সরঞ্জাম

ফ্লেক্সবক্স ডিবাগিং সরঞ্জামগুলি আসছে!

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

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

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

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

• flex-direction
• direction
• writing-mode

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

এখানে ফ্লেক্সবক্স টুলিং বৈশিষ্ট্যগুলির ডিজাইন ডক রয়েছে। আরো বৈশিষ্ট্য শীঘ্রই যোগ করা হবে.

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

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

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

ডেভটুলগুলি গত প্রকাশের পর থেকে কীবোর্ড শর্টকাটগুলি কাস্টমাইজ করার জন্য পরীক্ষামূলক সমর্থন যুক্ত করেছে।

আপনি এখন শর্টকাট সম্পাদকটিতে কর্ডস (ওরফে মাল্টি-কীপ্রেস শর্টকাটস) তৈরি করতে পারেন।

সেটিংস > শর্টকাটগুলিতে যান, একটি কমান্ডে ঘোরাঘুরি করুন এবং কর্ডস শর্টকাটটি কাস্টমাইজ করতে সম্পাদনা বোতাম (পেন আইকন) ক্লিক করুন।

ক্রোমিয়াম ইস্যু: 174309

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

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

ক্রোম ডিভটুলস দলের সাথে যোগাযোগ করা

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

• Crbug.com এর মাধ্যমে আমাদের কাছে একটি পরামর্শ বা প্রতিক্রিয়া জমা দিন।
• আরও বিকল্প ব্যবহার করে একটি ডিভটুল ইস্যু রিপোর্ট করুন > সহায়তা > ডিভটুলগুলিতে একটি ডিভটুলস ইস্যুগুলির প্রতিবেদন করুন ।
• @ক্রোমডেভটুলস এ টুইট করুন।
• ডিভটুলস ইউটিউব ভিডিও বা ডিভটুলস টিপস ইউটিউব ভিডিওগুলিতে আমাদের নতুন কী সম্পর্কে মন্তব্যগুলি ছেড়ে দিন।

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

ডিভটুলস সিরিজে নতুন কী রয়েছে তাতে আচ্ছাদিত সমস্ত কিছুর একটি তালিকা।

Jecelyn Yeen

Faster DevTools startup

DevTools startup now is ~37% faster in terms of JavaScript compilation (from 6.9s down to 5s)! 🎉

The team did some optimization to reduce the performance overhead of serialisation, parsing and deserialisation during the startup.

There will be an upcoming engineering blog post explaining the implementation in detail. সঙ্গে থাকুন!

Chromium issue: 1029427

New CSS angle visualization tools

DevTools now has better support for CSS angle debugging!

When an HTML element on your page has CSS angle applied to it (eg background: linear-gradient(angle, color-stop1, color-stop2) , transform: rotate(angle) ), a clock icon is shown next to the angle in the Styles pane. Click on the clock icon to toggle the clock overlay. Click anywhere in the clock or drag the needle to change the angle!

There are mouse and keyboard shortcuts to change the angle value as well, check out our documentation to learn more!

Chromium issues: 1126178 , 1138633

Emulate unsupported image types

DevTools added two new emulations in the Rendering tab, allowing you to disable AVIF and WebP image formats. These new emulations make it easier for developers to test different image loading scenarios without having to switch browsers.

Suppose we have the following HTML code to serve an image in AVIF and WebP for newer browsers, with a fallback PNG image for older browsers.

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

Open the Rendering tab, select "Disable AVIF image format" and refresh the page. Hover over the img src . The current image src ( currentSrc ) is now the fallback WebP image.

Chromium issue: 1130556

Simulate storage quota size in the Storage pane

You can now override storage quota size in the Storage pane. This feature gives you the ability to simulate different devices and test the behavior of your apps in low disk availability scenarios.

Go to Application > Storage , enable the Simulate custom storage quota checkbox, and enter any valid number to simulate the storage quota.

Chromium issues: 945786 , 1146985

New Web Vitals lane in the Performance panel recordings

Performance recordings now have an option to display Web Vitals information.

After recording your load performance, enable the Web Vitals checkbox in the Performance panel to view the new Web Vitals lane.

The lane currently displays Web Vitals information such as First Contentful Paint (FCP), Largest Contentful Paint (LCP) and Layout Shift (LS).

Check out web.dev/vitals to learn more about how to optimize user experience with the Web Vitals metrics.

Chromium issue: N/A

Report CORS errors in the Network panel

DevTools now shows CORS error when a network request is failed due to Cross-origin Resource Sharing (CORS).

In the Network panel, observe the failed CORS network request. The status column shows "CORS error" . Hover over on the error, the tooltip now shows the error code. Previously, DevTools only showed generic "(failed)" status for CORS errors.

This lays the foundation for our next enhancements on providing more detailed description of the CORS problems!

Chromium issue: 1141824

Frame details view updates

Cross-origin isolation information in the Frame details view

The cross-origin isolated status is now displayed under the Security & Isolation section.

The new API availability section displays the availability of SharedArrayBuffer s (SAB) and whether they can be shared using postMessage() .

A deprecation warning will show if the SAB and postMessage() is currently available, but the context is not cross-origin isolated. Learn more about cross-origin isolation and why it will be required for features like SharedArrayBuffers in this article .

Chromium issue: 1139899

New Web Workers information in the Frame details view

DevTools now displays dedicated web workers under the frame which creates them.

In the Application panel, expand a frame with web workers, then select a worker under the Workers tree to view the web worker's details.

Chromium issues: 1122507 , 1051466

Display opener frame details for opened windows

You can now view the details about which frame caused the opening of another Window.

Select an opened window under the Frames tree to view the window details. Click on the Opener Frame link to reveal the opener in the Elements panel.

Chromium issue: 1107766

Open Network panel from the Service Workers pane

View all service worker (SW) request routing information with the new Network requests link. This provides developers added context when debugging the SW.

Go to Application > Service Workers , click on the Network requests of a SW. The Network panel is opened in the bottom panel displaying all service worker related requests (the network requests are filtered by "is:service-worker-intercepted" ).

Chromium issue: N/A

New copy options in the Network panel

Copy property value

The new "Copy value" option in the context menu lets you copy the property value of a network request.

In the Network panel, click on a network request to open the Headers pane. Right click on one of the properties under these section: Request payload (JSON) Form Data Query String Parameters Request Headers Response Headers

Then, you can select Copy value to copy the property value to your clipboard.

Chromium issue: 1132084

Copy stacktrace for network initiator

Right-click a network request, then select Copy stacktrace to copy the stacktrace to your clipboard.

Chromium issue: 1139615

Wasm debugging updates

Preview Wasm variable value on mouseover

When hovering over a variable in WebAssembly (Wasm) disassembly while paused on a breakpoint, DevTools now shows the variable current value.

In the Sources panel, open a Wasm file, put a breakpoint and refresh the page. Hover to a variable to see the value.

Chromium issues: 1058836 , 1071432

Evaluate Wasm variable in the Console

You can now evaluate Wasm variable in the Console while paused on a breakpoint.

In this example, we put a breakpoint on the line local.get $input . When debugging, type $input in the Console will return the current value of the variable, which is 4 in this case.

Chromium issue: 1127914

Consistent units of measurement for file/memory sizes

DevTools now consistently use kB for displaying file/memory sizes. Previously DevTools mixed kB (1000 bytes) and KiB (1024 bytes). For example, the Network panel previously used "kB" labels but actually performed calculations using KiB, which caused needless confusion.

Chromium issue: 1035309

Highlight pseudo elements in the Elements panel

DevTools has increased the color contrast of pseudo elements to help you better spot them.

Chromium issue: 1143833

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

CSS Flexbox debugging tools

Flexbox debugging tools are coming!

For starters, DevTools now shows a flex badge in the Elements panel for elements with display: flex applied to it.

Beside that, new alignment icons are added in the following flexbox properties:

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

On top of that, these icons are context-aware. The icon direction will be adjusted according to:

• flex-direction
• direction
• writing-mode

These icons aim to help you better visualize the flexbox layout of the page.

Here is the design doc of the Flexbox tooling features. আরো বৈশিষ্ট্য শীঘ্রই যোগ করা হবে.

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

Chromium issues: 1144090 , 1139945

Customize chords keyboard shortcuts

DevTools added experimental support for customize keyboard shortcuts since last release.

You can now create chords (aka multi-keypress shortcuts) in the shortcut editor.

Go to Settings > Shortcuts , hovering on a command and click the Edit button (pen icon) to customize the chords shortcut.

Chromium issue: 174309

Download the preview channels

Consider using the Chrome Canary , Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

• Submit a suggestion or feedback to us via crbug.com .
• Report a DevTools issue using the More options > Help > Report a DevTools issues in DevTools.
• Tweet at @ChromeDevTools .
• Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos .

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

A list of everything that has been covered in the What's new in DevTools series.