DevTools-এ নতুন কী আছে (Chrome 76)

Kayce Basques

হ্যালো! Chrome 76-এ Chrome DevTools-এ নতুন কী আছে তা এখানে দেওয়া হল।

CSS ভ্যালুর মাধ্যমে অটোমেটিক সম্পূর্ণ করা

DOM নোডে স্টাইল ডিক্লারেশন যোগ করার সময়, কখনও কখনও ডিক্লারেশনের নামের চেয়ে ডিক্লারেশনের ভ্যালু মনে রাখা সহজ হয়। যেমন, <p> নোড বোল্ড করার সময়, font-weight নামের চেয়ে bold ভ্যালু মনে রাখা সহজ হতে পারে। স্টাইল পেনের অটো-কমপ্লিট UI এখন CSS ভ্যালু সাপোর্ট করে। আপনি কীওয়ার্ডের কোন ভ্যালু চান তা মনে থাকলে, কিন্তু প্রপার্টির নাম মনে না থাকলে, ভ্যালু টাইপ করার চেষ্টা করুন এবং আপনি যে নামটি খুঁজছেন তা খুঁজে পেতে'অটোমেটিক সম্পূর্ণ' ফিচার আপনাকে সাহায্য করবে।

ছবি ১. bold টাইপ করার পরে স্টাইল প্যানে অটোমেটিক font-weight: bold হয়ে যায়।

এই নতুন ফিচার সম্পর্কে আপনার মতামত Chromium সমস্যা #৯৩১১৪৫-এ পাঠান।

নেটওয়ার্ক সেটিংসের জন্য নতুন UI

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

ছবি ২. নেটওয়ার্ক সেটিংস।

নিম্নলিখিত বিকল্পগুলি নেটওয়ার্ক সেটিংস-এ সরানো হয়েছে: বড় অনুরোধের সারি ব্যবহার করুন, ফ্রেম অনুযায়ী গ্রুপ করুন, ওভারভিউ দেখুন, স্ক্রিনশট ক্যাপচার করুন। ছবি ৩-এ পুরনো লোকেশন থেকে নতুন লোকেশনে ম্যাপ করা হয়েছে।

ছবি ৩. পুরনো লোকেশন থেকে নতুন লোকেশনে ম্যাপ করা হচ্ছে।

এই UI পরিবর্তন সম্পর্কে Chromium সমস্যা #৮৯২৯৬৯-এ মতামত পাঠান।

HAR এক্সপোর্টে WebSocket মেসেজ

আপনার সহকর্মীদের সাথে নেটওয়ার্ক লগ শেয়ার করার জন্য নেটওয়ার্ক প্যানেল থেকে একটি HAR ফাইল এক্সপোর্ট করার সময়, আপনার HAR ফাইলে এখন WebSocket মেসেজ অন্তর্ভুক্ত থাকে। _webSocketMessages প্রপার্টি আন্ডারস্কোর দিয়ে শুরু হয়, যা থেকে বোঝা যায় যে এটি একটি কাস্টম ফিল্ড।

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

এই নতুন ফিচার সম্পর্কে আপনার মতামত Chromium সমস্যা #৪৯৬০০৬-এ পাঠান।

HAR ইমপোর্ট ও এক্সপোর্ট বোতাম

নতুন কন্টেন্ট সহ HAR হিসেবে সব এক্সপোর্ট করুন এবং HAR ফাইল ইমপোর্ট করুন বোতামের সাহায্যে সহকর্মীদের সাথে আরও সহজে নেটওয়ার্ক লগ শেয়ার করুন। DevTools-এ HAR ইমপোর্ট ও এক্সপোর্ট করার সুবিধা কিছুদিন আগে থেকেই আছে। আরও সহজে খুঁজে পাওয়া যায় এমন বোতাম হল নতুন পরিবর্তন।

ছবি ৪. নতুন HAR বোতাম।

এই UI পরিবর্তন সম্পর্কে Chromium সমস্যা #904585-এ মতামত পাঠান।

রিয়েল-টাইম মোট মেমরির ব্যবহার

মেমরি প্যানেল এখন রিয়েল-টাইমে মোট মেমরির ব্যবহার দেখায়।

ছবি ৫. মেমরি প্যানেলের নিচে দেখা যাচ্ছে যে পৃষ্ঠাটি মোট ৪৩.৪ এমবি মেমরি ব্যবহার করছে। ২০৯ কেবি/সেকেন্ড থেকে বোঝা যায় যে মোট মেমরির ব্যবহার প্রতি সেকেন্ডে ২০৯ কেবি করে বাড়ছে।

রিয়েল-টাইমে মেমরির ব্যবহার ট্র্যাক করার জন্য পারফর্ম্যান্স মনিটর দেখুন।

এই নতুন ফিচার সম্পর্কে আপনার মতামত Chromium সমস্যা #958177-এ পাঠান।

সার্ভিস ওয়ার্কার রেজিস্ট্রেশন পোর্ট নম্বর

সার্ভিস ওয়ার্কার প্যানে এখন এর টাইটেলে পোর্ট নম্বর অন্তর্ভুক্ত করা হয়েছে যাতে আপনি কোন সার্ভিস ওয়ার্কার ডিবাগ করছেন তা ট্র্যাক করা আরও সহজ হয়।

ছবি ৬. সার্ভিস ওয়ার্কার পোর্ট।

এই UI পরিবর্তন সম্পর্কে Chromium সমস্যা #৬০১২৮৬-এ মতামত পাঠান।

ব্যাকগ্রাউন্ড ফেচ ও ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্ট পরীক্ষা করুন

ব্যাকগ্রাউন্ড ফেচ এবং ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্ট মনিটর করতে অ্যাপ্লিকেশন প্যানেলের নতুন ব্যাকগ্রাউন্ড পরিষেবা বিভাগ ব্যবহার করুন। ব্যাকগ্রাউন্ড ফেচ এবং ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্টগুলি ব্যাকগ্রাউন্ডে ঘটে, তাই DevTools খোলা থাকাকালীন শুধুমাত্র ব্যাকগ্রাউন্ড ফেচ এবং ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্ট রেকর্ড করলে তা খুব একটা কার্যকর হবে না। তাই, আপনি একবার রেকর্ডিং শুরু করলে, ব্যাকগ্রাউন্ড ফেচ এবং ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্ট রেকর্ড করা চলতে থাকবে, এমনকি আপনি ট্যাব বন্ধ করার পরেও এবং এমনকি আপনি Chrome বন্ধ করার পরেও।

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

ছবি ৭. ব্যাকগ্রাউন্ড ফেচ প্যানেল। Maxim Salnikov-এর ডেমো।

ছবি ৮. ব্যাকগ্রাউন্ড সিঙ্ক প্যানেল।

এইসব নতুন ফিচার সম্পর্কে আপনার মতামত Chromium সমস্যা #৯২৭৭২৬-এ পাঠান।

Firefox-এর জন্য Puppeteer

Puppeteer for Firefox হল একটি নতুন পরীক্ষামূলক প্রোজেক্ট যা আপনাকে Puppeteer API-এর মাধ্যমে Firefox অটোমেট করার সুবিধা দেয়। অন্যভাবে বলতে গেলে, আপনি এখন একই Node API-এর মাধ্যমে Firefox ও Chromium অটোমেট করতে পারবেন, যেমনটি নিচের ভিডিওতে দেখানো হয়েছে।

node example.js চালানোর পরে, Firefox খোলে এবং Puppeteer-এর ডকুমেন্টেশন সাইটে সার্চ বক্সে page টেক্সট যোগ করা হয়। তারপর Chromium-এ একই টাস্কের পুনরাবৃত্তি করা হয়।

Puppeteer এবং Firefox-এর জন্য Puppeteer সম্পর্কে আরও জানতে Google I/O 2019 থেকে Joel এবং Andrey-এর Puppeteer টক দেখুন। Firefox-এর ঘোষণা ৪:০৫ নাগাদ হয়।

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

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

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

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

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

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

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