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

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

গোপনীয়তা এবং নিরাপত্তা প্যানেল

পুরাতন নিরাপত্তা প্যানেলটি গোপনীয়তা এবং নিরাপত্তা প্যানেলে রূপান্তরিত হয়েছে এবং একটি নতুন গোপনীয়তা-নিবেদিত বিভাগ পেয়েছে। এই বিভাগে, আপনি যা করতে পারেন:

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

নিরাপত্তা প্যানেলে গোপনীয়তা বিভাগ যোগ করার আগে এবং পরে।

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

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

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

ক্যালিব্রেটেড CPU থ্রটলিং প্রিসেট

আপনি এখন স্বয়ংক্রিয়ভাবে ক্যালিব্রেট করতে পারবেন এবং দুটি অতিরিক্ত CPU থ্রটলিং প্রিসেট পেতে পারবেন যা আরও সঠিকভাবে নিম্ন এবং মধ্য-স্তরের মোবাইল ডিভাইসগুলির সাথে মানানসই।

Performance > CPU থ্রটলিং ড্রপ-ডাউন মেনুতে, Calibrate... নির্বাচন করুন, তারপর Settings এ, Calibrate , Continue এ ক্লিক করুন এবং DevTools আপনার ডিভাইসের জন্য স্লোডাউন রেট গণনা করার জন্য অপেক্ষা করুন। আপনি Performance > CPU থ্রটলিং ড্রপ-ডাউন মেনুতে ক্যালিব্রেটেড থ্রটলিং বিকল্পগুলি খুঁজে পেতে পারেন।

থ্রটলিং ক্যালিব্রেশন যোগ করার আগে এবং পরে।

একই AI চ্যাটে বিভিন্ন পারফর্ম্যান্স ইভেন্ট নির্বাচন করুন

AI সহায়তা প্যানেল এখন আপনাকে একই চ্যাটের পারফরম্যান্স ট্রেসে নির্বাচিত ইভেন্টটি পরিবর্তন করতে দেয়। অন্য কথায়, ভিন্ন ইভেন্ট সম্পর্কে কথা বলার জন্য আপনাকে নতুন চ্যাট শুরু করতে হবে না।

পারফরম্যান্সে প্রথম এবং তৃতীয় পক্ষের হাইলাইটিং

পারফরম্যান্স প্যানেলটি সারাংশ ট্যাবে একটি নতুন টেবিল পেয়েছে যা আপনাকে প্রথম, তৃতীয় পক্ষ এবং এক্সটেনশন ডেটার মধ্যে পার্থক্য করতে দেয়।

পারফর্ম্যান্স ট্রেসে হাইলাইট করা প্রাসঙ্গিক ইভেন্টগুলি দেখতে টেবিলের এন্ট্রিগুলির উপর কার্সার রাখুন। শুধুমাত্র প্রথম-পক্ষের ডেটার উপর ফোকাস করতে Dim 3rd parties চেক করুন।

অতিরিক্তভাবে, তৃতীয় পক্ষ দ্বারা গোষ্ঠীভুক্ত "বটম-আপ" ট্যাবে যেতে টেবিলের একটি হাইলাইট করা এন্ট্রির পাশে থাকা আইকনে ক্লিক করুন।

মার্কার টুলটিপস এবং অন্তর্দৃষ্টিতে ফিল্ড ডেটা

যদি আপনার ফিল্ড ডেটা চালু থাকে , তাহলে আপনি এখন এটি মেট্রিক মার্কার টুলটিপ এবং ইনসাইটস ট্যাবে দেখতে পাবেন।

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

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

'ফোর্সড রিফ্লো' অন্তর্দৃষ্টি

পারফরম্যান্স > ইনসাইটস ট্যাবে ইনসাইট সেটে একটি নতুন সংযোজন করা হয়েছে: ফোর্সড রিফ্লো । রেন্ডারিং ইঞ্জিন যখন স্টাইল এবং লেআউট গণনা করার জন্য স্ক্রিপ্ট এক্সিকিউশন থামায় তখন ফোর্সড রিফ্লো হয়। ফোর্সড রিফ্লো এমন বাধা হতে পারে যা আপনি এড়াতে চাইতে পারেন।

নতুন ইনসাইটটির উপর কার্সার রাখলে, এটি ফোর্সড রিফ্লো, এর স্ট্যাক ট্রেস সহ শীর্ষ ফাংশন কলটি হাইলাইট করে এবং মোট রিফ্লো সময় দেখায়।

'ফোর্সড রিফ্লো' অন্তর্দৃষ্টি যোগ করার আগে এবং পরে।

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

'DOM সাইজ অপ্টিমাইজ করুন' অন্তর্দৃষ্টি

আরেকটি নতুন অন্তর্দৃষ্টি হল Optimize DOM size । একটি বড় DOM ট্রি আপনার পৃষ্ঠার কর্মক্ষমতা ধীর করে দিতে পারে।

এই অন্তর্দৃষ্টিটি দীর্ঘ লেআউট রিফ্লো এবং স্টাইল পুনঃগণনাগুলিকে হাইলাইট করে যা পারফরম্যান্স ট্রেসে একটি বৃহৎ DOM আকার দ্বারা প্রভাবিত হয়েছিল এবং মোট উপাদান, গভীরতা এবং বেশিরভাগ শিশুদের পরিসংখ্যান প্রদান করে।

'অপ্টিমাইজ DOM সাইজ' অন্তর্দৃষ্টি যোগ করার আগে এবং পরে।

console.timeStamp ব্যবহার করে পারফর্ম্যান্স ট্রেস প্রসারিত করুন।

এক্সটেনসিবিলিটি API এখন console.timeStamp সমর্থন করে। performance.measure এবং performance.mark ছাড়াও, আপনি এখন পারফরম্যান্স ট্রেসে কাস্টম ট্র্যাক তৈরি করতে পারেন এবং console.timeStamp ব্যবহার করে কাস্টম মার্ক ক্যাপচার করতে পারেন, এটি একটি হালকা বিকল্প যা ব্রাউজারের অভ্যন্তরীণ পারফরম্যান্স টাইমলাইনে এন্ট্রি যোগ করে না বরং কেবল পারফরম্যান্স ট্রেসে দেখায়।

উদাহরণস্বরূপ, আপনি নিম্নলিখিত সিনট্যাক্স ব্যবহার করতে পারেন:

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

ক্যাপচার সেটিংস > কাস্টম ট্র্যাক দেখান এর মাধ্যমে, আপনি ট্রেসে আপনার কাস্টম ট্র্যাকটি দেখতে পাবেন:

console.timeStamp সাপোর্ট যোগ করার আগে এবং পরে।

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

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

অ্যানিমেটেড স্টাইলের রিয়েল-টাইম মান

এলিমেন্টস > স্টাইলস ট্যাব এখন রিয়েল-টাইমে অ্যানিমেটেড স্টাইলের মান আপডেট করে।

:open pseudo-class এবং বিভিন্ন pseudo-elements এর জন্য সমর্থন

এলিমেন্টস প্যানেল এখন Styles > :hov > Force specific element state বিভাগে :open pseudo-class সমর্থন করে নির্দিষ্ট HTML এলিমেন্টের জন্য যেমন <details> , <select> , <dialog> , এবং <input> ।

':open' বিকল্পটি যোগ করার আগে এবং পরে।

অতিরিক্তভাবে, এলিমেন্টস প্যানেল এখন বেশ কয়েকটি নতুন ছদ্ম-উপাদান সমর্থন করে: ::checkmark , ::picker-icon , এবং ক্যারোসেল-সম্পর্কিত ::column , ::scroll-button , ::scroll-marker , এবং ::scroll-marker-group ।

ক্রোমিয়াম সমস্যা: 383157184 , 379805728 ।

সমস্ত কনসোল বার্তা কপি করুন

আপনি এখন একসাথে সমস্ত কনসোল বার্তা ডান-ক্লিক করে অনুলিপি করতে পারবেন।

'কপি কনসোল' বিকল্পটি যোগ করার আগে এবং পরে।

অতিরিক্তভাবে, আপনি নেটওয়ার্ক > অনুরোধ পেলোডের প্রসঙ্গ মেনুতে অনুরূপ একটি কপি বিকল্প খুঁজে পেতে পারেন।

ক্রোমিয়াম সমস্যা: 40206460 , 384967020 ।

মেমোরি প্যানেলে বাইট ইউনিট

মেমোরি প্যানেল এখন বৃহৎ সংখ্যক বাইটের পরিবর্তে উপযুক্ত বাইট ইউনিট সহ আকার দেখায়।

বাইট ইউনিট দেখানোর আগে এবং পরে।

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

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

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

  • কর্মক্ষমতা :
    • টীকা : আপনি এখন আপনার লেবেলে ক্লিক করে সংশ্লিষ্ট এন্ট্রিটি নির্বাচন করতে পারেন ( crbug.com/388224764 )।
    • অন্তর্দৃষ্টি : অন্তর্দৃষ্টি ট্যাবে CLS-এ ক্লিক করলে এখন সবচেয়ে খারাপ শিফটের পরিবর্তে সবচেয়ে খারাপ ক্লাস্টার নির্বাচন করা হবে।
  • তালিকা উপেক্ষা করুন : node: দিয়ে শুরু হওয়া নোড ইন্টার্নালগুলি এখন ডিফল্টরূপে উপেক্ষা করা হয় ( crbug.com/382453615 )।
  • লাইভ এক্সপ্রেশন : $_ কমান্ডকে প্রভাবিত করে এমন বাগ সংশোধন করা হয়েছে ( crbug.com/388437265 )।
  • Elements > Styles : আপেক্ষিক দৈর্ঘ্যের এখন একটি পপওভার রয়েছে যা পরম মান দেখায় ( crbug.com/40778486 )।
  • অ্যাক্সেসিবিলিটি : কলাম হেডারগুলি এখন ঘোষণা করে যে সেগুলি সাজানো যাবে কিনা।
  • ট্যাব আইকনগুলি এখন বাম দিকের পরিবর্তে ট্যাব নামের পাশে ডান দিকে রয়েছে।

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

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

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

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

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

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