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

Kayce Basques

নমস্কার! Chrome 76-এ Chrome DevTools- এ নতুন কী রয়েছে তা এখানে।

CSS মান সহ স্বয়ংসম্পূর্ণ

একটি DOM নোডে শৈলী ঘোষণা যোগ করার সময় কখনও কখনও ঘোষণার নামের চেয়ে ঘোষণার মানটি মনে রাখা সহজ হয়। For example, when making a <p> node bold, the value bold might be easier to remember than the name font-weight . স্টাইল প্যানের স্বয়ংসম্পূর্ণ UI এখন CSS মান সমর্থন করে। আপনি যদি মনে রাখেন কোন কীওয়ার্ডের মান আপনি চান, কিন্তু সম্পত্তির নামটি মনে রাখতে না পারেন, তাহলে মানটি টাইপ করার চেষ্টা করুন এবং স্বয়ংসম্পূর্ণ আপনি যে নামটি খুঁজছেন সেটি খুঁজে পেতে সহায়তা করবে।

চিত্র 1. bold টাইপ করার পরে শৈলী ফলকটি font-weight: bold স্বয়ংসম্পূর্ণ হয়।

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

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

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

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

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

চিত্র 3. পুরানো অবস্থানগুলিকে নতুনের সাথে ম্যাপ করা৷

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

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 সমস্যা #496006- এ এই নতুন বৈশিষ্ট্যটির বিষয়ে প্রতিক্রিয়া পাঠান।

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

নতুন Export All As HAR উইথ কনটেন্ট সহ সহকর্মীদের সাথে নেটওয়ার্ক লগগুলি আরও সহজে ভাগ করুন৷ এবং HAR ফাইল আমদানি করুন বোতাম HAR আমদানি ও রপ্তানি কিছু সময়ের জন্য DevTools-এ বিদ্যমান। আরো আবিষ্কারযোগ্য বোতাম নতুন পরিবর্তন.

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

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

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

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

চিত্র 5. মেমরি প্যানেলের নীচে দেখায় যে পৃষ্ঠাটি মোট 43.4 MB মেমরি ব্যবহার করছে৷ 209 KB/s নির্দেশ করে যে মোট মেমরি ব্যবহার প্রতি সেকেন্ডে 209 KB বৃদ্ধি পাচ্ছে।

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

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

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

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

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

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

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

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

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

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

চিত্র 8. ব্যাকগ্রাউন্ড সিঙ্ক প্যান।

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

ফায়ারফক্সের জন্য পুতুল

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

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

ফায়ারফক্সের জন্য Puppeteer এবং Puppeteer সম্পর্কে আরও জানতে Google I/O 2019 থেকে জোয়েল এবং আন্দ্রেয়ের পাপেটিয়ার আলোচনা দেখুন। ফায়ারফক্স ঘোষণা প্রায় 4:05 ঘটবে।

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

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

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

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

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

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

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