প্রকাশিত: ১১ ডিসেম্বর, ২০২৫
আমরা Chrome DevTools MCP সার্ভারে একটি উন্নত বৈশিষ্ট্য প্রেরণ করেছি যা আমাদের অনেক ব্যবহারকারীর অনুরোধ ছিল: কোডিং এজেন্টদের একটি সক্রিয় ব্রাউজার সেশনের সাথে সরাসরি সংযোগ করার ক্ষমতা।
এই বর্ধিতকরণের মাধ্যমে, কোডিং এজেন্টরা সক্ষম হবেন:
- একটি বিদ্যমান ব্রাউজার সেশন পুনরায় ব্যবহার করুন: কল্পনা করুন যে আপনি চান আপনার কোডিং এজেন্ট সাইন-ইনের পিছনে থাকা কোনও সমস্যার সমাধান করুক। আপনার কোডিং এজেন্ট এখন সরাসরি আপনার বর্তমান ব্রাউজিং সেশন অ্যাক্সেস করতে পারবে, অতিরিক্ত সাইন-ইনের প্রয়োজন হবে না।
- সক্রিয় ডিবাগিং সেশন অ্যাক্সেস করুন: কোডিং এজেন্টরা এখন DevTools UI-তে একটি সক্রিয় ডিবাগিং সেশন অ্যাক্সেস করতে পারে। উদাহরণস্বরূপ, যখন আপনি Chrome DevTools নেটওয়ার্ক প্যানেলে একটি ব্যর্থ নেটওয়ার্ক অনুরোধ আবিষ্কার করেন, তখন অনুরোধটি নির্বাচন করুন এবং আপনার কোডিং এজেন্টকে এটি তদন্ত করতে বলুন। এলিমেন্টস প্যানেলে নির্বাচিত উপাদানগুলির ক্ষেত্রেও একই কাজ করে। ম্যানুয়াল এবং AI-সহায়তাযুক্ত ডিবাগিংয়ের মধ্যে নির্বিঘ্নে রূপান্তরের এই নতুন ক্ষমতা নিয়ে আমরা উত্তেজিত।
এটিকে বাস্তবে দেখুন:
Chrome DevTools MCP-এর Chrome ইনস্ট্যান্সের সাথে সংযোগ স্থাপনের বিদ্যমান পদ্ধতিগুলির সাথে স্বয়ংক্রিয় সংযোগ বৈশিষ্ট্যটি একটি সংযোজন। মনে রাখবেন যে আপনি এখনও এটি করতে পারেন:
- একটি Chrome DevTools MCP সার্ভার-নির্দিষ্ট ব্যবহারকারী প্রোফাইল (বর্তমান ডিফল্ট) দিয়ে Chrome চালান।
- একটি রিমোট ডিবাগ পোর্ট ব্যবহার করে একটি চলমান Chrome ইনস্ট্যান্সের সাথে সংযোগ করুন।
- একাধিক Chrome ইনস্ট্যান্স আলাদাভাবে চালান, প্রতিটি ইনস্ট্যান্স একটি অস্থায়ী প্রোফাইলে চলমান।
কিভাবে এটা কাজ করে
আমরা Chrome M145 (বর্তমানে Canary-তে) একটি নতুন বৈশিষ্ট্য যুক্ত করেছি যা Chrome DevTools MCP সার্ভারকে একটি দূরবর্তী ডিবাগিং সংযোগের অনুরোধ করতে দেয়। এই নতুন প্রবাহটি Chrome-এর বিদ্যমান দূরবর্তী ডিবাগিং ক্ষমতার উপরে তৈরি হয়। ডিফল্টরূপে, Chrome-এ দূরবর্তী ডিবাগিং সংযোগগুলি অক্ষম থাকে। ডেভেলপারদের প্রথমে chrome://inspect#remote-debugging এ গিয়ে বৈশিষ্ট্যটি স্পষ্টভাবে সক্ষম করতে হবে।
যখন Chrome DevTools MCP সার্ভারটি --autoConnect বিকল্পের সাথে কনফিগার করা হয়, তখন MCP সার্ভারটি একটি সক্রিয় Chrome ইনস্ট্যান্সের সাথে সংযোগ স্থাপন করবে এবং একটি রিমোট ডিবাগিং সেশনের অনুরোধ করবে। ক্ষতিকারক ব্যক্তিদের দ্বারা অপব্যবহার এড়াতে, প্রতিবার যখন Chrome DevTools MCP সার্ভার একটি রিমোট ডিবাগিং সেশনের অনুরোধ করবে, তখন Chrome ব্যবহারকারীকে একটি ডায়ালগ দেখাবে এবং রিমোট ডিবাগিং সেশনের অনুমতি দেওয়ার জন্য তাদের অনুমতি চাইবে। এছাড়াও, যখন একটি ডিবাগিং সেশন সক্রিয় থাকে, তখন Chrome উপরে "Chrome is being controlled by automated test software" ব্যানারটি প্রদর্শন করে।
শুরু করুন
নতুন রিমোট ডিবাগিং ক্ষমতা ব্যবহার করতে। আপনাকে প্রথমে Chrome-এ রিমোট ডিবাগিং সক্ষম করতে হবে এবং তারপর নতুন অটো সংযোগ বৈশিষ্ট্যটি ব্যবহার করার জন্য Chrome DevTools MCP সার্ভারটি কনফিগার করতে হবে।
ধাপ ১: Chrome-এ রিমোট ডিবাগিং সেট আপ করুন
Chrome-এ, রিমোট ডিবাগিং সেট আপ করতে নিম্নলিখিতগুলি করুন:
- রিমোট ডিবাগিং সক্ষম করতে
chrome://inspect/#remote-debuggingএ নেভিগেট করুন। - ইনকামিং ডিবাগিং সংযোগগুলিকে অনুমতি দিতে বা বাতিল করতে ডায়ালগ UI অনুসরণ করুন।
ধাপ ২: একটি চলমান Chrome ইন্সট্যান্সের সাথে স্বয়ংক্রিয়ভাবে সংযোগ স্থাপনের জন্য Chrome DevTools MCP সার্ভার কনফিগার করুন
chrome-devtools-mcp সার্ভারটিকে চলমান Chrome ইনস্ট্যান্সের সাথে সংযুক্ত করতে, MCP সার্ভার সেটের জন্য --autoConnect কমান্ড লাইন আর্গুমেন্ট ব্যবহার করুন।
নিম্নলিখিত কোড স্নিপেটটি জেমিনি-ক্লির জন্য একটি উদাহরণ কনফিগারেশন:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--autoConnect",
"--channel=canary"
]
}
}
}
ধাপ ৩: আপনার সেটআপ পরীক্ষা করুন
এখন gemini-cli খুলুন এবং নিম্নলিখিত প্রম্পটটি চালান:
Check the performance of https://developers.chrome.com
Chrome DevTools MCP সার্ভারটি আপনার চলমান Chrome ইনস্ট্যান্সের সাথে সংযোগ স্থাপনের চেষ্টা করবে। এটি ব্যবহারকারীর অনুমতি চাওয়ার জন্য একটি ডায়ালগ দেখায়:
Allow এ ক্লিক করলে Chrome DevTools MCP সার্ভার developers.chrome.com খুলবে এবং একটি পারফরম্যান্স ট্রেস নেবে।
সম্পূর্ণ নির্দেশাবলীর জন্য, GitHub-এ README দেখুন।
আপনার কোডিং এজেন্টকে আপনার ডিবাগিং সেশনের দায়িত্ব নিতে দিন
একটি লাইভ Chrome ইনস্ট্যান্সের সাথে সংযোগ স্থাপন করতে সক্ষম হওয়ার অর্থ হল আপনাকে অটোমেশন এবং ম্যানুয়াল নিয়ন্ত্রণের মধ্যে একটি বেছে নিতে হবে না। আপনি নিজে DevTools ব্যবহার করতে পারেন অথবা আপনার কোডিং এজেন্টের কাছে একটি ডিবাগিং টাস্ক হস্তান্তর করতে পারেন। যদি আপনি আপনার ওয়েবসাইটে কোনও সমস্যা খুঁজে পান, তাহলে আপনি DevTools খুলে সমস্যাটির কারণ চিহ্নিত করতে পারেন। আপনি যদি চান যে আপনার কোডিং এজেন্ট সমস্যাটি সমাধান করুক, তাহলে আপনি এখন Chrome DevTools MCP সার্ভারের মাধ্যমে এটি করতে পারেন। আপনি Elements প্যানেলে উপাদানটি নির্বাচন করতে পারেন এবং কোডিং এজেন্টকে সমস্যাটি তদন্ত করতে বলতে পারেন।
নেটওয়ার্ক প্যানেলের ক্ষেত্রেও একই কথা প্রযোজ্য। আপনি একটি নেটওয়ার্ক অনুরোধ নির্বাচন করতে পারেন এবং আপনার কোডিং এজেন্টকে এটি তদন্ত করতে বলতে পারেন।
কিন্তু এটি কেবল একটি প্রথম পদক্ষেপ। আমরা ক্রোম ডেভটুলস এমসিপি সার্ভারের মাধ্যমে কোডিং এজেন্টদের কাছে ক্রমবর্ধমানভাবে আরও বেশি প্যানেল ডেটা প্রকাশ করার পরিকল্পনা করছি। সাথে থাকুন!