DevTools, Chrome 130-এ নতুন কী আছে৷

সোফিয়া এমেলিয়ানোভা
Sofia Emelianova
GitHub

নেটওয়ার্ক প্যানেলের উন্নতি

এই সংস্করণটি নেটওয়ার্ক প্যানেলে বেশ কিছু উন্নতি এনেছে।

নেটওয়ার্ক ফিল্টারগুলি নতুন করে কল্পনা করা হয়েছে

আপনার প্রতিক্রিয়ার উপর ভিত্তি করে নেটওয়ার্ক প্যানেলে নতুন ফিল্টার পাওয়া যায়, নতুন করে তৈরি করা হয়েছে। টাইপ-নির্দিষ্ট ফিল্টারগুলি একই থাকে — একটি পরিষ্কার মাল্টি-সিলেক্ট বারে ব্যাজের একটি সেট।

UI ডিক্লাটার করার জন্য, হাইড-, ব্লক- এবং থার্ড-পার্টি-সম্পর্কিত চেকবক্সগুলি একটি ড্রপ-ডাউন তালিকার নীচে সরানো হয়। তালিকায় একটি নম্বর রয়েছে যা আপনাকে বলে যে ড্রপ-ডাউন তালিকার নীচে কতগুলি ফিল্টার চেক করা হয়েছে।

ড্রপ-ডাউনের অধীনে হাইড-, ব্লক- এবং থার্ড-পার্টি-সম্পর্কিত ফিল্টারগুলি সরানোর আগে এবং পরে।

পুরানো ফিল্টার ডিজাইন ফিরিয়ে আনতে, > পরীক্ষা > সাফ করুন । নেটওয়ার্ক প্যানেলে ফিল্টার বারের পুনঃডিজাইন করুন ।

পুনর্কল্পিত নকশা সম্পর্কে আপনার মতামত আমাদের জানান ।

ক্রোমিয়াম সমস্যা: 362672528 ।

HAR রপ্তানি এখন ডিফল্টরূপে সংবেদনশীল ডেটা বাদ দেয়

সংবেদনশীল তথ্যের দুর্ঘটনাজনিত ফাঁসের সম্ভাবনা কমাতে, HAR ফর্ম্যাটে রপ্তানি করা নেটওয়ার্ক লগে আর ডিফল্টরূপে Cookie , Set-Cookie এবং Authorization হেডার থাকবে না।

সংবেদনশীল ডেটা সহ HAR ফর্ম্যাটে লগ রপ্তানি করতে, > পছন্দ > নেটওয়ার্ক > চালু করুন । সংবেদনশীল ডেটা সহ HAR উৎপন্ন করার অনুমতি দিন । নেটওয়ার্ক প্যানেলটি এক্সপোর্ট বোতামটিকে একটি তীর দিয়ে চিহ্নিত করবে। বোতামটিতে দীর্ঘক্ষণ ক্লিক করুন এবং ড্রপ-ডাউন মেনু থেকে এক্সপোর্ট HAR (সংবেদনশীল ডেটা সহ) নির্বাচন করুন।

HAR এক্সপোর্টে সংবেদনশীল ডেটা সহ এবং ছাড়াই এক্সপোর্ট অপশন যোগ করার আগে এবং পরে।

ক্রোমিয়াম সমস্যা: 361717594 ।

এলিমেন্ট প্যানেলের উন্নতি

এই সংস্করণটি এলিমেন্টস প্যানেলে বেশ কিছু উন্নতি এনেছে।

text-emphasis-* বৈশিষ্ট্যের জন্য স্বয়ংসম্পূর্ণ মান

স্টাইলস ট্যাবে অটোকম্পলিট এখন নিম্নলিখিত CSS বৈশিষ্ট্যগুলির জন্য মানগুলি প্রস্তাব করে:

'text-emphasis-*' বৈশিষ্ট্যের জন্য স্বয়ংক্রিয়ভাবে সম্পূর্ণ করার বিকল্প যোগ করার আগে এবং পরে।

ক্রোমিয়াম সমস্যা: 361471205 ।

স্ক্রোল ওভারফ্লোগুলি একটি ব্যাজ দিয়ে চিহ্নিত

এলিমেন্টস প্যানেল এখন একটি নতুন 'স্ক্রল' ব্যাজ দিয়ে চিহ্নিত করে যে উপাদানগুলিতে ওভারফ্লো কন্টেন্ট রয়েছে এবং overflow: scroll বা overflow: auto আছে, যাতে আপনি সহজেই স্ক্রোল ওভারফ্লোগুলি সনাক্ত করতে পারেন। অন্যান্য ব্যাজের মতো, এই ব্যাজটি বর্তমান DOM প্রতিফলিত করে এবং উদাহরণস্বরূপ, আকার পরিবর্তনের কারণে যদি সামগ্রী ওভারফ্লো হওয়া বন্ধ করে দেয় তবে অদৃশ্য হয়ে যায়।

চিহ্নিত করার আগে এবং পরে স্ক্রোলটি একটি ব্যাজ দিয়ে উপচে পড়ে।

ক্রোমিয়াম সমস্যা: 40670442 ।

নেস্টেড নিয়মের পরে কেবল ঘোষণাগুলি "উপরের দিকে সরে যায়" না

CSS ওয়ার্কিং গ্রুপের নেস্টেড রুলসের পরে খালি ঘোষণার অনুমতি দেওয়ার সিদ্ধান্তের পর, স্টাইলস ট্যাব এখন পার্সিংয়ের সময় এই ঘোষণাগুলিকে "উপরের দিকে" স্থানান্তর করে না।

নিম্নলিখিত কোড নমুনায়, নেস্টেড রুলের পরে খালি ঘোষণার ফলে Chrome এখন অপ্রত্যাশিতভাবে ক্যাসকেডে স্টাইলগুলিকে পুনরায় সাজাতে পারে না:

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

নেস্টেড নিয়মের পরে খালি ঘোষণা আসার আগে এবং পরে।

ক্রোমিয়াম সমস্যা: 358119261 ।

পারফর্মেন্স প্যানেলের উন্নতি

এই সংস্করণটি পারফরম্যান্স প্যানেলে বেশ কিছু উন্নতি এনেছে।

লাইভ মেট্রিক্সে সুপারিশ

লাইভ মেট্রিক্স এখন মেট্রিক-নির্দিষ্ট সুপারিশ প্রদান করতে পারে যা আপনার ব্যবহারকারীদের অভিজ্ঞতার সাথে যতটা সম্ভব কাছাকাছি আপনার ডেভেলপমেন্ট পরিবেশ কনফিগার করতে সাহায্য করে।

সুপারিশ পেতে, Chrome UX Report (CrUX) থেকে ফিল্ড ডেটা ফেচিং সেট আপ করুন এবং প্রতিটি মেট্রিক কার্ডে (যদি থাকে) আপনার স্থানীয় পরীক্ষার শর্তাবলী বিবেচনা করুন বিভাগটি প্রসারিত করুন এবং পরিবেশ সেটিংসে প্রকৃত ব্যবহারকারী পরিবেশ বিবেচনা করুন ।

সুপারিশ সহ সম্প্রসারিত বিভাগ।

আপনার ব্যবহারকারীদের অভিজ্ঞতা আনুমানিক করতে সুপারিশগুলি অনুসরণ করুন ।

এখন আপনি একটি পারফর্মেন্স রেকর্ডিংয়ের টাইমলাইনে ব্রেডক্রাম্বস নেভিগেট করতে পারেন: ব্রেডক্রাম্বসের মধ্যে "লাফিয়ে পড়ুন", একটি চাইল্ড ব্রেডক্রাম্বস ওভাররাইট করুন এবং একাধিক চাইল্ড সরিয়ে দিন। পূর্বে, যখন আপনি একটি প্যারেন্ট ব্রেডক্রাম্ব নির্বাচন করতেন, তখন এর চাইল্ডগুলি অদৃশ্য হয়ে যেত।

মেমোরি প্যানেলের উন্নতি

এই সংস্করণটি মেমোরি প্যানেলে বেশ কিছু উন্নতি এনেছে।

নতুন 'বিচ্ছিন্ন উপাদান' প্রোফাইল

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

মেমোরি প্যানেলে 'ডিটাচড এলিমেন্ট' প্রোফাইল টাইপ যোগ করার আগে এবং পরে।

ক্রোমিয়াম সমস্যা: 350519222 ।

প্লেইন JS অবজেক্টের উন্নত নামকরণ

হিপ স্ন্যাপশটে Object ক্যাটাগরি সংগঠিত এবং ডিক্লাটার করার জন্য, প্লেইন জাভাস্ক্রিপ্ট অবজেক্টগুলি এখন হল:

  • নামকরণ করা হয়েছে তাদের মধ্যে থাকা বৈশিষ্ট্যের উপর ভিত্তি করে, উদাহরণস্বরূপ, {firstProperty, secondProperty, ..., *nthProperty} ।
  • DevTools দ্বারা নির্মিত এই নামগুলি দ্বারা অনুসন্ধানযোগ্য।
  • যদি তাদের একই বৈশিষ্ট্য থাকে তবে একসাথে গোষ্ঠীভুক্ত।

হিপ স্ন্যাপশটে অবজেক্ট ক্যাটাগরি সাজানোর আগে এবং পরে।

ক্রোমিয়াম সমস্যা: 350519222 ।

ডায়নামিক থিমিং বন্ধ করুন

আপনি এখন Chrome-এ আপনার কাস্টম থিমের রঙের সাথে DevTools রঙের স্বয়ংক্রিয় মিল বন্ধ করতে পারেন।

ডায়নামিক থিমিং বন্ধ করতে, সেটিংস পছন্দ > চেহারা > মুছে ফেলুন। Chrome রঙের স্কিম মেলান এবং DevTools পুনরায় লোড করুন।

ডায়নামিক থিমিং বন্ধ করার আগে এবং পরে।

ক্রোমিয়াম সমস্যা: 328472696 ।

Chrome পরীক্ষা: প্রক্রিয়া ভাগাভাগি

সাধারণত, যখন আপনি একই ওয়েবসাইট থেকে (যেমন Google Docs ) একাধিক ট্যাব খোলেন, তখন Chrome প্রতিটির জন্য একটি পৃথক রেন্ডারার প্রক্রিয়া তৈরি করে। প্রসেস শেয়ারিং পরীক্ষাটি কর্মক্ষমতা উন্নত করার জন্য একাধিক ট্যাবকে একই রেন্ডারার প্রক্রিয়া ভাগ করে নেওয়ার অনুমতি দিয়ে এটি পরিবর্তন করে।

DevTools খোলা থাকাকালীন যদি আপনি "এই ট্যাবটি অন্যান্য ট্যাবের সাথে রিসোর্স শেয়ার করে..." ইনফোবারে লেখা একটি বার্তা দেখতে পান, তাহলে আপনি প্রক্রিয়া ভাগ করে নেওয়ার পরীক্ষা সক্ষম করা ছোট গোষ্ঠীর অংশ।

'এই ট্যাবটি অন্যান্য ট্যাবের সাথে রিসোর্স শেয়ার করে...' তথ্যবার।

প্রক্রিয়া ভাগাভাগি ব্রেকপয়েন্ট ডিবাগিং এবং কর্মক্ষমতা বিশ্লেষণকে প্রভাবিত করতে পারে। আরও তথ্যের জন্য, Chrome পরীক্ষা: প্রক্রিয়া ভাগাভাগি দেখুন।

বাতিঘর ১২.২.১

লাইটহাউস প্যানেলটি এখন লাইটহাউস ১২.২.১ চালায়।

এই আপডেটে রিসোর্স কম্প্রেশন পরামর্শের জন্য < 20 KB উপেক্ষা থ্রেশহোল্ড প্রবর্তন করা হয়েছে যাতে আপনি কেবল অর্থপূর্ণ ফাইল আকার সঞ্চয়ের উপর মনোযোগ দিতে পারেন। পরিবর্তনগুলির সম্পূর্ণ তালিকা দেখুন।

DevTools-এ Lighthouse প্যানেল ব্যবহারের মূল বিষয়গুলি জানতে, Lighthouse: ওয়েবসাইটের গতি অপ্টিমাইজ করুন দেখুন।

ক্রোমিয়াম সমস্যা: 772558 ।

বিবিধ হাইলাইটস

এই রিলিজে কিছু উল্লেখযোগ্য সংশোধন এবং উন্নতি রয়েছে:

  • উপাদান :
    • নেস্টেড CSS সম্পাদনার জন্য একাধিক সংশোধন ( 41486635 , 361477264 , 328263458 , 41487826 )।
    • সংজ্ঞায়িত কিন্তু খালি-মান কাস্টম বৈশিষ্ট্যগুলিকে অনির্ধারিত ( 365578428 ) হিসাবে পার্স করা হয়েছে।
  • কনসোল : cURL কমান্ডের ( 352651673 ) মাল্টি-লাইন স্ট্রিংয়ে একটি নন-এসকেপড অ্যাম্পারস্যান্ড ঠিক করা হয়েছে।
  • মেমোরি : পরিষেবা কর্মীদের সাথে পৃষ্ঠাগুলিতে ডিফল্ট নির্বাচন ঠিক করা হয়েছে, এখন প্রধান থ্রেড নির্বাচন করা হয়েছে ( 40669896 )।
  • নিরাপত্তা : কোনও অরিজিনের নিরাপত্তা স্তর পরিবর্তনের সাথে সাথে হাইলাইট করা URL স্কিমটি এখন সঠিকভাবে আপডেট হয় ( 359920086 )।

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

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

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

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

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

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