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

জেসেলিন ইয়েন

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

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

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

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

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

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

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

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 সমস্যাগুলির আরও বিশদ বিবরণ প্রদানের উপর আমাদের পরবর্তী উন্নতিগুলির ভিত্তি স্থাপন করে!

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 ।

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

ক্রোমিয়াম সমস্যা: 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

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

CSS ফ্লেক্স ডিবাগিং

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

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

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