DevTools MCP সার্ভার অথবা এর বিশেষায়িত CLI ও স্কিলের মাধ্যমে আপনার কোডিং এজেন্টকে DevTools-এর ক্ষমতা প্রদান করুন।

গিটহাবে আরও জানুন
Chrome DevTools এমন প্রতিটি এজেন্টের সাথে কাজ করে যা MCP সার্ভার সমর্থন করে: Gemini CLI, Antigravity, Claude Code, Codex, এবং আরও অনেক। প্রতিটি সেশনে আপনার এজেন্টকে DevTools-এর সক্ষমতা সম্পর্কে জানাতে MCP সার্ভার ব্যবহার করুন।
MCP সার্ভারের একটি আরও টোকেন-সাশ্রয়ী বিকল্প হিসেবে, আপনি Chrome DevTools CLI ব্যবহার করতে পারেন। Chrome DevTools MCP সার্ভার প্যাকেজে একটি বিশেষায়িত স্কিল অন্তর্ভুক্ত রয়েছে, যা আপনার কোডিং এজেন্টকে MCP সার্ভারের মতোই শক্তিশালী টুল ব্যবহার করে স্ক্রিপ্ট লিখতে শেখায়।

এখনই ইনস্টল করুন

MCP সার্ভার এবং CLI উভয়ই একই প্যাকেজের অংশ। আপনার পছন্দের কোডিং এজেন্টের জন্য এগুলো সংগ্রহ করুন। নিচে সবচেয়ে জনপ্রিয় এজেন্টগুলোর নির্দেশাবলী খুঁজুন, এবং GitHub-এ ২০টিরও বেশি এজেন্টের নির্দেশাবলী রয়েছে।

  # Either MCP only:
  gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
  # Or as a Gemini extension (MCP+Skills):
  gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
 
  # Either MCP only:
  claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
  # Or as a plugin (MCP+Skills):
  /plugin marketplace add ChromeDevTools/chrome-devtools-mcp
  /plugin install chrome-devtools-mcp
 
  codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

একবার আপনি DevTools MCP সার্ভার বা CLI ইনস্টল করে ফেললে, কাজ শুরু করার জন্য কয়েকটি প্রম্পট চেষ্টা করুন! আপনার এজেন্ট থেকেই একটি লাইটহাউস অডিটের জন্য অনুরোধ করুন, একটি ফর্ম পূরণ করতে বলুন, বা একটি স্ক্রিনশটের জন্য বলুন। এই সমস্ত ক্ষমতা বাস্তবে দেখতে, উদাহরণস্বরূপ নিম্নলিখিত প্রম্পটটি চেষ্টা করুন:

  Visit developer.chrome.com and run a search for "devtools",
  while recording a performance trace.
  Let me know how I can improve the website's performance.

এই প্রম্পটটি একটি নতুন পৃষ্ঠা তৈরি করতে, সার্চ বারের সাথে ইন্টারঅ্যাক্ট করতে এবং CrUX ডেটা সহ একটি পারফরম্যান্স ট্রেস চালাতে টুল ব্যবহার করে!


উপলব্ধ সমস্ত সরঞ্জাম দেখুন