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

Matthias Rohmer

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

ক্রোম ১৪৯ এআই অ্যাসিস্ট্যান্সে বড় ধরনের আপগ্রেড এনেছে, অ্যাপ্লিকেশন প্যানেলে পরীক্ষামূলক WebMCP ডিবাগিং টুল যুক্ত করেছে এবং CSS পর্যন্ত কোড কমপ্লিশন সাপোর্ট প্রসারিত করেছে।

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

এজেন্টদের জন্য Chrome DevTools-এর MCP সার্ভার এবং CLI এখন আনুষ্ঠানিকভাবে স্থিতিশীল! সম্পূর্ণ ঘোষণাটি এখানে পড়ুন।

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

• কাস্টম থার্ড-পার্টি, পেজ-এক্সপোজড টুলস: পেজগুলো এখন জাভাস্ক্রিপ্টের মাধ্যমে কাস্টম ডিবাগিং টুলস সংজ্ঞায়িত করতে পারে, যা এজেন্টদের জন্য ডেভটুলস দ্বারা আবিষ্কারযোগ্য এবং কলযোগ্য।
• WebMCP ডিবাগিং: এজেন্টদের জন্য DevTools এখন WebMCP টুলগুলোর তালিকা তৈরি করতে এবং সেগুলো চালাতে পারে।
• কাস্টম HTTP হেডার এমুলেশন: এমুলেশন টুলে HTTP হেডারের (যেমন অথ টোকেন বা কাস্টম ইউজার-এজেন্ট) জন্য সমর্থন যোগ করে।

থার্ড-পার্টি টুল এবং WebMCP ডিবাগিং এখনও পরীক্ষামূলক পর্যায়ে রয়েছে এবং ডিফল্টরূপে চালু করা হয়নি। এগুলি কীভাবে ব্যবহার করতে হয়, সে সম্পর্কে তথ্যের জন্য টুল রেফারেন্স দেখুন। এই ফিচারগুলি প্রোডাকশন ব্যবহারের জন্য প্রস্তুত হয়ে গেলে আমরা developer.chrome.com-এ আরও ডকুমেন্টেশন প্রদান করব।

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

এআই সহায়তা

এআই সহায়তা প্যানেলটিতে একটি উল্লেখযোগ্য ইউজার ইন্টারফেস আপডেট এবং নতুন টুলস যুক্ত করা হয়েছে, যা কথোপকথনের অভিজ্ঞতা উন্নত করবে এবং পেজ সম্পর্কে আরও গভীর অন্তর্দৃষ্টি প্রদান করবে:

• এজেন্ট ওয়াকথ্রু: এআই অ্যাসিস্ট্যান্স এখন সাধারণ টেক্সট মার্কডাউনের পরিবর্তে সরাসরি চ্যাট ইন্টারফেসের মধ্যেই উইজেট প্রদর্শন করে। এই উইজেটগুলোতে কোর ওয়েব ভাইটালস ও সংশ্লিষ্ট ইনসাইটস, এলসিপি এলিমেন্টস, এলসিপি ব্রেকডাউন, বটম-আপ থ্রেড অ্যাক্টিভিটি এবং আরও অনেক কিছু অন্তর্ভুক্ত রয়েছে। উইজেটের ভেতরে থাকা একটি ‘রিভিল’ লিঙ্ক আপনাকে ডেভটুলস-এর মধ্যে এই তথ্যের উৎসে নিয়ে যাবে।
• কোডিং এজেন্টে কপি করুন : এখন কথোপকথনের শেষে একটি নির্দিষ্ট বাটন থাকে, যার মাধ্যমে আপনি কথোপকথনটি কপি করতে পারবেন। এই কপি করা যাবে প্রম্পট হিসেবে সংক্ষিপ্ত আকারে অথবা হুবহু কথোপকথনটি, যা আপনি আপনার পছন্দের কোডিং এজেন্টে পেস্ট করতে পারবেন।
• উন্নত সক্ষমতা : এআই সহায়তা এখন লাইটহাউস এবং সংশ্লিষ্ট তথ্যাবলীতে প্রবেশাধিকার পায়, যার ফলে এটি আপনার পৃষ্ঠাটিকে সামগ্রিকভাবে বিশ্লেষণ করে সুনির্দিষ্ট পরামর্শ দিতে পারে।
• উন্নত প্রতিক্রিয়া : অভ্যন্তরীণভাবে জেমিনি ৩ এবং পরিমার্জিত ভূমিকা ব্যবহারের ফলে, এআই সহায়তা আরও সংক্ষিপ্ত এবং কার্যকর উত্তর প্রদান করে।
• উন্নত নেভিগেশন: এখন আপনি আপ অ্যারো এবং ডাউন অ্যারো কী ব্যবহার করে আপনার পূর্ববর্তী চ্যাট প্রম্পটগুলোর মধ্যে নেভিগেট করতে পারবেন, যার ফলে আগের প্রশ্নগুলো পরিমার্জন বা পুনরায় চালানো দ্রুত এবং সহজবোধ্য হয়।

নির্দিষ্ট ফিডব্যাক বাগে মন্তব্য করে আপনার মতামত জানান। ‘কপি টু কোডিং এজেন্ট’-এর সুবিধার জন্য, ক্রোম ১৫২-এর সাথে আমরা এআই অ্যাসিস্ট্যান্সের মাধ্যমে স্বয়ংক্রিয় স্টাইলিং ফিক্সের সাপোর্ট বাতিল করব।

ওয়েবএমসিপি

এই রিলিজে অ্যাপ্লিকেশন প্যানেল সাইডবারের মধ্যে পরীক্ষামূলক WebMCP ডিবাগিং টুল চালু করা হয়েছে। WebMCP (Web Model Context Protocol) ওয়েব পেজগুলোকে পরিদর্শক LLM এজেন্টদের ব্যবহারের জন্য টুল রেজিস্টার করার সুযোগ দেয়। আমাদের ডকুমেন্টেশনে এই প্রস্তাবিত স্ট্যান্ডার্ড সম্পর্কে আরও জানুন।

নতুন ডিবাগিং টুলগুলো ডেভেলপারদেরকে নিম্নলিখিত কাজগুলো করতে দেয়:

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

WebMCP হলো একটি প্রস্তাবিত ওয়েব স্ট্যান্ডার্ড যা প্রাথমিক প্রিভিউ পর্যায়ে রয়েছে। পরীক্ষা-নিরীক্ষা শুরু করতে chrome://flags-এ #devtools-webmcp-support এবং #enable-webmcp-testing ফ্ল্যাগগুলো সক্রিয় করুন।

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

CSS এর জন্য কোড সম্পূর্ণকরণ

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

এটি আপনাকে CSS প্রোপার্টিগুলোর সঠিক সিনট্যাক্স মনে না রেখেই গ্রেডিয়েন্ট বা বক্স শ্যাডোর মতো আরও জটিল সংমিশ্রণ নিয়ে কাজ করতে সাহায্য করে। অথবা একাধিক সম্পর্কিত প্রোপার্টির ওপর নির্ভর করে দ্রুত গ্রিড এবং ফ্লেক্স লেআউট তৈরি করতে সহায়তা করে।

স্টাইলস ট্যাবের নিচের টুলবারটি একটি লোডিং স্পিনারের মাধ্যমে স্ট্যাটাস প্রদর্শন করে। আপনি টাইপ করার সাথে সাথে সাজেশনগুলো আপডেট বা ক্লিয়ার হয়, যা নিশ্চিত করে যে এআই-জেনারেটেড টেক্সট আপনার ম্যানুয়াল এডিটের সাথে প্রাসঙ্গিক থাকে।

APCA রঙের বৈসাদৃশ্য নির্দেশিকা স্থিতিশীল পর্যায়ে উন্নীত হয়েছে

অ্যাডভান্সড পারসেপচুয়াল কনট্রাস্ট অ্যালগরিদম (APCA) কনট্রাস্ট ক্যালকুলেটরটি আনুষ্ঠানিকভাবে তার পরীক্ষামূলক পর্যায় থেকে বেরিয়ে এসেছে এবং এখন একটি স্ট্যান্ডার্ড প্রেফারেন্স সেটিং হিসেবে উপলব্ধ। APCA পুরোনো AAA/AA কনট্রাস্ট নির্দেশিকাগুলোকে একটি আধুনিক পারসেপচুয়াল কনট্রাস্ট মডেল দিয়ে প্রতিস্থাপন করে, যা আধুনিক ডিসপ্লে এবং টেক্সট রেন্ডারিংয়ের জন্য অপ্টিমাইজ করা হয়েছে।

এখন আপনি সেটিংস > পছন্দসমূহ > উপাদানসমূহ > এপিসিএ কনট্রাস্ট গাইডলাইন সক্ষম করুন -এর অধীনে অবস্থিত চেকবক্সটি ব্যবহার করে এপিসিএ গাইডলাইন চালু বা বন্ধ করতে পারেন।

ডাইনামিক ডিভাইস মোড ব্যবহারকারী এজেন্ট

রেসপন্সিভ ডিভাইস মোড পূর্বে একটি হার্ডকোডেড ইউজার এজেন্ট স্ট্রিং (অ্যান্ড্রয়েড ৬.০; নেক্সাস ৫) ব্যবহার করত। এর ফলে আধুনিক ওয়েবসাইটগুলোর কার্যকারিতা হ্রাস পেত অথবা কম্প্যাটিবিলিটি মোড চালু হয়ে যেত, কারণ রিপোর্ট করা ওএসটিকে এক দশকেরও বেশি পুরোনো হিসেবে শনাক্ত করা হতো।

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

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

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

• কনসোল : কনসোল প্যানেল টুলবারে একটি 'সব সংকুচিত করুন / সব প্রসারিত করুন' টগল বাটন যোগ করা হয়েছে, যার মাধ্যমে একসাথে সমস্ত সক্রিয় কনসোল গ্রুপ এবং স্ট্যাক ট্রেস দ্রুত প্রসারিত বা সংকুচিত করা যাবে। ( 427657550 )
• অ্যাপ্লিকেশন : অ্যাপ্লিকেশন মেটাডেটা ভিউতে স্টোরেজ বাকেট ফিল্ডগুলির জন্য স্থির টেক্সটের পরিবর্তে ক্লিকযোগ্য হাইপারলিঙ্ক ব্যবহার করা হয়েছে। একটি বাকেট লিঙ্কে ক্লিক করলে স্বয়ংক্রিয়ভাবে স্টোরেজ বাকেটস সাইডবার প্যানেলে সেই নির্দিষ্ট বাকেটটিতে চলে যায় এবং সেটি হাইলাইট হয়। ( 435311130 )
• অ্যাপ্লিকেশন : একটি ক্র্যাশ রিগ্রেশন সমাধান করার পর সার্ভিস ওয়ার্কারদের জন্য সম্পূর্ণ স্টোরেজ পরিদর্শন সমর্থন পুনরায় সক্রিয় করা হয়েছে। ( 406991275 , 466134219 )
• অ্যাপ্লিকেশন : প্রি-লোডিং প্যানেলের মধ্যে form_submission প্রি-রেন্ডারিং ইভেন্টগুলো পরিদর্শন করার জন্য সমর্থন যোগ করা হয়েছে। ( 346555939 , 488078903 )
• অ্যাপ্লিকেশন : ডিভাইস-বাউন্ড সেশন ক্রেডেনশিয়ালস (DBSC) ম্যানেজমেন্ট বাস্তবায়ন করা হয়েছে, যা ডেভেলপারদের কনটেক্সট মেনু থেকে অথবা Delete বা Backspace কী চেপে সক্রিয় সেশনগুলি ক্লিয়ার বা ডিলিট করার সুযোগ দেয়। ( 471017387 )
• উপাদানসমূহ : ইস্যু প্যানেলে লুকানো ইস্যুগুলির প্রতিনিধিত্বকারী DOM নোডগুলির হাইলাইটগুলি এখন ইস্যু ফিল্টার অ্যাকশনের প্রতিক্রিয়ায় গতিশীলভাবে আপডেট হয় (দেখা যায় বা অদৃশ্য হয়)। ( 40272723 )
• নেটওয়ার্ক : সার্ভার-প্রেরিত ইভেন্ট (SSE) এখন সম্পূর্ণরূপে সিরিয়ালাইজড এবং HAR এক্সপোর্টে অন্তর্ভুক্ত, যা চলমান, লাইভ ইভেন্ট স্ট্রিম ক্যাপচার সংরক্ষণ এবং DevTools-এ পুনরায় ইম্পোর্ট করার সুযোগ দেয়। ( 494294071 )
• পারফরম্যান্স : লাইভ মেট্রিক্স ভিউতে কোর ওয়েব ভাইটালস ট্র্যাকিং স্থির করা হয়েছে, যাতে ট্র্যাকিং কঠোরভাবে প্রাথমিক ফ্রেম এক্সিকিউশন কনটেক্সটে সীমাবদ্ধ থাকে এবং ডায়নামিক আইফ্রেম পরিবর্তনের কারণে মেট্রিক্স রিসেট হওয়া প্রতিরোধ করা যায়। ( 494350655 )
• পারফরম্যান্স : web-vitals v5.2.0-তে আপগ্রেড করা হয়েছে, যা INP মনিটরিং চলাকালীন মেমরি লিকের জন্য নেটিভ আপস্ট্রিম ফিক্স অন্তর্ভুক্ত করেছে। ( 484342204 )