নতুন কমান্ড এডিটর দিয়ে দক্ষতার সাথে আপনার Chrome Devtools Protocol (CDP) কমান্ড তৈরি করুন

Chrome DevTools Protocol (CDP) হল একটি দূরবর্তী ডিবাগিং প্রোটোকল (API) যা বিকাশকারীদের একটি চলমান Chrome ব্রাউজারের সাথে যোগাযোগ করতে দেয়৷ Chrome DevTools আপনাকে ব্রাউজারের অবস্থা পরিদর্শন করতে, এর আচরণ নিয়ন্ত্রণ করতে এবং ডিবাগিং তথ্য সংগ্রহ করতে সাহায্য করতে CDP ব্যবহার করে। আপনি সিডিপি ব্যবহার করে এমন ক্রোম এক্সটেনশনও তৈরি করতে পারেন।

উদাহরণ স্বরূপ, এটি একটি CDP কমান্ড যা প্রদত্ত styleSheetId সহ একটি স্টাইলশীটে প্রদত্ত ruleText সাথে একটি নতুন নিয়ম সন্নিবেশ করায়, location দ্বারা নির্দিষ্ট অবস্থানে।

{ 
    command: 'CSS.addRule', 
    parameters: {
        styleSheetId: '2',
        ruleText:'Example', 
        location: {
            startLine: 1,
            startColumn: 1,
            endLine: 1,
            endColumn: 1
        }
    }
}

প্রোটোকল মনিটর ড্রয়ার ট্যাব আপনাকে CDP অনুরোধ পাঠাতে এবং DevTools পাঠানো এবং গ্রহণ করে এমন সমস্ত CDP অনুরোধ এবং প্রতিক্রিয়া দেখার একটি উপায় প্রদান করে।

প্রোটোকল মনিটরের নীচে কমান্ড লাইন বার।

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

এই সমস্যা সমাধানের জন্য, DevTools একটি নতুন CDP সম্পাদক প্রবর্তন করেছে যার প্রধান লক্ষ্যগুলি হল:

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

এখন, এই নতুন সম্পাদক কী অফার করে এবং আপনি কীভাবে এটি ব্যবহার করতে পারেন তা দেখুন!

স্বয়ংসম্পূর্ণতা বৈশিষ্ট্য

স্বয়ংসম্পূর্ণতা ড্রপ-ডাউন মেনু।

একটি স্বয়ংক্রিয় সমাপ্তি বৈশিষ্ট্য এখন কমান্ড ইনপুট বারকে শক্তি দেয়। এটি আপনাকে সিডিপি কমান্ডের নাম লিখতে সাহায্য করে যা আপনার অ্যাক্সেস আছে। প্যারামিটার গ্রহণ করে না এমন কমান্ডগুলির জন্য এটি খুব সহজ হতে পারে।

স্ট্রিং এবং সংখ্যা পরামিতি

এই নতুন সম্পাদকের সাহায্যে, আপনি এখন আদিম পরামিতিগুলির মানগুলি সহজেই সম্পাদনা করতে পারেন৷ সম্পাদক খুলতে, ক্লিক করুন বাম প্যানেল খুলুন। কমান্ড ইনপুটের পাশে আইকন।

একবার আপনি কমান্ডের নাম লিখলে, সম্পাদক আপনাকে স্বয়ংক্রিয়ভাবে সংশ্লিষ্ট পরামিতিগুলি দেখায়। কোন কমান্ডের সাথে কোন প্যারামিটারগুলি যায় তা জানতে আপনাকে ডকুমেন্টেশন দেখতে হবে না। উপরন্তু, সম্পাদক একটি প্রদত্ত ক্রমে পরামিতিগুলি প্রদর্শন করে: বাধ্যতামূলকগুলি প্রথমে (লাল) এবং ঐচ্ছিকগুলি পরের (নীল রঙে)।

একটি ঐচ্ছিক প্যারামিটারে একটি মান যোগ করতে, এর নামের উপর হোভার করুন এবং + বোতামে ক্লিক করুন। প্যারামিটারটিকে অনির্ধারিত তে রিসেট করতে, ডিফল্ট মান রিসেট বোতামে ক্লিক করুন।

+ এবং 'ডিফল্ট মান রিসেট করুন' বোতাম।

এনাম এবং বুলিয়ান প্যারামিটার

এনাম বা বুলিয়ান প্যারামিটারগুলি সম্পাদনা করার সময়, আপনি একটি ড্রপ-ডাউন মেনু দেখতে পাবেন যা সম্ভাব্য মানগুলির একটি নির্বাচন প্রদান করে (এনামগুলির জন্য) বা বুলিয়ানদের জন্য সরল সত্য বা মিথ্যা বিকল্প। এই বৈশিষ্ট্যটি enum প্যারামিটারের জন্য ভুল মান টাইপ করার সম্ভাবনা হ্রাস করে এবং নির্ভুলতা এবং সরলতা বজায় রাখে।

বুলিয়ান এবং এনাম ড্রপ-ডাউন মেনু।

অ্যারে প্যারামিটার

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

+ বোতাম যা একটি অ্যারে আইটেম যোগ করে।

একের পর এক অ্যারে আইটেম মুছতে, আইটেমগুলির পাশে থাকা বিন বোতামে ক্লিক করুন। আপনি ব্লক বোতাম দিয়ে অ্যারে থেকে সমস্ত পরামিতি সাফ করতে পারেন। এই ক্ষেত্রে, অ্যারে প্যারামিটারটি [] এ রিসেট করা হয়েছে।

'পরামিটার মুছুন' এবং 'ডিফল্টে রিসেট করুন' বোতাম।

অবজেক্ট প্যারামিটার

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

নেস্টেড প্যারামিটার।

সম্পাদকে কমান্ড এবং পরামিতিগুলি কী করে তা আবিষ্কার করুন

আপনি কি কখনও প্যারামিটার বা কমান্ডের উদ্দেশ্য সম্পর্কে অনিশ্চিত ছিলেন? এখন, আপনি একটি কমান্ড বা প্যারামিটারের উপর হভার করতে পারেন, এবং একটি বর্ণনামূলক টুলটিপ পপ আপ হবে, অনলাইন ডকুমেন্টেশনের একটি লিঙ্ক সহ সম্পূর্ণ হবে৷

বর্ণনামূলক টুলটিপ যা প্রদর্শিত হয় যখন আপনি একটি কমান্ডের উপর হোভার করেন।

ভুল পরামিতি পাঠানোর আগে সতর্ক করুন

পূর্বে, যদি আপনি না জানতেন যে একটি প্যারামিটারের মান সঠিক ধরনের ছিল এবং ত্রুটির প্রতিক্রিয়া পড়ার জন্য অপেক্ষা করতে হয়, এই নতুন সম্পাদকটি আপনার জন্য। এটি আপনাকে রিয়েল-টাইম ত্রুটি দেখায় যদি প্যারামিটারটি আপনার প্রবেশ করা মান গ্রহণ করতে না পারে।

একটি ভুল মান সহ একটি প্যারামিটারের পাশে একটি ত্রুটি আইকন৷

একটি কমান্ড পুনরায় পাঠান

আপনি যদি এইমাত্র পাঠানো কমান্ডের একটি প্যারামিটার পরিবর্তন করতে চান তবে আপনাকে এটি আবার টাইপ করতে হবে না। কমান্ডটি সম্পাদনা করতে এবং পুনরায় পাঠাতে, ডেটাগ্রিডে একটি আইটেমে ডান-ক্লিক করুন এবং ড্রপ-ডাউন মেনু থেকে সম্পাদনা এবং পুনরায় পাঠান নির্বাচন করুন। এটি স্বয়ংক্রিয়ভাবে CDP সম্পাদক পুনরায় খুলবে এবং আপনার নির্বাচিত কমান্ড দিয়ে এটিকে পূর্বে পূরণ করবে।

'সম্পাদনা এবং পুনরায় পাঠান' বিকল্পের সাথে ডেটাগ্রিডে একটি কমান্ডের ড্রপ-ডাউন মেনু।

JSON ফরম্যাটে একটি কমান্ড কপি করুন

আপনার ক্লিপবোর্ডে JSON ফরম্যাটে CDP কমান্ড অনুলিপি করতে, ক্লিক করুন কপি। টুলবারের বাম প্রান্তে কপি আইকন। অতিরিক্তভাবে, মনে রাখবেন যে আপনি যদি সরাসরি ইনপুট বারে একটি কমান্ড ইনপুট করেন, তাহলে এটি নির্বিঘ্নে সম্পাদককে এবং অন্যভাবে আশেপাশে পপুলেট করবে।

উপসংহার

এই নতুন CDP সম্পাদকের ডিজাইনের পিছনে DevTools টিমের লক্ষ্য ছিল CDP কমান্ডের টাইপিং সহজ করা। নতুন এডিটরটি ডকুমেন্টেশনের পাশাপাশি প্যারামিটার দেখতে এবং আপনার CDP কমান্ড পাঠানোর সহজ উপায় প্রদান করতে ব্যবহার করা যেতে পারে।

প্রিভিউ চ্যানেল ডাউনলোড করুন

আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসাবে Chrome Canary , Dev , বা Beta ব্যবহার করার কথা বিবেচনা করুন৷ এই প্রিভিউ চ্যানেলগুলি আপনাকে সর্বশেষ DevTools বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, আপনাকে অত্যাধুনিক ওয়েব প্ল্যাটফর্ম APIগুলি পরীক্ষা করতে দেয় এবং আপনার ব্যবহারকারীদের করার আগে আপনার সাইটে সমস্যাগুলি খুঁজে পেতে সহায়তা করে!

Chrome DevTools টিমের সাথে যোগাযোগ করুন

নতুন বৈশিষ্ট্য, আপডেট বা DevTools সম্পর্কিত অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন৷

  • crbug.com এ আমাদের কাছে প্রতিক্রিয়া এবং বৈশিষ্ট্যের অনুরোধ জমা দিন।
  • আরও বিকল্প > সাহায্য > DevTools-এ একটি DevTools সমস্যা রিপোর্ট করুন ব্যবহার করে একটি DevTools সমস্যা রিপোর্ট করুন।
  • @ ChromeDevTools-এ টুইট করুন।
  • DevTools YouTube ভিডিও বা DevTools টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷