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

কেইস বাস্ক
Kayce Basques
X GitHub

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

CSS মান সহ স্বয়ংক্রিয়ভাবে সম্পন্ন করুন

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

'বোল্ড' টাইপ করার পর স্টাইলস প্যানটি 'ফন্ট-ওয়েট: বোল্ড'-এ স্বয়ংক্রিয়ভাবে সম্পন্ন হয়।

চিত্র ১. bold টাইপ করার পর স্টাইলস প্যানটি স্বয়ংক্রিয়ভাবে font-weight: bold এ পরিণত হয়।

এই নতুন বৈশিষ্ট্য সম্পর্কে প্রতিক্রিয়া Chromium সংখ্যা #931145 এ পাঠান।

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

নেটওয়ার্ক প্যানেলে পূর্বে ব্যবহারযোগ্যতার সমস্যা ছিল যেখানে DevTools উইন্ডো সংকীর্ণ হলে থ্রটলিং মেনুর মতো বিকল্পগুলি পৌঁছানো যেত না। এই সমস্যাটি সমাধান করতে এবং নেটওয়ার্ক প্যানেলকে বিশৃঙ্খল করার জন্য, কিছু কম ব্যবহৃত বিকল্প নতুন নেটওয়ার্ক সেটিংসের পিছনে সরানো হয়েছে। নেটওয়ার্ক সেটিংস বোতাম ফলক।

নেটওয়ার্ক সেটিংস

চিত্র ২। নেটওয়ার্ক সেটিংস।

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

পুরাতন স্থানগুলিকে নতুন স্থানের সাথে ম্যাপ করা।

চিত্র ৩। পুরাতন স্থানগুলিকে নতুন স্থানের সাথে ম্যাপ করা।

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

HAR এক্সপোর্টে ওয়েবসকেট বার্তা

আপনার সহকর্মীদের সাথে নেটওয়ার্ক লগ শেয়ার করার জন্য নেটওয়ার্ক প্যানেল থেকে একটি 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 সংখ্যা #496006- এ পাঠান।

HAR আমদানি এবং রপ্তানি বোতাম

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

নতুন HAR বোতাম।

চিত্র ৪। নতুন HAR বোতাম।

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

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

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

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

চিত্র ৫। মেমোরি প্যানেলের নীচের অংশটি দেখায় যে পৃষ্ঠাটি মোট ৪৩.৪ মেগাবাইট মেমোরি ব্যবহার করছে। ২০৯ কিলোবাইট/সেকেন্ড ইঙ্গিত দেয় যে মোট মেমোরি ব্যবহার প্রতি সেকেন্ডে ২০৯ কিলোবাইট বৃদ্ধি পাচ্ছে।

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

এই নতুন বৈশিষ্ট্য সম্পর্কে প্রতিক্রিয়া Chromium সংখ্যা #958177 এ পাঠান।

পরিষেবা কর্মী নিবন্ধন পোর্ট নম্বর

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

পরিষেবা কর্মী বন্দর।

চিত্র ৬। সার্ভিস ওয়ার্কার পোর্ট।

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

ব্যাকগ্রাউন্ড ফেচ এবং ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্টগুলি পরিদর্শন করুন

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

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

ব্যাকগ্রাউন্ড ফেচ ফলক।

চিত্র ৭। ব্যাকগ্রাউন্ড ফেচ ফলক। ম্যাক্সিম সালনিকভের ডেমো ।

ব্যাকগ্রাউন্ড সিঙ্ক ফলক।

চিত্র ৮। ব্যাকগ্রাউন্ড সিঙ্ক ফলক।

এই নতুন বৈশিষ্ট্যগুলির উপর প্রতিক্রিয়া Chromium ইস্যু #927726- এ পাঠান।

ফায়ারফক্সের জন্য পাপেটিয়ার

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

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

ফায়ারফক্সের জন্য পাপেটিয়ার এবং পাপেটিয়ার সম্পর্কে আরও জানতে গুগল আই/ও ২০১৯ থেকে জোয়েল এবং অ্যান্ড্রে- এর পাপেটিয়ার আলোচনাটি দেখুন। ফায়ারফক্সের ঘোষণাটি ৪:০৫ টার দিকে ঘটে।

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

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

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

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

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

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