DevTools প্রসারিত করা হচ্ছে

সংক্ষিপ্ত বিবরণ

একটি ডেভটুলস এক্সটেনশন ক্রোম ডেভটুলস-এ কার্যকারিতা যোগ করে। এটি নতুন UI প্যানেল এবং সাইডবার যোগ করতে পারে, পরিদর্শন করা পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করতে পারে, নেটওয়ার্ক অনুরোধ সম্পর্কে তথ্য পেতে পারে এবং আরও অনেক কিছু করতে পারে। বৈশিষ্ট্যযুক্ত ডেভটুলস এক্সটেনশনগুলি দেখুন। ডেভটুলস এক্সটেনশনগুলির ডেভটুলস-নির্দিষ্ট এক্সটেনশন API-এর একটি অতিরিক্ত সেটে অ্যাক্সেস রয়েছে:

একটি ডেভটুলস এক্সটেনশনের গঠন অন্যান্য এক্সটেনশনের মতোই: এতে একটি ব্যাকগ্রাউন্ড পেজ, কন্টেন্ট স্ক্রিপ্ট এবং অন্যান্য আইটেম থাকতে পারে। এছাড়াও, প্রতিটি ডেভটুলস এক্সটেনশনের একটি ডেভটুলস পেজ থাকে, যেটি ডেভটুলস এপিআই (API)-গুলোতে অ্যাক্সেস করতে পারে।

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

ডেভটুলস পৃষ্ঠা

প্রতিবার একটি DevTools উইন্ডো খোলার সময় এক্সটেনশনটির DevTools পেজের একটি ইনস্ট্যান্স তৈরি হয়। DevTools পেজটি DevTools উইন্ডোটির পুরো জীবনকাল ধরে বিদ্যমান থাকে। DevTools পেজটির DevTools API এবং এক্সটেনশনের সীমিত কিছু API ব্যবহারের সুযোগ রয়েছে। বিশেষত, DevTools পেজটি নিম্নলিখিত কাজগুলো করতে পারে:

  • devtools.panels API ব্যবহার করে প্যানেল তৈরি করুন এবং সেগুলোর সাথে ইন্টারঅ্যাক্ট করুন।
  • devtools.inspectedWindow API ব্যবহার করে পরিদর্শন করা উইন্ডো সম্পর্কে তথ্য পান এবং সেই উইন্ডোতে কোড মূল্যায়ন করুন।
  • devtools.network API ব্যবহার করে নেটওয়ার্ক অনুরোধ সম্পর্কে তথ্য পান।

ডেভটুলস পেজ বেশিরভাগ এক্সটেনশন এপিআই সরাসরি ব্যবহার করতে পারে না। এটি extension এবং runtime এপিআই-এর সেই একই উপসেট অ্যাক্সেস করতে পারে, যা একটি কন্টেন্ট স্ক্রিপ্ট অ্যাক্সেস করতে পারে। একটি কন্টেন্ট স্ক্রিপ্টের মতোই, একটি ডেভটুলস পেজ মেসেজ পাসিং ব্যবহার করে ব্যাকগ্রাউন্ড পেজের সাথে যোগাযোগ করতে পারে। একটি উদাহরণের জন্য, ‘ইনজেক্টিং এ কন্টেন্ট স্ক্রিপ্ট’ দেখুন।

একটি ডেভটুলস এক্সটেনশন তৈরি করা

আপনার এক্সটেনশনের জন্য একটি ডেভটুলস পৃষ্ঠা তৈরি করতে, এক্সটেনশন ম্যানিফেস্টে devtools_page ফিল্ডটি যোগ করুন:

{
  "name": ...
  "version": "1.0",
  "minimum_chrome_version": "10.0",
  "devtools_page": "devtools.html",
  ...
}

আপনার এক্সটেনশনের ম্যানিফেস্টে উল্লেখিত devtools_page এর একটি ইনস্ট্যান্স খোলা প্রতিটি DevTools উইন্ডোর জন্য তৈরি করা হয়। এই পেজটি devtools.panels API ব্যবহার করে অন্যান্য এক্সটেনশন পেজকে প্যানেল এবং সাইডবার হিসেবে DevTools উইন্ডোতে যুক্ত করতে পারে।

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

এছাড়াও কিছু ডেভটুলস এপিআই রয়েছে যা এখনও পরীক্ষামূলক পর্যায়ে আছে। পরীক্ষামূলক এপিআই-গুলোর তালিকা এবং সেগুলো ব্যবহারের নির্দেশিকার জন্য chrome.experimental.* APIs দেখুন।

ডেভটুলস UI উপাদান: প্যানেল এবং সাইডবার প্যান

ব্রাউজার অ্যাকশন, কনটেক্সট মেনু এবং পপআপের মতো সাধারণ এক্সটেনশন UI এলিমেন্টগুলো ছাড়াও, একটি DevTools এক্সটেনশন DevTools উইন্ডোতে UI এলিমেন্ট যোগ করতে পারে:

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

ডেভটুলস উইন্ডোতে এলিমেন্টস প্যানেল এবং স্টাইলস সাইডবার পেইন দেখা যাচ্ছে।

প্রতিটি প্যানেল হলো তার নিজস্ব একটি HTML ফাইল, যাতে অন্যান্য রিসোর্স (জাভাস্ক্রিপ্ট, সিএসএস, ছবি ইত্যাদি) অন্তর্ভুক্ত থাকতে পারে। একটি সাধারণ প্যানেল তৈরি করার পদ্ধতিটি দেখতে এইরকম:

chrome.devtools.panels.create("My Panel",
    "MyPanelIcon.png",
    "Panel.html",
    function(panel) {
      // code invoked on panel creation
    }
);

প্যানেল বা সাইডবার প্যানে এক্সিকিউট করা জাভাস্ক্রিপ্ট, ডেভটুলস পেজের মতোই একই এপিআইগুলো অ্যাক্সেস করতে পারে।

এলিমেন্টস প্যানেলের জন্য একটি সাধারণ সাইডবার পেইন তৈরি করলে তা দেখতে এইরকম হয়:

chrome.devtools.panels.elements.createSidebarPane("My Sidebar",
    function(sidebar) {
        // sidebar initialization code here
        sidebar.setObject({ some_data: "Some data to show" });
});

সাইডবার প্যানে বিষয়বস্তু প্রদর্শন করার বিভিন্ন উপায় রয়েছে:

  • এইচটিএমএল বিষয়বস্তু। প্যানে প্রদর্শনের জন্য একটি এইচটিএমএল পৃষ্ঠা নির্দিষ্ট করতে setPage কল করুন।
  • JSON ডেটা। setObject এ একটি JSON অবজেক্ট পাস করুন।
  • জাভাস্ক্রিপ্ট এক্সপ্রেশন। setExpression এ একটি এক্সপ্রেশন পাস করুন। DevTools পরিদর্শন করা পৃষ্ঠার প্রেক্ষাপটে এক্সপ্রেশনটি মূল্যায়ন করে এবং রিটার্ন মানটি প্রদর্শন করে।

setObject এবং setExpression উভয়ের ক্ষেত্রেই, প্যানে মানটি ঠিক সেভাবেই প্রদর্শন করে যেভাবে এটি DevTools কনসোলে দেখা যায়। তবে, setExpression আপনাকে DOM এলিমেন্ট এবং যেকোনো জাভাস্ক্রিপ্ট অবজেক্ট প্রদর্শন করতে দেয়, যেখানে setObject শুধুমাত্র JSON অবজেক্ট সমর্থন করে।

সম্প্রসারণ উপাদানগুলির মধ্যে যোগাযোগ

নিম্নলিখিত বিভাগগুলিতে একটি ডেভটুলস এক্সটেনশনের বিভিন্ন উপাদানের মধ্যে যোগাযোগের কিছু সাধারণ পরিস্থিতি বর্ণনা করা হয়েছে।

একটি কন্টেন্ট স্ক্রিপ্ট ইনজেক্ট করা

DevTools পেজ সরাসরি tabs.executeScript কল করতে পারে না। DevTools পেজ থেকে একটি কন্টেন্ট স্ক্রিপ্ট ইনজেক্ট করতে হলে, আপনাকে inspectedWindow.tabId প্রপার্টি ব্যবহার করে ইন্সপেক্টেড উইন্ডোর ট্যাবের আইডি সংগ্রহ করতে হবে এবং ব্যাকগ্রাউন্ড পেজে একটি মেসেজ পাঠাতে হবে। ব্যাকগ্রাউন্ড পেজ থেকে, স্ক্রিপ্টটি ইনজেক্ট করার জন্য tabs.executeScript কল করুন।

নিম্নলিখিত কোড স্নিপেটগুলিতে দেখানো হয়েছে কিভাবে executeScript ব্যবহার করে একটি কন্টেন্ট স্ক্রিপ্ট ইনজেক্ট করতে হয়।

// DevTools page -- devtools.js
// Create a connection to the background page
var backgroundPageConnection = chrome.runtime.connect({
    name: "devtools-page"
});

backgroundPageConnection.onMessage.addListener(function (message) {
    // Handle responses from the background page, if any
});

// Relay the tab ID to the background page
chrome.runtime.sendMessage({
    tabId: chrome.devtools.inspectedWindow.tabId,
    scriptToInject: "content_script.js"
});

ব্যাকগ্রাউন্ড পেজের জন্য কোড:

// Background page -- background.js
chrome.runtime.onConnect.addListener(function(devToolsConnection) {
    // assign the listener function to a variable so we can remove it later
    var devToolsListener = function(message, sender, sendResponse) {
        // Inject a content script into the identified tab
        chrome.tabs.executeScript(message.tabId,
            { file: message.scriptToInject });
    }
    // add the listener
    devToolsConnection.onMessage.addListener(devToolsListener);

    devToolsConnection.onDisconnect.addListener(function() {
         devToolsConnection.onMessage.removeListener(devToolsListener);
    });
});

পরিদর্শন করা উইন্ডোতে জাভাস্ক্রিপ্ট মূল্যায়ন করা

আপনি পরিদর্শন করা পৃষ্ঠার প্রেক্ষাপটে জাভাস্ক্রিপ্ট কোড কার্যকর করতে inspectedWindow.eval পদ্ধতিটি ব্যবহার করতে পারেন। আপনি একটি DevTools পৃষ্ঠা, প্যানেল বা সাইডবার প্যান থেকে eval পদ্ধতিটি কল করতে পারেন।

ডিফল্টরূপে, এক্সপ্রেশনটি পেজের প্রধান ফ্রেমের প্রেক্ষাপটে মূল্যায়ন করা হয়। এখন, আপনি হয়তো ডেভটুলস কমান্ডলাইন এপিআই-এর বিভিন্ন ফিচারের সাথে পরিচিত, যেমন এলিমেন্ট ইন্সপেকশন ( inspect(elem) ), ফাংশনে ব্রেক করা ( debug(fn) ), ক্লিপবোর্ডে কপি করা ( copy() ) এবং আরও অনেক কিছু। inspectedWindow.eval() ডেভটুলস কনসোলে টাইপ করা কোডের মতোই একই স্ক্রিপ্ট এক্সিকিউশন কনটেক্সট এবং অপশন ব্যবহার করে, যা eval-এর মধ্যেই এই এপিআইগুলো অ্যাক্সেস করার সুযোগ দেয়। উদাহরণস্বরূপ, SOAK একটি এলিমেন্ট ইন্সপেকশন করার জন্য এটি ব্যবহার করে:

chrome.devtools.inspectedWindow.eval(
  "inspect($$('head script[data-soak=main]')[0])",
  function(result, isException) { }
);

বিকল্পভাবে, কন্টেন্ট স্ক্রিপ্টগুলোর একই কনটেক্সটে এক্সপ্রেশনটি ইভ্যালুয়েট করতে inspectedWindow.eval() এর জন্য useContentScriptContext: true অপশনটি ব্যবহার করুন। useContentScriptContext: true সহ eval কল করলে কোনো কন্টেন্ট স্ক্রিপ্ট কনটেক্সট তৈরি হয় না, তাই eval কল করার আগে আপনাকে অবশ্যই একটি কনটেক্সট স্ক্রিপ্ট লোড করতে হবে, হয় executeScript কল করে অথবা manifest.json ফাইলে একটি কন্টেন্ট স্ক্রিপ্ট নির্দিষ্ট করে দিয়ে।

একবার কনটেক্সট স্ক্রিপ্ট বিদ্যমান থাকলে, আপনি অতিরিক্ত কনটেন্ট স্ক্রিপ্ট যুক্ত করতে এই বিকল্পটি ব্যবহার করতে পারেন।

eval মেথডটি সঠিক প্রেক্ষাপটে ব্যবহার করলে শক্তিশালী এবং অনুপযুক্তভাবে ব্যবহার করলে বিপজ্জনক। যদি আপনার পরিদর্শন করা পৃষ্ঠার জাভাস্ক্রিপ্ট প্রেক্ষাপটে অ্যাক্সেসের প্রয়োজন না হয়, তাহলে tabs.executeScript মেথডটি ব্যবহার করুন। বিস্তারিত সতর্কতা এবং দুটি পদ্ধতির তুলনার জন্য, inspectedWindow দেখুন।

নির্বাচিত উপাদানটিকে একটি কন্টেন্ট স্ক্রিপ্টে প্রেরণ করা

কন্টেন্ট স্ক্রিপ্টের বর্তমান নির্বাচিত এলিমেন্টে সরাসরি অ্যাক্সেস নেই। তবে, inspectedWindow.eval ব্যবহার করে আপনি যে কোডই চালান না কেন, সেটি DevTools কনসোল এবং কমান্ড-লাইন API-গুলোতে অ্যাক্সেস পায়। উদাহরণস্বরূপ, ইভ্যালুয়েটেড কোডে আপনি নির্বাচিত এলিমেন্টটি অ্যাক্সেস করার জন্য $0 ব্যবহার করতে পারেন।

নির্বাচিত এলিমেন্টটি একটি কন্টেন্ট স্ক্রিপ্টে পাঠাতে:

  • কন্টেন্ট স্ক্রিপ্টে এমন একটি মেথড তৈরি করুন যা নির্বাচিত এলিমেন্টটিকে আর্গুমেন্ট হিসেবে গ্রহণ করবে।
  • DevTools পৃষ্ঠা থেকে inspectedWindow.eval ব্যবহার করে useContentScriptContext: true অপশনসহ মেথডটি কল করুন।

আপনার কন্টেন্ট স্ক্রিপ্টের কোডটি দেখতে অনেকটা এইরকম হতে পারে:

function setSelectedElement(el) {
    // do something with the selected element
}

DevTools পৃষ্ঠা থেকে পদ্ধতিটি এইভাবে চালু করুন:

chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
    { useContentScriptContext: true });

` useContentScriptContext: true অপশনটি নির্দিষ্ট করে যে, এক্সপ্রেশনটিকে অবশ্যই কন্টেন্ট স্ক্রিপ্টগুলোর মতোই একই কনটেক্সটে ইভ্যালুয়েট করতে হবে, যাতে এটি setSelectedElement মেথডটি অ্যাক্সেস করতে পারে।

একটি রেফারেন্স প্যানেলের window পাওয়া

একটি ডেভটুলস প্যানেল থেকে postMessage পাঠাতে, আপনার এর window অবজেক্টের একটি রেফারেন্স প্রয়োজন হবে। panel.onShown ইভেন্ট হ্যান্ডলার থেকে একটি প্যানেলের iframe উইন্ডোটি পান:

onShown.addListener(function callback)
extensionPanel.onShown.addListener(function (extPanelWindow) {
    extPanelWindow instanceof Window; // true
    extPanelWindow.postMessage( // …
});

কন্টেন্ট স্ক্রিপ্ট থেকে ডেভটুলস পৃষ্ঠায় বার্তা প্রেরণ

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

কোনো কন্টেন্ট স্ক্রিপ্টে বার্তা পাঠানোর সময়, ব্যাকগ্রাউন্ড পেজটি tabs.sendMessage মেথডটি ব্যবহার করতে পারে, যা একটি নির্দিষ্ট ট্যাবের কন্টেন্ট স্ক্রিপ্টগুলোতে বার্তা পাঠায়, যেমনটি "ইনজেক্টিং এ কন্টেন্ট স্ক্রিপ্ট" অংশে দেখানো হয়েছে।

কন্টেন্ট স্ক্রিপ্ট থেকে মেসেজ পাঠানোর সময়, বর্তমান ট্যাবের সাথে যুক্ত সঠিক DevTools পেজ ইনস্ট্যান্সে মেসেজটি পৌঁছে দেওয়ার জন্য কোনো তৈরি পদ্ধতি নেই। এর একটি বিকল্প উপায় হিসেবে, আপনি DevTools পেজটিকে ব্যাকগ্রাউন্ড পেজের সাথে একটি দীর্ঘস্থায়ী সংযোগ স্থাপন করতে দিতে পারেন, এবং ব্যাকগ্রাউন্ড পেজটিকে ট্যাব আইডি ও সংযোগগুলোর একটি ম্যাপ রাখতে বলতে পারেন, যাতে এটি প্রতিটি মেসেজকে সঠিক সংযোগে পাঠিয়ে দিতে পারে। 

// background.js
var connections = {};

chrome.runtime.onConnect.addListener(function (port) {

    var extensionListener = function (message, sender, sendResponse) {

        // The original connection event doesn't include the tab ID of the
        // DevTools page, so we need to send it explicitly.
        if (message.name == "init") {
          connections[message.tabId] = port;
          return;
        }

    // other message handling
    }

    // Listen to messages sent from the DevTools page
    port.onMessage.addListener(extensionListener);

    port.onDisconnect.addListener(function(port) {
        port.onMessage.removeListener(extensionListener);

        var tabs = Object.keys(connections);
        for (var i=0, len=tabs.length; i < len; i++) {
          if (connections[tabs[i]] == port) {
            delete connections[tabs[i]]
            break;
          }
        }
    });
});

// Receive message from content script and relay to the devTools page for the
// current tab
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    // Messages from content scripts should have sender.tab set
    if (sender.tab) {
      var tabId = sender.tab.id;
      if (tabId in connections) {
        connections[tabId].postMessage(request);
      } else {
        console.log("Tab not found in connection list.");
      }
    } else {
      console.log("sender.tab not defined.");
    }
    return true;
});

DevTools পৃষ্ঠাটি (বা প্যানেল বা সাইডবার প্যানে) সংযোগটি এইভাবে স্থাপন করে: 

// Create a connection to the background page
var backgroundPageConnection = chrome.runtime.connect({
    name: "panel"
});

backgroundPageConnection.postMessage({
    name: 'init',
    tabId: chrome.devtools.inspectedWindow.tabId
});

ইনজেক্ট করা স্ক্রিপ্ট থেকে ডেভটুলস পৃষ্ঠায় বার্তা পাঠানো

যদিও উপরের সমাধানটি কন্টেন্ট স্ক্রিপ্টের জন্য কাজ করে, কিন্তু যে কোড সরাসরি পেজে ইনজেক্ট করা হয় (যেমন <script> ট্যাগ যুক্ত করে বা inspectedWindow.eval মাধ্যমে), তার জন্য একটি ভিন্ন কৌশল প্রয়োজন। এই ক্ষেত্রে, runtime.sendMessage প্রত্যাশা অনুযায়ী ব্যাকগ্রাউন্ড স্ক্রিপ্টে মেসেজ পাঠাবে না।

একটি বিকল্প সমাধান হিসেবে, আপনি আপনার ইনজেক্ট করা স্ক্রিপ্টটিকে একটি কন্টেন্ট স্ক্রিপ্টের সাথে যুক্ত করতে পারেন, যা মধ্যস্থতাকারী হিসেবে কাজ করবে। কন্টেন্ট স্ক্রিপ্টে মেসেজ পাঠানোর জন্য, আপনি window.postMessage API ব্যবহার করতে পারেন। পূর্ববর্তী অংশের ব্যাকগ্রাউন্ড স্ক্রিপ্টটি ধরে নিয়ে, এখানে একটি উদাহরণ দেওয়া হলো: 

// injected-script.js

window.postMessage({
  greeting: 'hello there!',
  source: 'my-devtools-extension'
}, '*');

// content-script.js

window.addEventListener('message', function(event) {
  // Only accept messages from the same frame
  if (event.source !== window) {
    return;
  }

  var message = event.data;

  // Only accept messages that we know are ours
  if (typeof message !== 'object' || message === null ||
      !message.source === 'my-devtools-extension') {
    return;
  }

  chrome.runtime.sendMessage(message);
});

আপনার বার্তাটি এখন ইনজেক্টেড স্ক্রিপ্ট থেকে কন্টেন্ট স্ক্রিপ্ট, তারপর ব্যাকগ্রাউন্ড স্ক্রিপ্ট হয়ে অবশেষে ডেভটুলস পেজে যাবে।

আপনি এখানে আরও দুটি বিকল্প বার্তা আদান-প্রদানের কৌশলও বিবেচনা করতে পারেন।

DevTools কখন খোলে এবং বন্ধ হয় তা সনাক্ত করা

আপনার এক্সটেনশনের যদি ডেভটুলস উইন্ডো খোলা আছে কিনা তা ট্র্যাক করার প্রয়োজন হয়, তাহলে আপনি ব্যাকগ্রাউন্ড পেজে একটি onConnect লিসেনার যোগ করতে পারেন এবং ডেভটুলস পেজ থেকে connect ইভেন্টটি কল করতে পারেন। যেহেতু প্রতিটি ট্যাবের নিজস্ব ডেভটুলস উইন্ডো খোলা থাকতে পারে, তাই আপনি একাধিক connect ইভেন্ট পেতে পারেন। কোনো ডেভটুলস উইন্ডো খোলা আছে কিনা তা ট্র্যাক করতে, আপনাকে নিচে দেখানো পদ্ধতি অনুযায়ী connect এবং disconnect ইভেন্টগুলো গণনা করতে হবে: 

// background.js
var openCount = 0;
chrome.runtime.onConnect.addListener(function (port) {
    if (port.name == "devtools-page") {
      if (openCount == 0) {
        alert("DevTools window opening.");
      }
      openCount++;

      port.onDisconnect.addListener(function(port) {
          openCount--;
          if (openCount == 0) {
            alert("Last DevTools window closing.");
          }
      });
    }
});

DevTools পৃষ্ঠাটি এইভাবে একটি সংযোগ তৈরি করে: 

// devtools.js

// Create a connection to the background page
var backgroundPageConnection = chrome.runtime.connect({
    name: "devtools-page"
});

ডেভটুলস এক্সটেনশনের উদাহরণ

এই DevTools এক্সটেনশন উদাহরণগুলির উৎস ব্রাউজ করুন:

আরও তথ্য

এক্সটেনশনগুলো যে সকল স্ট্যান্ডার্ড এপিআই ব্যবহার করতে পারে, সে সম্পর্কে তথ্যের জন্য chrome.* এপিআই এবং web এপিআই দেখুন।

আমাদের মতামত দিন! আপনার মন্তব্য ও পরামর্শ আমাদের এপিআই (API) উন্নত করতে সাহায্য করে।

উদাহরণ

আপনি স্যাম্পল -এ ডেভটুলস এপিআই ব্যবহার করা উদাহরণগুলো খুঁজে পেতে পারেন।