Chrome 144-এ, টিম Chrome DevTools MCP সার্ভারে একটি অত্যন্ত প্রত্যাশিত বৈশিষ্ট্য, নতুন অনুরোধ শর্ত প্যানেল এবং ডিবাগিং ফন্ট এবং গৃহীত স্টাইলশিটের জন্য উন্নতি এনেছে।
২০২৫ সাল জুড়ে আমাদের পাঠানো উল্লেখযোগ্য বৈশিষ্ট্যগুলির তালিকা এখানেই শেষ। আপনি কি দেখতে চান যে আপনি এর কোনটি মিস করেছেন কিনা? তারপর নিম্নলিখিত হাইলাইটগুলি দেখুন অথবা DevTools-এ নতুন কী আছে তার আমাদের পূর্ববর্তী সংস্করণগুলি ব্রাউজ করুন।
DevTools MCP সার্ভার আপডেট
আমরা DevTools MCP সার্ভারের জন্য বিভিন্ন সমাধান এনেছি এবং v0.12.1 প্রকাশ করেছি। এই সংস্করণে একটি নতুন গুরুত্বপূর্ণ বৈশিষ্ট্য, অটো কানেকশন, যা আপনাকে একটি বিদ্যমান ব্রাউজার সেশন পুনরায় ব্যবহার করতে সক্ষম করে। অটো কানেকশনের মাধ্যমে, আপনি Chrome এ নিজেকে ডিবাগ করা শুরু করতে পারেন, এবং তারপর DevTools MCP কে একই Chrome ইনস্ট্যান্সে নির্দেশ করতে পারেন যেখানে আপনি শেষ করেছিলেন।
DevTools MCP-এর জন্য স্বয়ংক্রিয় সংযোগ সম্পর্কে আরও জানুন সম্পর্কিত ব্লগ পোস্টে । পরিবর্তন এবং বাগ সংশোধনের সম্পূর্ণ তালিকার জন্য GitHub-এর পাবলিক চেঞ্জলগ দেখুন।
ব্যক্তিগত নেটওয়ার্ক অনুরোধ থ্রটলিং
নেটওয়ার্ক রিকোয়েস্ট ব্লকিং প্যানেলের নাম পরিবর্তন করে রিকোয়েস্ট কন্ডিশন রাখা হয়েছে। রিকোয়েস্ট ব্লক করার পাশাপাশি, এই প্যানেলটি এখন আপনাকে পৃথক রিকোয়েস্ট থ্রোটল করতে দেয়।
⋮ > More Tools > Request Conditions থেকে প্যানেলটি খুলুন। অনুরোধ ব্লকিং সক্ষম করতে ব্লকিং এবং থ্রোটলিং সক্ষম করুন চেকবক্সটি টগল করুন। একটি নতুন টেক্সট প্যাটার্ন যোগ করতে + বোতামে ক্লিক করুন। সমস্ত নিয়ম বাতিল করতে আইকনে ক্লিক করুন।
আপডেট করা ডক্সে পৃথক নেটওয়ার্ক অনুরোধগুলি কীভাবে থ্রোটল করবেন তা শিখুন।
@font-face এবং @font-feature-values নিয়ম সম্পাদনা করুন
@font-face এবং @font-feature-values এখন স্টাইল প্যানেলে দেখানো হচ্ছে এবং সেখান থেকে সম্পাদনা করা যাবে।
এলিমেন্টস প্যানেলে গৃহীত স্টাইলশিটগুলি
এলিমেন্টস প্যানেল এখন গৃহীত স্টাইলশিটগুলিকে ছায়া রুট এবং ডকুমেন্ট রুটের অধীনে দেখায়। এটি তৈরি স্টাইলশিটগুলির সাথে কাজ করা ব্যক্তিদের জন্য তাদের উপাদানগুলিকে প্রভাবিত করে এমন স্টাইলশিটগুলি খুঁজে বের করা এবং স্টাইলগুলি ডিবাগ করা সহজ করে তোলে, বিশেষ করে যখন সেগুলি অপ্রত্যাশিতভাবে প্রয়োগ করা হয় না।
DevTools 2025-এ নতুন কী ছিল
এআই উদ্ভাবন
কনসোল ইনসাইট দিয়ে শুরু করে, AI উদ্ভাবনগুলি এখন Chrome DevTools-এর একটি অবিচ্ছেদ্য অংশ হয়ে উঠেছে, যেখানে AI সহায়তা প্যানেল হল প্রসঙ্গ-সচেতন AI-সহায়তাযুক্ত ডিবাগিংয়ের প্রধান কেন্দ্র। কনসোল এবং সোর্স প্যানেলে কোড পরামর্শ এবং আপনার পারফরম্যান্স ট্রেসে জেমিনি থেকে স্বয়ংক্রিয় অ্যানোটেশন সহ, DevTools আপনার কর্মপ্রবাহকে সুবিন্যস্ত করার জন্য AI-চালিত সরঞ্জামগুলির একটি বিস্তৃত সেট অফার করে।
- এন্ড-টু-এন্ড স্টাইলিং ফিক্স: জেমিনিকে CSS সমস্যাগুলি ঠিক করতে বলুন এবং ওয়ার্কস্পেসের সাথে মিলিত হয়ে, সেই পরিবর্তনগুলি সরাসরি ডিস্কে আপনার সোর্স ফাইলগুলিতে সংরক্ষণ করুন।
- পারফরম্যান্স সম্পর্কে জিজ্ঞাসা করুন: আপনি এখন AI সহায়তায় একটি সম্পূর্ণ পারফরম্যান্স ট্রেস নিয়ে আলোচনা করতে পারেন, অথবা যেকোনো পারফরম্যান্স অন্তর্দৃষ্টিতে গভীরভাবে ডুব দিতে পারেন, অথবা ট্রেসটি টীকা করতে জেমিনি ব্যবহার করতে পারেন।
- ভিজ্যুয়াল ডিবাগিং: এআই সহায়তা প্যানেলটি মাল্টিমোডাল হয়ে উঠেছে, যা আপনাকে ছবি আপলোড করতে বা স্ক্রিনশট নিতে দেয় যাতে জেমিনি ভিজ্যুয়াল গ্লিচগুলি বুঝতে এবং ডিবাগ করতে সাহায্য করতে পারে।
কর্মক্ষমতা
আমরা পারফরম্যান্স প্যানেলটি পুনরায় ডিজাইন করেছি যাতে পারফরম্যান্স ডিবাগিং কম ভারী এবং আরও কার্যকর হয়। উদাহরণস্বরূপ, একটি রেকর্ড করা ট্রেস এখন কিউরেটেড ইনসাইট সহ আসে যা আপনাকে দ্রুত বাধা সনাক্ত করতে এবং ট্রেসগুলি দ্রুত নেভিগেট করতে সহায়তা করে। অন্যান্য উন্নতিগুলির মধ্যে রয়েছে:
- কার্যকর অন্তর্দৃষ্টি: আমরা পারফরম্যান্স অন্তর্দৃষ্টির একটি শক্তিশালী সেট চালু করেছি, যা পর্যায়ক্রমে LCP , লেআউট শিফট অপরাধী এবং ডকুমেন্ট অনুরোধের বিলম্বের মতো নির্দিষ্ট সমস্যাগুলি চিহ্নিত করে।
- বাস্তব-বিশ্বের প্রেক্ষাপট: আমরা ফিল্ড ডেটা এবং CrUX ডেটা সরাসরি পারফরম্যান্স প্যানেলে একীভূত করেছি, যা আপনাকে বাস্তব ব্যবহারকারীর অভিজ্ঞতার বিপরীতে ল্যাবের ফলাফল যাচাই করার সুযোগ দেয়।
- ফ্রেমওয়ার্ক কনটেক্সট: Angular v20 এবং React v19.2 এখন Extensibility API ব্যবহার করছে। আপনার কম্পোনেন্ট ট্রি সরাসরি দেখার মাধ্যমে মূল থ্রেডের বাধাগুলি বোঝা সহজ হয়ে যায়। Angular এবং React টিমের সাথে আমাদের অংশীদারিত্বের জন্য ধন্যবাদ!
- উন্নত সহযোগিতা: ট্রেসগুলি টীকা করার ক্ষমতা এবং রিসোর্স কন্টেন্ট এবং সোর্স ম্যাপ রপ্তানি করার বিকল্পগুলির সাথে ট্রেসগুলি ভাগ করা সহজ হয়ে উঠেছে, যাতে একজন সহকর্মী বা আপনার ভবিষ্যতের স্বয়ং তাদের প্রয়োজনীয় সমস্ত প্রসঙ্গ পেতে পারে তা নিশ্চিত করে।
ওয়েব প্ল্যাটফর্ম
DevTools ক্রমবর্ধমান ওয়েব প্ল্যাটফর্মের সাথে তাল মিলিয়ে চলে, সর্বশেষ CSS স্পেসিফিকেশনের জন্য ডেডিকেটেড টুলিং যোগ করে এবং প্রতিষ্ঠিত বৈশিষ্ট্যগুলির জন্য ডেভেলপার অভিজ্ঞতা উন্নত করে।
আমরা জটিল CSS ভেরিয়েবল চেইনের জন্য গভীর ট্রেসিং, প্রপার্টি টুলটিপসে বেসলাইন উপলব্ধতা যোগ করেছি, এবং সম্প্রতি @starting-style নিয়ম ব্যবহার করে জটিল এন্ট্রি অ্যানিমেশনের জন্য ডিবাগিং সমর্থন এবং নতুন display: masonry লেআউট।
প্রিভিউ চ্যানেলগুলি ডাউনলোড করুন
আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসেবে Chrome Canary , Dev , অথবা Beta ব্যবহার করার কথা বিবেচনা করুন। এই প্রিভিউ চ্যানেলগুলি আপনাকে সর্বশেষ DevTools বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, আপনাকে অত্যাধুনিক ওয়েব প্ল্যাটফর্ম API পরীক্ষা করতে দেয় এবং আপনার ব্যবহারকারীদের আগে আপনার সাইটে সমস্যাগুলি খুঁজে পেতে সহায়তা করে!
Chrome DevTools টিমের সাথে যোগাযোগ করুন
DevTools সম্পর্কিত নতুন বৈশিষ্ট্য, আপডেট বা অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন।
- crbug.com এ আমাদের কাছে প্রতিক্রিয়া এবং বৈশিষ্ট্য অনুরোধ জমা দিন।
- ব্যবহার করে DevTools সমস্যা রিপোর্ট করুন। আরও বিকল্প > সাহায্য > DevTools-এ DevTools সমস্যা রিপোর্ট করুন ।
- @ChromeDevTools- এ টুইট করুন।
- DevTools YouTube ভিডিওতে নতুন কী আছে বা DevTools Tips YouTube ভিডিওগুলিতে মন্তব্য করুন।