DevTools (Chrome 152)-এ নতুন কী আছে

Matthias Rohmer

প্রকাশিত: ২৫ আগস্ট, ২০২৬

ক্রোম ১৫২ নেটওয়ার্ক ডিবাগিং-এ উল্লেখযোগ্য উন্নতি এনেছে, যার মধ্যে রয়েছে রিকোয়েস্ট পুনরায় পাঠানো ও বাইনারি পেলোড পরিদর্শন, কাস্টম এলিমেন্ট অ্যাডোর্নার এবং এলিমেন্টস-এ উন্নত সিএসএস নেস্টিং, পারফরম্যান্স লাইভ মেট্রিক্স-এ সফট নেভিগেশনের জন্য কোর ওয়েব ভাইটালস, কনসোল-এ স্ট্রাকচার্ড টেবিল এক্সপোর্টিং এবং ডেভটুলস এমসিপি সার্ভারের উন্নতি।

এজেন্টদের জন্য ডেভটুলস

Chrome DevTools MCP সার্ভারের সর্বশেষ v1.7.0 রিলিজটি Antigravity, Claude, Codex এবং অন্যান্য কোডিং এজেন্টের জন্য পূর্বে প্রবর্তিত মেমরি ডিবাগিং সক্ষমতাগুলোকে আরও উন্নত করেছে:

• হিপ স্ন্যাপশট অবজেক্টের বিবরণ ( get_heapsnapshot_object_details ): সরাসরি হিপ স্ন্যাপশট থেকে জাভাস্ক্রিপ্ট অবজেক্টের বিস্তারিত প্রোপার্টি, ক্লাসের নাম এবং GC রুট রিটেইনিং পাথ পরীক্ষা করুন।
• নেটিভ V8 কনটেক্সট ফিল্টারিং: নেটিভ এক্সিকিউশন কনটেক্সট অনুযায়ী হিপ স্ন্যাপশট অবজেক্ট ফিল্টার করুন এবং স্ন্যাপশট সামারিতে নেটিভ কনটেক্সটগুলো পরীক্ষা করুন।
• ডেমন স্থিতিশীলতা এবং জীবনচক্রের উন্নতি: প্রতি-ন্যাভিগেশন নেটওয়ার্ক অনুরোধের সীমিত ধারণ, সেশন আইডি যাচাইকরণ, CLI-থেকে-ডেমন সংস্করণ অমিলের সতর্কতা, এবং কনটেক্সট নিষ্পত্তির সময় ওয়ার্কারের সুষ্ঠু টিয়ারডাউন যুক্ত করা হয়েছে।

আরও জানতে ও কাজ শুরু করতে, গিটহাবে থাকা ‘DevTools for agents’ রিপোজিটরিটি দেখুন।

নেটওয়ার্ক: অনুরোধ সম্পাদনা ও পুনঃপ্রেরণ, অন্তর্দৃষ্টি প্রি-লোড করা, এবং বাইনারি পেলোড ডিকোডিং

• ফেচ এবং XHR অনুরোধ পুনরায় পাঠান: পূর্বের "রিপ্লে XHR" কনটেক্সট মেনু আইটেমটি এখন " পুনরায় পাঠান "। এটি এখন সমস্ত ফেচযোগ্য নেটওয়ার্ক অনুরোধ সমর্থন করে, XHR-এর পাশাপাশি সম্পূর্ণ রিপ্লে বিশ্বস্ততা বজায় রেখে স্ট্যান্ডার্ড অনুরোধগুলিকে fetch() কলে রূপান্তরিত করে। অনুরোধগুলি তাদের এক্সিকিউশন কনটেক্সট এবং কনসোল অরিজিনেটরকেও ট্র্যাক করে এবং প্রদর্শন করে।
• প্রিলোডেড কলাম এবং "প্রিলোড এলিমেন্ট হিসাবে কপি করুন": একটি নতুন ডেডিকেটেড প্রিলোডেড কলাম দেখায় যে কোনো নেটওয়ার্ক রিকোয়েস্ট স্পেকুলেটিভ প্রিলোডিং ব্যবহার করে শুরু করা হয়েছিল কিনা। আপনি যেকোনো রিকোয়েস্টে রাইট-ক্লিক করে "প্রিলোড এলিমেন্ট হিসাবে কপি করুন " নির্বাচন করে একটি <link rel="preload"> ট্যাগ তৈরি করতে পারেন, যা সরাসরি আপনার HTML-এ যুক্ত করা যাবে। আর্লি হিন্টস এখন ইনিশিয়েটর কলামের অধীনে শ্রেণীবদ্ধ করা হয়েছে।
• রিকোয়েস্ট পেলোডের জন্য বাইনারি ভিউয়ার: রেসপন্স ট্যাবের আদলে, পেলোড ট্যাবে এখন বাইনারি এবং কম্প্রেসড রিকোয়েস্ট পেলোডের জন্য ডিকোডিং পদ্ধতির অপশন (বেস৬৪, হেক্স, এবং ইউটিএফ-৮) অন্তর্ভুক্ত করা হয়েছে।
• পিন করা অনুরোধ নম্বর কলাম: অনুরোধ সহজে খুঁজে পাওয়ার জন্য, অনুরোধ # কলামটি এখন নেটওয়ার্ক ডেটা গ্রিডের প্রথম অবস্থানে পিন করা হয়েছে।
• একই-সাইট হোস্ট ফিল্টারিং: নেটওয়ার্ক ফিল্টার বারে ডোমেইন, হোস্টনেম বা পোর্ট (যেমন localhost বা example.com ) দিয়ে সার্চ করলে এখন একই-সাইট রিকোয়েস্টগুলো সঠিকভাবে ফিল্টার হয়।
• ডিফল্ট কোয়েরি প্যারামিটার ডিকোডিং: পেলোড ট্যাবের কোয়েরি এবং ফর্ম প্যারামিটারগুলো এখন থেকে সকল রিকোয়েস্টের জন্য স্বয়ংক্রিয়ভাবে ডিকোড করা হয়।

ক্রোমিয়াম সমস্যা: 40726969 , 41299075 , 40138847 , 40222701 , 525848667 , 507077182 , 498482622 , 520437951 , 40267477

উপাদানসমূহ: কাস্টম এলিমেন্ট অ্যাডোর্নার, নেস্টেড CSS প্যারেন্ট সিলেক্টরের ইন্টারঅ্যাকশন, এবং $0 সিউডো-এলিমেন্ট সিলেকশন

এলিমেন্টস প্যানেলে ওয়েব কম্পোনেন্ট এবং আধুনিক CSS পরিদর্শন ও রচনা করা আরও দ্রুত এবং সহজবোধ্য:

• কাস্টম এলিমেন্ট অ্যাডোর্নার ব্যাজ: কাস্টম HTML এলিমেন্টগুলো (হাইফেনযুক্ত ট্যাগ অথবা কাস্টমাইজড বিল্ট-ইন এলিমেন্টের জন্য is="..." অ্যাট্রিবিউট দ্বারা চিহ্নিত) এখন DOM ট্রি আউটলাইনে একটি custom-element অ্যাডোর্নার ব্যাজ প্রদর্শন করে।
• নেস্টেড CSS প্যারেন্ট সিলেক্টরের ইন্টারঅ্যাকশন ও স্পেসিফিসিটি: নেস্টেড CSS রুল এবং ইনহেরিটেড নেস্টেড রুলের প্যারেন্ট সিলেক্টরের উপর হোভার করলে এখন পেজের ম্যাচিং এলিমেন্টগুলো হাইলাইট হয় এবং স্টাইলস ট্যাব ফিল্টারিং-এ সাড়া দেয়। @nested-declarations রুলের জন্য স্পেসিফিসিটি টুলটিপ পপওভার যোগ করা হয়েছে।
• $0 এর মাধ্যমে সিউডো-এলিমেন্ট নির্বাচন: এলিমেন্টস ডম ট্রি-তে ::before বা ::after মতো সিউডো-এলিমেন্ট নির্বাচন করলে, তা এখন তাৎক্ষণিক জাভাস্ক্রিপ্ট পর্যবেক্ষণের জন্য সরাসরি $0 কনসোল ভেরিয়েবলের সাথে যুক্ত হয়ে যায়।
• text-wrap এবং <image> টাইপের জন্য অটোকমপ্লিশন: স্টাইলস প্যানে এখন text-wrap এর জন্য সমস্ত কীওয়ার্ড ভ্যালু ( wrap , nowrap , balance , pretty , stable ) সাজেস্ট করে এবং <image> ডেটা টাইপ গ্রহণকারী CSS প্রোপার্টিগুলো অটোকমপ্লিট করে।
• বক্স মডেল স্ক্রলবার সচেতনতা: এলিমেন্টগুলিতে দৃশ্যমান স্ক্রলবার থাকলেও বক্স মডেল মেট্রিক্স ডায়াগ্রামটি এখন কন্টেন্ট বক্সের মাত্রা সঠিকভাবে গণনা ও রেন্ডার করে।

ক্রোমিয়াম সমস্যাসমূহ: 367440148 , 535517817 , 535522242 , 535523039 , 537724428 , 399305533 , 334984154 , 383355294 , 326260752 , 389342065

পারফরম্যান্স: লাইভ মেট্রিক্সে সফট নেভিগেশন মেট্রিক্স এবং কাস্টম স্ক্রিনশট প্রিসেট

• সফট নেভিগেশনের জন্য লাইভ মেট্রিক্স সাপোর্ট: web-vitals v6.0.0-এ আপগ্রেডের ফলে, লাইভ মেট্রিক্স ভিউ এখন ডিফল্টরূপে সিঙ্গেল-পেজ অ্যাপ্লিকেশনের ক্লায়েন্ট-সাইড সফট নেভিগেশনের জন্য কোর ওয়েব ভাইটালস (যেমন LCP এবং INP) ক্যাপচার ও রিপোর্ট করে।
• কাস্টম স্ক্রিনশট ক্যাপচার প্রিসেট: পারফরম্যান্স প্যানেলে সিডিপি ট্রেসিং-এর জন্য কনফিগারযোগ্য স্ক্রিনশট ফ্রেম সাইজ এবং কাউন্ট ক্যাপ প্রিসেট উন্মুক্ত করা হয়েছে, যা মেমরি বাজেটের মধ্যে ভিজ্যুয়াল রেকর্ডিংয়ের বিশ্বস্ততা কাস্টমাইজ করতে সাহায্য করে।
• console.profileEnd() ট্রেস রিভিলার: এখন আপনার কোড বা কনসোলে console.profileEnd() কল করলে পারফরম্যান্স প্যানেলে রেকর্ড করা ট্রেসটি স্বয়ংক্রিয়ভাবে খুলে যায় এবং দেখা যায়।
• এক্সটেনসিবিলিটি এপিআই কাস্টম ট্র্যাক সারাংশ: পারফরম্যান্স ট্রেস সারাংশ এখন এক্সটেনসিবিলিটি এপিআই ব্যবহার করে নিবন্ধিত কাস্টম ট্র্যাক গ্রুপগুলিকে প্রক্রিয়া করে এবং উপস্থাপন করে।

ক্রোমিয়াম সমস্যা: 514721939 , 490140054 , 536954453 , 535506117

কনসোল: টেবিলগুলোকে মার্কডাউন বা CSV হিসেবে এক্সপোর্ট করুন এবং সাইড-ইফেক্ট সুরক্ষা

• কনসোল টেবিল মার্কডাউন বা CSV হিসাবে কপি করুন: console.table() ব্যবহার করে লগ করা টেবিলগুলি এখন কনটেক্সট মেনু থেকে সরাসরি আপনার ক্লিপবোর্ডে ফরম্যাট করা মার্কডাউন টেবিল বা CSV ডেটা হিসাবে কপি করা যাবে।
• পার্শ্ব-প্রতিক্রিয়া মূল্যায়ন সুরক্ষা: ডিবাগারের হোভার মূল্যায়ন এখন new , ট্যাগযুক্ত টেমপ্লেট লিটারেল, ডাইনামিক ` import() , এবং delete অপারেটরযুক্ত এক্সপ্রেশন থেকে সুরক্ষা প্রদান করে, যা পজ করা অবস্থায় দুর্ঘটনাজনিত স্টেট পরিবর্তন প্রতিরোধ করে।

ক্রোমিয়াম সমস্যা: 40924951 , 40133606

অন্যান্য উল্লেখযোগ্য বিষয়

অন্যান্য ডেভটুলস সাবসিস্টেম জুড়ে উল্লেখযোগ্য উন্নতিগুলোর একটি সংকলন:

• সূত্র : কুইক ওপেন এখন লোকাল ওয়ার্কস্পেস ফাইলগুলোকে অনেক বেশি স্কোর দিয়ে অগ্রাধিকার দেয়, যার ফলে ওয়ার্কস্পেস ফাইলগুলো নেটওয়ার্ক রিসোর্সের উপরে চলে আসে। (ক্রোমিয়াম ইস্যু: 40260136 )
• মেমরি : হিপ স্ন্যাপশট সামারি ভিউ এখন নির্বাচিত টাইপগুলির জন্য অ্যাগ্রিগেটেড শ্যালো সাইজের পাশাপাশি মোট অবজেক্ট সংখ্যা প্রদর্শন করে এবং এতে নেটিভ এক্সিকিউশন কনটেক্সট ফিল্টার অন্তর্ভুক্ত রয়েছে। (ক্রোমিয়াম ইস্যু: 497855658 )
• প্রয়োগ : অ্যাডস প্যানেলটি 'হাইলাইট অ্যাডস' টগলটিকে সরাসরি প্যানেলের মধ্যে স্থানান্তর করেছে, হায়ারার্কিতে ফ্রেমগুলো দেখানোর জন্য ক্লিকযোগ্য 'অ্যাড আইফ্রেম এলিমেন্ট আইডি' যোগ করেছে, এবং প্রতি-ফ্রেম মেট্রিক্সের একটি বিশদ সারণী চালু করেছে। (ক্রোমিয়াম ইস্যু: 514957134 )
• অ্যাপ্লিকেশন : স্টোরেজ প্যানেলের ' ক্লিয়ার সাইট ডেটা' সেকশনটিকে একটি সমন্বিত ও সংহত গ্রুপে নতুন করে ডিজাইন করা হয়েছে (ক্রোমিয়াম ইস্যু: 375867286 ), এবং ব্যাক/ফরোয়ার্ড ক্যাশ পুনরুদ্ধারের পরে ডুপ্লিকেট ক্যাশ স্টোরেজ এন্ট্রিগুলির সমাধান করা হয়েছে (ক্রোমিয়াম ইস্যু: 484693244 )।
• এক্সটেনশন : chrome.devtools.panels জুড়ে থাকা অ্যাসিঙ্ক মেথডগুলো এখন থেকে কলব্যাক ছাড়া কল করা হলে নেটিভভাবে জাভাস্ক্রিপ্ট প্রমিজ রিটার্ন করবে। (ক্রোমিয়াম ইস্যু: 496604551 )
• সেটিংস : ডিফল্ট নেটওয়ার্ক থ্রটলিং প্রিসেট এবং কাস্টম থ্রটলিং কনফিগারেশনগুলোকে আলাদা বিভাগে বিভক্ত করুন। (ক্রোমিয়াম সমস্যা: 342409451 )
• লাইটহাউস : বান্ডেল করা লাইটহাউস মডিউলটি সংস্করণ 13.4.1 -এ আপডেট করা হয়েছে। (ক্রোমিয়াম ইস্যু: 40543651 )
• সমস্যা : loading="lazy" ব্যবহার করা কোনো ছবির সুস্পষ্ট width বা height মাপ না থাকলে DevTools একটি সতর্কবার্তা দেখায়।
• ডিভাইস মোড : একটি সমন্বিত ‘ফিট টু উইন্ডো’ অপশনের মাধ্যমে জুম লেভেল মেনুটিকে সরল করা হয়েছে এবং ফ্রেম গ্রাফিক্স অনুপলব্ধ থাকলে ‘শো ডিভাইস ফ্রেম’ টগলটি নিষ্ক্রিয় করা হয়েছে।

প্রবেশগম্যতা উন্নয়ন

ক্রোম ১৫২-এ নিম্নলিখিত অ্যাক্সেসিবিলিটি বর্ধন অন্তর্ভুক্ত রয়েছে:

• এলিমেন্টস ও অ্যাক্সেসিবিলিটি : এলিমেন্টস ডম ট্রি এবং অ্যাক্সেসিবিলিটি ট্রি ভিউ-এর মধ্যে নির্বিঘ্নে পরিবর্তন করার জন্য কনটেক্সট মেনু অপশন যোগ করা হয়েছে, সাথে অ্যাক্সেসিবিলিটি নোডগুলোর জন্য "স্ক্রল ইনটু ভিউ" সুবিধাও রয়েছে। (ক্রোমিয়াম ইস্যু: 417929842 )
• অ্যাক্সেসিবিলিটি : কন্টেক্সট মেনু ব্যবহার করে অ্যাক্সেসিবিলিটি ট্রি-এর নোড এবং সাবট্রি-গুলোকে সাধারণ টেক্সট হিসেবে কপি করার সুবিধা যোগ করা হয়েছে। (ক্রোমিয়াম ইস্যু: 417929842 )
• এলিমেন্টস : ডার্ক মোডে চলার সময় এলিমেন্টস প্যানেলে কম-কনট্রাস্ট সার্চ হাইলাইট রঙের সমস্যা সমাধান করা হয়েছে। (ক্রোমিয়াম ইস্যু: 491718898 )
• নেভিগেশন : DevTools-কে একটি আলাদা উইন্ডোতে আনডক করলে বা ট্যাবে পুনরায় ডক করলে এখন আর প্রধান মেনু বোতামে ফোকাস জোর করে চলে যায় না।
• সেটিংস : এআই সেটিংসে 'আরও দেখান' এবং 'কম দেখান' বাটনগুলিতে বর্ণনামূলক প্রবেশযোগ্য প্রেক্ষাপট যোগ করা হয়েছে।