DevTools, Chrome 125-এ নতুন কী রয়েছে৷

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

জেমিনির সাহায্যে কনসোলে ত্রুটি এবং সতর্কতাগুলি আরও ভালভাবে বুঝুন

এই Chrome সংস্করণটি DevTools কনসোলে জেনারেটিভ AI ক্ষমতা নিয়ে আসে, যার লক্ষ্য হল আপনি যে ত্রুটি এবং সতর্কতাগুলির সম্মুখীন হন সেগুলি সম্পর্কে আরও ভাল ধারণা প্রদান করা।

কোনও ত্রুটি বা সতর্কতার AI-উত্পাদিত ব্যাখ্যা পেতে, ক্লিক করুন আলোকবাতির স্ফুলিঙ্গ। কনসোলে বার্তার পাশে থাকা এই ত্রুটি (সতর্কতা) বোতামটি বুঝুন এবং নির্দেশাবলী অনুসরণ করুন।

একটি ত্রুটির কৃত্রিম বুদ্ধিমত্তা (AI) দ্বারা তৈরি ব্যাখ্যা।

আরও তথ্যের জন্য, AI ব্যবহার করে ত্রুটি এবং সতর্কতাগুলি আরও ভালভাবে বুঝুন দেখুন।

এলিমেন্টস > স্টাইলে @position-try নিয়ম সমর্থন করে

CSS অ্যাঙ্কর পজিশনিং ডিবাগ করতে সাহায্য করার জন্য, Elements > Styles ট্যাব এখন @position-try CSS নিয়ম সমর্থন করে। ট্যাবটি position-try-options মানগুলি সমাধান করে এবং প্রতিটি বিকল্পকে একটি ডেডিকেটেড @position-try --name বিভাগের সাথে লিঙ্ক করে।

@position-try CSS নিয়ম সমর্থন করার আগে এবং পরে।

আরও জানতে, CSS অ্যাঙ্কর পজিশনিং API এর সাথে পরিচয় করিয়ে দিন।

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

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

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

স্বয়ংক্রিয় প্রিটি-প্রিন্টিং এবং ব্র্যাকেট ক্লোজিং কনফিগার করুন

আপনি এখন Sources এ Editor এর জন্য স্বয়ংক্রিয় প্রিটি-প্রিন্টিং এবং ব্র্যাকেট ক্লোজিং চালু বা বন্ধ করতে পারেন। প্রিটি-প্রিন্টিং মিনিফাই করা ফাইলগুলিকে পঠনযোগ্য করে তোলে। ব্র্যাকেট ক্লোজিং স্বয়ংক্রিয়ভাবে একটি ক্লোজিং ব্র্যাকেট ( ) অথবা } ) অথবা ট্যাগ ( > ) যোগ করে যখন আপনি একটি খোলার টাইপ করেন।

প্রাসঙ্গিক আচরণ কনফিগার করতে, নতুন চেক বা সাফ করুন । স্বয়ংক্রিয়ভাবে বন্ধ হওয়া বন্ধনী এবং স্বয়ংক্রিয়ভাবে সুন্দরভাবে প্রিন্ট করুন। সেটিংস > পছন্দ > উৎস থেকে minified বিকল্পগুলি ।

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

ক্রোমিয়াম সমস্যা: 40865010 , 324314570 ।

প্রত্যাখ্যাত প্রতিশ্রুতিগুলি ধরা পড়েছে বলে স্বীকৃত হয়।

যদি আপনি .catch() অথবা two-argument .then() ব্যবহার করে প্রত্যাখ্যাত প্রতিশ্রুতিগুলি পরিচালনা করেন, তাহলে Sources প্যানেল এখন সঠিকভাবে প্রত্যাখ্যাত প্রতিশ্রুতিগুলিকে ধরা হিসাবে স্বীকৃতি দেয়।

অন্য কথায়, যখন Sources > Breakpoints > Pause on uncaught exceptions চালু থাকে, তখন ডিবাগার নিম্নলিখিতগুলির মতো বিবৃতিতে বিরতি দেবে না:

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

ধরা পড়া প্রত্যাখ্যানগুলি স্বীকৃতি দেওয়ার আগে এবং পরে।

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

কনসোলে ত্রুটির কারণ

কনসোল এখন আপনাকে স্ট্যাক ট্রেসে ত্রুটির কারণগুলির শৃঙ্খল দেখাবে, যদি থাকে।

ডিবাগিং সহজ করার জন্য, ত্রুটি ধরা এবং পুনঃনির্ধারণ করার সময় আপনি ত্রুটির কারণগুলি নির্দিষ্ট করতে পারেন। কনসোলটি কারণ শৃঙ্খলে যাওয়ার সাথে সাথে, এটি প্রতিটি ত্রুটির স্ট্যাককে একটি Caused by: উপসর্গ সহ প্রিন্ট করে, যাতে আপনি এখনও মূল ত্রুটিটি দেখতে পারেন।

`Caused by` উপসর্গ সহ প্রিন্ট করার আগে এবং পরে স্ট্যাক ট্রেস।

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

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

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

প্রারম্ভিক ইঙ্গিত শিরোনামগুলি পরীক্ষা করুন

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

Early Hints হল একটি HTTP স্ট্যাটাস কোড ( 103 Early Hints ) যা চূড়ান্ত প্রতিক্রিয়ার আগে একটি প্রাথমিক HTTP প্রতিক্রিয়া পাঠাতে ব্যবহৃত হয়। এটি একটি সার্ভারকে গুরুত্বপূর্ণ উপ-সম্পদ (উদাহরণস্বরূপ, একটি স্টাইল শীট বা সমালোচনামূলক জাভাস্ক্রিপ্ট) বা মূল উৎস সম্পর্কে ব্রাউজারে ইঙ্গিত পাঠাতে দেয় যা সম্ভবত পৃষ্ঠা দ্বারা ব্যবহৃত হবে, যখন সার্ভারটি মূল সংস্থান তৈরিতে ব্যস্ত থাকে।

প্রারম্ভিক ইঙ্গিতের জন্য একটি নিবেদিত বিভাগ যোগ করার আগে এবং পরে।

আরও তথ্যের জন্য, "প্রাথমিক ইঙ্গিত সহ সার্ভার থিঙ্ক-টাইম ব্যবহার করে দ্রুত পৃষ্ঠা লোড" দেখুন।

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

জলপ্রপাতের কলামটি লুকান

আপনি এখন নেটওয়ার্ক প্যানেলে ওয়াটারফল কলামটি লুকাতে পারবেন, ঠিক যেমন আপনি অন্যান্য কলামগুলি লুকাতে পারেন। যেকোনো কলামের নামে ডান-ক্লিক করুন এবং ড্রপ-ডাউন মেনুতে ওয়াটারফল চেকবক্সটি সাফ করুন।

জলপ্রপাত কলাম লুকানোর বিকল্প যোগ করার আগে এবং পরে।

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

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

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

CSS নির্বাচক পরিসংখ্যান ক্যাপচার করুন

পারফরম্যান্স প্যানেলে একটি নতুন সেটিং পাওয়া গেছে যা আপনাকে দীর্ঘকাল ধরে চলমান রিক্যালকুলেট স্টাইল ইভেন্টের জন্য CSS নির্বাচক পরিসংখ্যান ক্যাপচার করতে সাহায্য করবে।

পরিসংখ্যান দেখতে, একটি Recalculate Style ইভেন্ট নির্বাচন করুন এবং নতুন Selector Stats ট্যাব খুলুন। ট্যাবটি আপনাকে প্রতিটি নির্বাচকের জন্য অতিবাহিত সময়, ম্যাচ প্রচেষ্টা এবং গণনা এবং ধীর-পথের অ-মিলের শতাংশের তথ্য দেখায়।

নির্বাচক পরিসংখ্যান যোগ করার আগে এবং পরে।

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

ক্রম পরিবর্তন করুন এবং ট্র্যাক লুকান

পারফরম্যান্স প্যানেলে একটি নতুন কনফিগারেশন মোড রয়েছে যা আপনাকে ট্র্যাকের ক্রম পরিবর্তন করতে এবং সেগুলি লুকাতে দেয়।

কনফিগারেশন মোডে প্রবেশ করতে, ট্র্যাক নামের বাম দিকে " সম্পাদনা করুন" বোতামে ক্লিক করুন। তারপর ট্র্যাকটি সরাতে up অথবা down এ ক্লিক করুন অথবা hide এ ক্লিক করুন। কাজ শেষ হয়ে গেলে ট্র্যাক নামের ডানদিকে " চেক" বোতামে ক্লিক করুন।

পরবর্তী সংস্করণ, Chrome 126, এই UI তে আরও উন্নতি আনবে।

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

মেমোরি প্যানেলে রিটেইনারগুলি উপেক্ষা করুন

মেমোরি প্যানেলের সাহায্যে ক্যাপচার করা হিপ স্ন্যাপশটে আপনি এখন রিটেইনার উপেক্ষা করতে পারবেন।

একটি রিটেইনার উপেক্ষা করতে, একটি অবজেক্ট নির্বাচন করুন এবং, রিটেইনার বিভাগে, একটি রিটেইনারে ডান-ক্লিক করুন এবং ড্রপ-ডাউন মেনু থেকে Ignore this retainer নির্বাচন করুন। Ignored retainers দূরত্ব কলামে ignored মান দিয়ে চিহ্নিত করা হয়। উপেক্ষা করা বন্ধ করতে, উপরের অ্যাকশন বারে Restore ignored retainers এ ক্লিক করুন।

রিটেইনার উপেক্ষা করার জন্য একটি বিকল্প যোগ করার আগে এবং পরে।

অতিরিক্তভাবে, হিপ স্ন্যাপশটগুলি এখন আরও বৃহত্তর সংখ্যক (কয়েক লক্ষ) কন্টেনমেন্ট এজ এবং নোড ( 332350576 ) সমর্থন করে।

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

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

লাইটহাউস প্যানেল এখন লাইটহাউস ১১.৭.১ চালায়। পরিবর্তনগুলির সম্পূর্ণ তালিকা দেখুন।

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

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

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

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

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

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

  • রেকর্ডার প্যানেলটি এখন আনুষ্ঠানিকভাবে প্রিভিউ স্ট্যাটাসের বাইরে ( 329271496 )।
  • যখন একটি কাস্টম ফর্ম্যাটার body() ফাংশনের জন্য একটি null ফেরত দেয়, যা একটি বৈধ আচরণ ( 329400119 ) তখন কনসোল এখন কোনও ত্রুটি দেখায় না।
  • সোর্স প্যানেল সিনট্যাক্স হাইলাইটার আপডেট করেছে, বিশেষ করে, এটি এখন রেগুলার এক্সপ্রেশনে v এবং d ফ্ল্যাগ সমর্থন করে।
  • নেটওয়ার্ক > কুকিজ ট্যাব রেসপন্স কুকিজের সাথে অব্যাহতিপ্রাপ্ত কুকিজ ম্যাপ করার মাধ্যমে একটি বাগ সংশোধন করেছে ( 41491846 )।
  • এলিমেন্টস > স্টাইলস ট্যাব এখন নিম্নলিখিত কাজগুলি করে:
    • কাস্টম বৈশিষ্ট্য সহ সম্পূর্ণরূপে ওভারলোডেড উত্তরাধিকারসূত্রে প্রাপ্ত নিয়মগুলি দেখায় ( 41489874 )।
    • রঙের থিমের উপর নির্ভর করে light-dark() তে প্রয়োগকৃত মান হাইলাইট করে ( 331123816 )।

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

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

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

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

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

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