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

Matthias Rohmer

প্রকাশিত: ৩০ জুন, ২০২৬

ক্রোম ১৫০ এজেন্টদের জন্য ডেভটুলস-এ উন্নত মেমরি ডিবাগিং, আরও উইজেটের মাধ্যমে এআই সহায়তা বৃদ্ধি এবং CSS @container ও @function রুলগুলোর সম্পূর্ণ সম্পাদনার ক্ষমতা নিয়ে এসেছে।

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

v1.4.0 পর্যন্ত সাম্প্রতিক রিলিজগুলোতে, এজেন্টদের জন্য ক্রোম ডেভটুলস তার এজেন্টিক ব্রাউজার অটোমেশন এবং ডিবাগিং ক্ষমতা উল্লেখযোগ্যভাবে প্রসারিত করেছে।

সর্বশেষ রিলিজের পর থেকে প্রধান বৈশিষ্ট্য এবং উন্নতিগুলোর মধ্যে রয়েছে:

• মেমরি ডিবাগিং স্যুট ( --experimentalMemory ): এজেন্টরা এখন জাভাস্ক্রিপ্ট মেমরি লিক নির্ণয় করতে এবং অবজেক্ট রিটেনশন হায়ারার্কি বিশ্লেষণ করতে সরাসরি V8 হিপ স্ন্যাপশট ক্যাপচার ও বিশ্লেষণ করতে পারে।
• ক্রোম এক্সটেনশন ব্যবস্থাপনা ( --categoryExtensions ): এজেন্টরা এক্সটেনশনের জীবনচক্র (ইনস্টল, আনইনস্টল, রিলোড, তালিকা) পরিচালনা করতে পারে এবং রোগ নির্ণয়ের জন্য ব্যাকগ্রাউন্ড সার্ভিস ওয়ার্কার কনসোল লগ সংগ্রহ করতে পারে।
• বান্ডেলকৃত এজেন্ট স্কিল: ` skills/ ডিরেক্টরিটি এখন সরাসরি npm প্যাকেজ ডিস্ট্রিবিউশনে প্রকাশিত হয়েছে, যা MCP ক্লায়েন্ট এজেন্টদের বিশেষায়িত ব্রাউজিং এবং ডিবাগিং ওয়ার্কফ্লো স্বয়ংক্রিয়ভাবে খুঁজে বের করতে ও সম্পাদন করতে সক্ষম করে।
• টোকেন এবং আউটপুট অপ্টিমাইজেশন: উৎস পর্যায়ে স্ক্রিনশটের মাত্রা সীমিত করার ফলে টোকেনের ব্যবহার কমে, এবং পরীক্ষামূলক TOON (টোকেন-ভিত্তিক অবজেক্ট নোটেশন) সাপোর্ট স্ট্রাকচার্ড ডেটার ফরম্যাটিং অপ্টিমাইজ করে।
• উন্নত নেভিগেশন এবং কনটেক্সট: একাধিক ট্যাবে কনটেক্সট নির্বাচন আরও উন্নত করার জন্য list_pages এখন URL এবং টার্গেট আইডির পাশাপাশি পেজের শিরোনামও অন্তর্ভুক্ত করা হয়েছে, এবং allowedUrlPattern ও blockedUrlPattern কনফিগারেশন অপশনগুলো ব্রাউজিং স্কোপের কঠোর নিরাপত্তা নিশ্চিত করে।

এজেন্টদের জন্য ডেভটুলস সম্পর্কিত সর্বশেষ আপডেট পেতে এবং অবদান রাখতে, গিটহাব রিপোজিটরিটি দেখুন।

এআই সহায়তায় গভীরতর অন্তর্দৃষ্টি

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

ক্রোমিয়াম সমস্যা: ৪৬০৭৬৩৯৯৫

আরও CSS অ্যাট-রুলগুলির জন্য সম্পূর্ণ সম্পাদনা সমর্থন

এলিমেন্টস প্যানেলের স্টাইলস ট্যাবটি আধুনিক CSS ফিচারগুলোর জন্য নতুন অথরিং সুবিধা নিয়ে আসে:

• ইন-প্লেস @container রুল সম্পাদনা: এখন আপনি সরাসরি CSS @container রুলে কন্টেইনারের নাম এবং কোয়েরি শর্ত সম্পাদনা করতে পারবেন, যা রেসপন্সিভ কন্টেইনার কোয়েরি ডিজাইন নিয়ে নির্বিঘ্নে পরীক্ষা-নিরীক্ষার সুযোগ করে দেয়।
• CSS @function রুল সম্পাদনা: কাস্টম CSS @function রুলগুলোর জন্য পূর্ণাঙ্গ সম্পাদনা সুবিধা যোগ করা হয়েছে।
• @counter-style নিয়ম সম্পাদনা: list-style-type প্রপার্টিগুলোর জন্য কোড কমপ্লিশন যোগ করা হয়েছে, যা সেগুলোকে সরাসরি তাদের সংশ্লিষ্ট @counter-style ডেফিনিশনের সাথে লিঙ্ক করে।
• অপ্রয়োজনীয় নিয়মগুলো সংকুচিত করুন: একটি নতুন প্রেফারেন্স সেটিং আপনাকে অপ্রয়োজনীয় CSS স্টাইল নিয়মগুলো সংকুচিত করার সুযোগ দেয়, যার ফলে স্টাইলস পেইনটি শুধুমাত্র সক্রিয় স্টাইলগুলোর উপরই দৃষ্টি নিবদ্ধ রাখে।

ক্রোমিয়াম সমস্যা: 507611251 , 41491726 , 480080406 , 351662727 , 514846131

সোর্সগুলিতে ডুপ্লিকেট-মুক্ত ব্রেকপয়েন্ট এবং রিকার্সিভ সোর্স ম্যাপ সমর্থন

সোর্সেস প্যানেলটি জটিল আধুনিক বিল্ড পাইপলাইন জুড়ে উন্নত ডিবাগিং নির্ভুলতা প্রদান করে:

• লজিক্যাল ব্রেকপয়েন্ট ডি-ডুপ্লিকেশন: এখন গাটারে থাকা ব্রেকপয়েন্ট মার্কারগুলো কোড-স্প্লিট বান্ডেল এবং SSR/ক্লায়েন্ট কম্পাইল করা টেমপ্লেট জুড়ে নিকটতম রিজলভড লোকেশন ম্যাপিং ব্যবহার করে ডি-ডুপ্লিকেট করা হয়। এটি একাধিক চাঙ্ক বা এনভায়রনমেন্টে শেয়ার করা কোড ডিবাগ করার সময় ডুপ্লিকেট ব্রেকপয়েন্ট ইন্ডিকেটর প্রতিরোধ করে।
• রিকার্সিভ EvalOrigin এবং নেস্টেড সোর্স ম্যাপ: ডিবাগার এখন রিকার্সিভ EvalOrigin স্ট্রাকচার এবং সোর্স ম্যাপ জুড়ে নেস্টেড ট্রান্সলেশন চেইন সমর্থন করে, যা মাল্টি-স্টেজ কম্পাইলেশন ওয়ার্কফ্লোতে সঠিক স্ট্যাক ট্রেস এবং স্টেপিং আচরণ নিশ্চিত করে।
• লাইনে যাওয়ার কিবোর্ড শর্টকাট: এডিটরে "লাইনে যান" নেভিগেশনের জন্য একটি অতিরিক্ত কিবোর্ড শর্টকাট হিসেবে ALT + G যোগ করা হয়েছে, যাতে Chrome-এর নতুন Gemini শর্টকাটের সাথে কোনো সংঘাত না হয়।
• ইমপোর্ট অ্যাট্রিবিউটের ফরম্যাটিং: স্ট্যান্ডার্ড জাভাস্ক্রিপ্ট ইমপোর্ট অ্যাট্রিবিউট সিনট্যাক্সের জন্য প্রিটি-প্রিন্ট ফরম্যাটিং সমর্থন করতে অন্তর্নিহিত অ্যাকর্ন পার্সারটি আপডেট করা হয়েছে।

ক্রোমিয়াম সমস্যা: 493674242 , 485142682 , 480172712 , 491167992

ডেভটুল জুড়ে নিরাপত্তা এবং ক্রস-অরিজিন হার্ডেনিং

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

• লাইভ এক্সপ্রেশনের জন্য সেলফ-এক্সএসএস সুরক্ষা: কনসোলে লাইভ এক্সপ্রেশন তৈরি করার সময় সেলফ-এক্সএসএস সতর্কীকরণ ডায়ালগ এবং সুরক্ষা ব্যবস্থা যুক্ত করা হয়েছে।
• রেকর্ডার নেভিগেশন অ্যালাওলিস্ট এবং রিপ্লে ভেরিফিকেশন: রেকর্ডার প্যানেল এখন উচ্চ-সুবিধা সম্পন্ন পেজে নেভিগেট করা প্রতিরোধ করার জন্য কঠোর নেভিগেশন অ্যালাওলিস্ট প্রয়োগ করে এবং এর পাশাপাশি রিপ্লে সেকশনের মধ্যে এক্সটেনশনের উৎস কঠোরভাবে যাচাই করে।
• এক্সটেনশন নেটওয়ার্ক ওভাররাইড সীমাবদ্ধতা: এক্সটেনশন দ্বারা পরিচালিত নেটওয়ার্ক ওভাররাইডগুলো এখন runtime_blocked_hosts হোস্ট পলিসিগুলো কঠোরভাবে প্রয়োগ করে।
• নিরাপদ @font-face নির্মাণ: CSSStyleSheet API ব্যবহার করে @font-face নিয়ম তৈরির প্রক্রিয়াকে নতুন করে সাজানো হয়েছে এবং ডেটা URL-এর মাধ্যমে CSS ইনজেকশন প্রতিরোধ করার জন্য নিরাপদ URL স্ট্রিংফিকেশন করা হয়েছে।

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

এই রিলিজে কিছু ছোটখাটো উন্নতি এবং বাগ ফিক্স করা হয়েছে:

• পারফরম্যান্স : চিহ্নিত ক্যাশ হিটের ক্ষেত্রে ট্রান্সফার সাইজ ০ বাইটে সীমাবদ্ধ করার মাধ্যমে ক্যাশ করা নেটওয়ার্ক অনুরোধের জন্য TraceTree ট্রান্সফার সাইজের স্ফীতি রোধ করা হয়েছে।
• পারফরম্যান্স : ঐচ্ছিক Chrome UX রিপোর্ট (CrUX) deviceScope ফিল্ড ডেটা সমর্থন করার জন্য পারফরম্যান্স ফরম্যাটারগুলো আপডেট করা হয়েছে।
• পারফরম্যান্স : দীর্ঘ ফাইল URL-এ এলিপসিস কেটে যাওয়া রোধ করতে কল ট্রি টেবিলগুলিতে হরাইজন্টাল স্ক্রলিং চালু করা হয়েছে।
• পারফরম্যান্স : একাধিক ট্রেস ফাইল জুড়ে ইনসাইটস সাইডবারের ত্রুটিপূর্ণ রি-রেন্ডারিং এবং DOM স্টেট করাপশনের সমস্যা সমাধান করা হয়েছে।
• পারফরম্যান্স : টাইমলাইন ইনভ্যালিডেশন ট্র্যাকিং এবং ডিবাগ মোড সেটিংস পরীক্ষামূলক ফ্ল্যাগ থেকে স্ট্যান্ডার্ড ডেভটুলস সেটিংসে স্থানান্তরিত করা হয়েছে।
• নেটওয়ার্ক : 'Has overrides ' কলামটি পুনরুদ্ধার করতে ভুল কলাম পুনঃনামকরণ বাতিল করা হয়েছে এবং হেডার ও কন্টেন্ট ওভাররাইডের জন্য সর্টিং লজিক ঠিক করা হয়েছে।
• নেটওয়ার্ক : সার্ভার-টাইমিং ওয়াটারফল বারগুলিতে CSS attr() স্টাইলিং ঠিক করা হয়েছে, যাতে প্রতি-সারি অনুযায়ী তৈরি হওয়া রঙগুলো সঠিকভাবে রেন্ডার হয়।
• নেটওয়ার্ক : নামহীন কুকির জন্য cURL কমান্ড জেনারেশন হিসেবে ফিক্সড কপি ।
• অ্যাপ্লিকেশন : নতুন StorageAgent পরিকাঠামো ব্যবহার করে অ্যাপ্লিকেশন প্যানেলে স্থানীয় এবং সেশন স্টোরেজ আইটেমগুলো সংযুক্ত করা হয়েছে।
• প্রয়োগ : স্পেকুলেটিভ লোডের স্ট্যাটাসের অগ্রাধিকার স্থির করা হয়েছে, যাতে যে URL-গুলো প্রিফেচ এবং প্রিরেন্ডার উভয় ক্ষেত্রেই সফল হয়, সেগুলো সঠিকভাবে "প্রিরেন্ডারড" হিসেবে প্রদর্শিত হয়।
• প্রয়োগ : হিপ স্ন্যাপশট ভিউয়ের কলাম জুড়ে বাইট-সঠিক মানের টুলটিপ প্রদর্শন করা।
• সমস্যা : যখনই ব্যাক নেভিগেশন বিজ্ঞাপনের এন্ট্রিগুলো এড়িয়ে যেত, তখন BackUINavigationWouldSkipAd নামক সমস্যাটি দেখা দিত।
• সমস্যাসমূহ : ইমেল যাচাইকরণ অনুরোধ সংক্রান্ত সমস্যা ( EmailVerificationRequestIssue ) চিহ্নিত করার সুবিধা যোগ করা হয়েছে।
• লাইটহাউস : লাইটহাউস কনফিগারেশন প্যানেলে একটি ‘এজেন্টিক ব্রাউজিং’ ক্যাটাগরি চেকবক্স যোগ করা হয়েছে (যা ডিফল্টরূপে নিষ্ক্রিয় থাকে) এবং এর সাথে থাকা লাইটহাউস ইঞ্জিনটি v13.3.0-তে আপডেট করা হয়েছে।

ক্রোমিয়াম সমস্যা: 518021339 , 40908621 , 517519019 , 487755345 , 505284391 , 465915378 , 512908993 , 40543651

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

ক্রোম ১৫০ ডেভটুলস জুড়ে স্ক্রিন রিডার ঘোষণা, উইজেট কাঠামো এবং ARIA শব্দার্থবিদ্যায় বেশ কিছু উন্নতি এনেছে:

• স্টাইলস ট্যাবের মধ্যে ট্যাব নির্বাচন করার সময় এবং বিভিন্ন বিভাগে নেভিগেট করার সময় স্ক্রিন রিডারের ঘোষণা উন্নত করা হয়েছে।
• ডায়ালগ বন্ধ করার আইকনগুলিতে বর্ণনামূলক টুলটিপ যোগ করা হয়েছে এবং টুলটিপগুলিতে ARIA বিবরণ ও বর্ণনা অ্যাট্রিবিউট ব্যবহারের সুযোগ দেওয়া হয়েছে।
• সহায়ক প্রযুক্তির জন্য নেভিগেশন উন্নত করতে কনটেক্সট মেনুর আইটেমগুলিতে কঠোর ARIA menuitem রোল প্রয়োগ করা হয়েছে।

ক্রোমিয়াম সমস্যা: 510013788