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

Sofia Emelianova

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

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

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

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

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

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

আপনি পুনর্গঠিত নকশা সম্পর্কে কি মনে করেন আমাদের জানান .

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

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

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

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

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

উপাদান প্যানেল উন্নতি

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

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

শৈলী ট্যাবে স্বয়ংসম্পূর্ণ এখন নিম্নলিখিত CSS বৈশিষ্ট্যগুলির জন্য মানগুলি প্রস্তাব করে:

• text-emphasis শর্টহ্যান্ড
• text-emphasis-style
• text-emphasis-color
• text-emphasis-position

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

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

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

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

নেস্টেড নিয়মের পরে বেয়ার ঘোষণা "উপরে স্থানান্তরিত হয় না"

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

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

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

  background-color: green;
}

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

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

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

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

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

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

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

ব্রেডক্রাম্ব নেভিগেট করুন

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

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

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

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

মেমরি প্যানেল একটি নতুন প্রোফাইল টাইপ পায় - বিচ্ছিন্ন উপাদান । এটি এমন বস্তু দেখায় যা জাভাস্ক্রিপ্ট রেফারেন্স দ্বারা ধরে রাখা হয়।

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

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

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

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

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

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

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

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

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

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

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

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

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

বাতিঘর 12.2.1

Lighthouse প্যানেল এখন Lighthouse 12.2.1 চালায়।

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

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

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

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

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

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

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

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

Chrome DevTools টিমের সাথে যোগাযোগ করা হচ্ছে

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

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

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

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