DevTools প্রসারিত করুন

DevTools এক্সটেনশনগুলি এক্সটেনশনে যোগ করা একটি DevTools পৃষ্ঠার মাধ্যমে DevTools-নির্দিষ্ট এক্সটেনশন API অ্যাক্সেস করে Chrome DevTools-এ বৈশিষ্ট্য যোগ করে।

আর্কিটেকচার ডায়াগ্রাম দেখানো হচ্ছে DevTools পৃষ্ঠার সাথে যোগাযোগ করছে পরিদর্শন উইন্ডো এবং পরিষেবা কর্মী। সেবা কর্মী দেখানো হয় বিষয়বস্তু স্ক্রিপ্টের সাথে যোগাযোগ করা এবং এক্সটেনশন API অ্যাক্সেস করা। DevTools পৃষ্ঠার DevTools API-তে অ্যাক্সেস আছে, উদাহরণস্বরূপ, প্যানেল তৈরি করা।
DevTools এক্সটেনশন আর্কিটেকচার।

DevTools-নির্দিষ্ট এক্সটেনশন API গুলি নিম্নলিখিতগুলি অন্তর্ভুক্ত করে:

DevTools পৃষ্ঠা

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

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

DevTools পৃষ্ঠা সরাসরি এক্সটেনশন API অ্যাক্সেস করতে পারে। এর মধ্যে বার্তা পাসিং ব্যবহার করে পরিষেবা কর্মীর সাথে যোগাযোগ করতে সক্ষম হওয়া অন্তর্ভুক্ত।

একটি DevTools এক্সটেনশন তৈরি করুন

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

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

devtools_page ক্ষেত্রটি অবশ্যই একটি HTML পৃষ্ঠার দিকে নির্দেশ করবে৷ যেহেতু DevTools পৃষ্ঠাটি আপনার এক্সটেনশনের স্থানীয় হতে হবে, তাই আমরা একটি আপেক্ষিক URL ব্যবহার করে এটি নির্দিষ্ট করার পরামর্শ দিই।

chrome.devtools API-এর সদস্যরা শুধুমাত্র সেই উইন্ডোটি খোলা থাকাকালীন DevTools উইন্ডোর মধ্যে লোড হওয়া পৃষ্ঠাগুলিতে উপলব্ধ। বিষয়বস্তু স্ক্রিপ্ট এবং অন্যান্য এক্সটেনশন পৃষ্ঠাগুলির এই APIগুলিতে অ্যাক্সেস নেই৷

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

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

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