এজেন্টদের জন্য ক্রোম ডেভটুলস দিয়ে শুরু করুন

Matthias Rohmer

José Luis Zapata

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

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

ওয়েব ডেভেলপমেন্টের প্রেক্ষাপটে, Chrome DevTools for agents আপনার AI এজেন্টের মধ্যে ডিবাগিং সক্ষমতা সংহত করে।

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

সেটআপ

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

আপনার কোডিং এজেন্ট (যেমন Gemini, Claude, Cursor, বা Copilot) থেকে একটি লাইভ Chrome ব্রাউজার নিয়ন্ত্রণ ও পরিদর্শন করতে chrome-devtools-mcp প্যাকেজটি ব্যবহার করুন। উল্লেখ্য যে, এজেন্টদের জন্য Chrome DevTools সম্পূর্ণ টুলস সেট প্রদান করলেও, এর CLI শুধুমাত্র শেল-ভিত্তিক অটোমেশনের জন্য একটি নির্দিষ্ট উপসেট সমর্থন করে।

সমর্থিত IDE এবং মডেল

এজেন্টদের জন্য ক্রোম ডেভটুলস এমন যেকোনো টুল বা IDE সমর্থন করে যা MCP প্রোটোকল সমর্থন করে। এর মধ্যে রয়েছে অ্যান্টিগ্র্যাভিটি, জেমিনি CLI, ক্লড কোড, কার্সর, কোপাইলট এবং আরও অনেক কিছু।

নিরাপত্তা সংক্রান্ত বিবেচনা

যেহেতু আপনার এজেন্ট অ্যাক্সেস করা পেজগুলো দেখতে ও সেগুলোর সাথে ইন্টারঅ্যাক্ট করতে পারবে, তাই আপনি যদি এটিকে একটি সক্রিয়, প্রমাণীকৃত সেশনসহ ব্রাউজারের সাথে সংযুক্ত করেন, তবে এটি কার্যকরভাবে আপনার হয়ে কাজ করতে পারে। এমন কোনো সংবেদনশীল বা ব্যক্তিগত তথ্য এজেন্টের সাথে শেয়ার করা থেকে বিরত থাকুন যা আপনি শেয়ার করতে চান না।

পূর্বশর্ত

এজেন্টদের জন্য Chrome DevTools ইনস্টল করার আগে, নিশ্চিত করুন যে আপনার পরিবেশ নিম্নলিখিত প্রয়োজনীয়তাগুলি পূরণ করে:

• নোড.জেএস (সর্বশেষ এলটিএস সংস্করণ) এবং এনপিএম
• ক্রোম (বর্তমান স্থিতিশীল সংস্করণ)

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

অ্যান্টিগ্র্যাভিটি

এজেন্টদের জন্য ক্রোম ডেভটুলস অ্যান্টিগ্র্যাভিটি ২.০-এর সাথে আগে থেকেই বান্ডেল করা থাকে। আপনি ব্রাউজার সাব-এজেন্ট ব্যবহার করে এটি অবিলম্বে ব্যবহার শুরু করতে পারেন। নিম্নলিখিতের মতো একটি স্ল্যাশ কমান্ড ব্যবহার করে দেখুন:

/browser Navigate to the Google homepage

বিশেষায়িত এজেন্ট স্কিলগুলো অ্যাক্সেস করার জন্য, আমরা প্রাথমিক সেটআপের 'Build with Google' ধাপে অথবা অ্যাপ্লিকেশন সেটিংসের মধ্যে DevTools প্লাগইনটি ইনস্টল করার পরামর্শ দিই। আরও তথ্যের জন্য, Antigravity Browser Subagent ডকুমেন্টেশন দেখুন।

CLI ব্যবহার করে ইনস্টল করুন

এজেন্টদের জন্য ক্রোম ডেভটুলস সেট আপ করতে, আপনি একটি JSON কনফিগারেশন ফাইল ব্যবহার করতে পারেন অথবা আপনার এজেন্ট সমর্থন করলে সরাসরি সার্ভারটি ইনস্টল করার জন্য একটি CLI কমান্ড ব্যবহার করতে পারেন। কিছু এজেন্ট অফিসিয়াল এক্সটেনশন বা প্লাগইনও অফার করে, যেগুলোতে এজেন্ট স্কিলস বা বিশেষজ্ঞ নির্দেশাবলী অন্তর্ভুক্ত থাকে, যা আপনার এজেন্টকে ডেভটুলসের ফিচারগুলো ব্যবহার করতে সাহায্য করে।

যদি আপনার এজেন্ট এখানে তালিকাভুক্ত না থাকে, তাহলে আপনি Chrome DevTools for Agents GitHub রিপোজিটরিতে এটি ইনস্টল করার পদ্ধতি খুঁজে নিতে পারেন।

কোনো কমান্ড-লাইন এজেন্টে Chrome DevTools for agents যোগ করতে, আপনার নির্দিষ্ট এজেন্টের জন্য বিল্ট-ইন CLI কমান্ডগুলো ব্যবহার করুন:

জেমিনি সিএলআই

নিম্নলিখিত কমান্ডটি ব্যবহার করে Gemini CLI এক্সটেনশনটি ইনস্টল করুন, যেটিতে MCP প্যাকেজ এবং এর সাথে থাকা স্কিলগুলো অন্তর্ভুক্ত রয়েছে:

# Gemini extension (MCP+Skills)
  gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

নিম্নলিখিত কমান্ড ব্যবহার করে শুধুমাত্র MCP প্যাকেজটি ইনস্টল করুন:

# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

ক্লদ কোড

Claude Code প্লাগইন হিসেবে এজেন্টদের জন্য Chrome DevTools ইনস্টল করতে, Claude Code-এ নিম্নলিখিত স্ল্যাশ কমান্ডগুলি ব্যবহার করুন। মার্কেটপ্লেস রেজিস্ট্রি যোগ করুন:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

এবং মার্কেটপ্লেস রেজিস্ট্রি থেকে প্লাগইনটি ইনস্টল করুন:

/plugin install chrome-devtools-mcp@chrome-devtools-plugins

আরও তথ্যের জন্য অফিসিয়াল ক্রোম ডেভটুলস ক্লড প্লাগইন পেজটি দেখুন।

কোডেক্স

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

JSON কনফিগারেশন ব্যবহার করে ইনস্টল করুন

যেসব এজেন্ট mcpServers কনফিগারেশন কী সমর্থন করে, তাদের জন্য এই এন্ট্রিটি ম্যানুয়ালি যোগ করুন এবং npm i chrome-devtools-mcp মাধ্যমে এজেন্টদের জন্য DevTools ইনস্টল করা নিশ্চিত করুন।

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

অন্যান্য এজেন্টদের মধ্যে ইনস্টল করুন

তালিকাভুক্ত নয় এমন কোনো এজেন্টের জন্য কনফিগার করতে, Chrome DevTools MCP GitHub রিপোজিটরিটি দেখুন।

আপনার সেটআপ পরীক্ষা করুন

সবকিছু ঠিকঠাক কাজ করছে কিনা তা পরীক্ষা করতে আপনার এজেন্টে নিম্নলিখিত প্রম্পটটি প্রবেশ করান:

Check the performance of https://developers.chrome.com

আপনার এজেন্ট একটি ব্রাউজার উইন্ডো খুলবে এবং একটি পারফরম্যান্স ট্রেস রেকর্ড করবে।

আপনার সেটআপের সমস্যা সমাধান করুন

যদি আপনার এজেন্ট টুলস চালাতে ব্যর্থ হয় এবং Chrome DevTools স্কিলস-এ তার অ্যাক্সেস থাকে, তবে এটি স্বয়ংক্রিয়ভাবে সমস্যাটি সমাধান করার চেষ্টা করতে পারে। যদি তা না করে, আপনি এজেন্টকে স্পষ্টভাবে নির্দেশ দিতে পারেন:

Use the Chrome DevTools troubleshooting skill to fix my setup.

অথবা আপনি আরও সুনির্দিষ্ট হতে পারেন:

I'm having trouble with Chrome DevTools for agents. I tried to run [Tool Name]
but got the error: [Error Message]. I am on [OS Name]. Use the Chrome DevTools
troubleshooting skill to fix my setup.

উন্নত কনফিগারেশন

এগুলো আরও কিছু উপায় যার মাধ্যমে আপনার এজেন্ট ব্রাউজার অ্যাক্সেস করতে পারে।

হেডলেস মোড কনফিগার করুন

যদি আপনি দৃশ্যমান ব্রাউজার উইন্ডো ছাড়া ব্যাকগ্রাউন্ড টাস্ক সম্পাদন করতে চান, তাহলে আপনি ক্রোমকে হেডলেস (কোনো UI ছাড়া) মোডে চালাতে পারেন। আপনার সার্ভার আর্গুমেন্টগুলিতে --headless ফ্ল্যাগটি যোগ করুন:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--headless"
      ]
    }
  }
}

বিদ্যমান ব্রাউজার সেশনে সংযোগ করুন

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

বিদ্যমান সেশনে সংযোগ করার দুটি উপায় আছে:

স্বয়ংক্রিয় সংযোগ ব্যবহার করুন (ক্রোম ১৪৪+)

যখন Chrome DevTools MCP সার্ভারটি --autoConnect অপশন দিয়ে কনফিগার করা হয়, তখন MCP সার্ভারটি একটি সক্রিয় Chrome ইনস্ট্যান্সের সাথে সংযোগ স্থাপন করে এবং একটি রিমোট ডিবাগিং সেশনের জন্য অনুরোধ করে।

1. আপনার চালু থাকা ক্রোম ব্রাউজারে, রিমোট ডিবাগিং চালু করতে chrome://inspect/#remote-debugging এ যান।

2. আপনার MCP কনফিগারেশন আপডেট করে --autoConnect ফ্ল্যাগটি অন্তর্ভুক্ত করুন:

   {
     "mcpServers": {
       "chrome-devtools": {
         "command": "npx",
         "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
       }
     }
   }
   

3. আপনার এজেন্টকে একটি নির্দেশ পাঠান। ক্রোম একটি ডায়ালগ বক্স দেখাবে, যেখানে রিমোট ডিবাগিং সেশনটি চালু করার জন্য ব্যবহারকারীর অনুমতি চাওয়া হবে। 'Allow' বোতামে ক্লিক করুন।

রিমোট ডিবাগিং পোর্ট ব্যবহার করে ম্যানুয়ালি সংযোগ করুন

যদি আপনি --autoConnect ব্যবহার করতে না পারেন (উদাহরণস্বরূপ, যদি আপনি আপনার এজেন্টকে একটি স্যান্ডবক্সড পরিবেশে চালান), তাহলে আপনি ম্যানুয়ালি একটি ডিবাগিং পোর্ট দিয়ে ক্রোম চালু করতে পারেন। এখানে একটি উদাহরণ দেওয়া হলো (macOS-এর জন্য):

1. রিমোট ডিবাগিং পোর্ট সক্রিয় করে ক্রোম ব্রাউজারটি চালু করুন। নিরাপত্তার কারণে, আপনাকে অবশ্যই একটি কাস্টম ইউজার ডেটা ডিরেক্টরিও নির্দিষ্ট করতে হবে।

   /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable
   

2. --browser-url প্যারামিটার ব্যবহার করে সংযোগ করার জন্য আপনার এজেন্টকে কনফিগার করুন:

   {
     "mcpServers": {
       "chrome-devtools": {
         "command": "npx",
         "args": [
           "chrome-devtools-mcp@latest",
           "--browser-url=http://127.0.0.1:9222"
         ]
       }
     }
   }