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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

'জোর করে রিফ্লো' অন্তর্দৃষ্টি

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

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

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

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

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

আরেকটি নতুন অন্তর্দৃষ্টি হল অপ্টিমাইজ DOM সাইজ । একটি বড় 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 সিউডো-ক্লাস এবং বিভিন্ন ছদ্ম-উপাদান

Elements প্যানেল এখন :open pseudo-class-কে সমর্থন করে স্টাইল > :hov > নির্দিষ্ট HTML এলিমেন্ট যেমন <details> , <select> , <dialog> , এবং <input> এর জন্য নির্দিষ্ট এলিমেন্ট স্টেট সেকশনে বল করুন ।

':open' অপশন যোগ করার আগে এবং পরে।

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

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

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

আপনি এখন একযোগে সমস্ত কনসোল বার্তাগুলিকে ডান-ক্লিক-কপি করতে পারেন৷

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

উপরন্তু, আপনি Network > Request Payload এর প্রসঙ্গ মেনুতে অনুরূপ অনুলিপি বিকল্প খুঁজে পেতে পারেন।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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