Chrome DevTools এর সাথে ফর্মের সমস্যাগুলি খুঁজুন

Chrome DevTools টিম আপনাকে ফর্মের সমস্যাগুলি খুঁজে পেতে এবং অটোফিল ডিবাগ করতে সাহায্য করার জন্য অতিরিক্ত নতুন বৈশিষ্ট্য তৈরি করছে৷

Sam Dutton

Chrome Canary-এ আমরা DevTools-এ নতুন বৈশিষ্ট্যগুলি পরীক্ষা করছি যেগুলির লক্ষ্য বিকাশকারীদের বুঝতে সাহায্য করা যে ফর্ম অটোফিল কীভাবে কাজ করে এবং কেন এটি কখনও কখনও ব্যর্থ হয়:

• কিভাবে ব্রাউজার স্বয়ংক্রিয়ভাবে ক্ষেত্রগুলি গঠন করতে সঞ্চিত মানগুলিকে মানচিত্র করে?
• একটি ফর্ম ক্ষেত্র পূরণ করতে অটোফিল দ্বারা কোন মানদণ্ড ব্যবহার করা হয়?
• অটোফিল দ্বারা কোন ক্ষেত্রগুলি পূরণ করা হয়নি?
• কেন একটি ফর্ম ক্ষেত্র অটোফিল দ্বারা পূরণ করা হয় না?

এই নিবন্ধটি Chrome DevTools-এর নতুন বৈশিষ্ট্যগুলির রূপরেখা দেয় এবং আপনি কীভাবে সেগুলি পরীক্ষা করতে এবং প্রতিক্রিয়া প্রদান করতে পারেন তা ব্যাখ্যা করে৷

অটোফিল কি?

ক্রোম ব্যবহারকারীদের ঠিকানা, অর্থপ্রদান এবং লগইন তথ্য পরিচালনা করতে সহায়তা করে, নিরাপদে ডেটার সেট সংরক্ষণ করে এবং ব্যবহারকারীকে পাঠ্য প্রবেশের প্রয়োজন ছাড়াই ফর্ম ক্ষেত্রগুলি পূরণ করার প্রস্তাব দেয়৷ এটি অটোফিল নামে পরিচিত।

আপনি যখন একটি ফর্ম জমা দেন তখন Chrome অটোফিল ডেটা সংরক্ষণ করার প্রস্তাব দেয়। মোবাইল:

পরবর্তীকালে, ক্রোম সংরক্ষিত ডেটা দিয়ে স্বয়ংক্রিয়ভাবে ফর্মগুলি পূরণ করার প্রস্তাব দেয়৷

মোবাইল:

ডেস্কটপে:

আপনি Chrome সেটিংসে আপনার অটোফিল ডেটা পরিচালনা করতে পারেন।

মোবাইল:

ডেস্কটপে:

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

এখানে একটি সহজ উদাহরণ:

Chrome DevTools দেখায় যে এখানে ফর্ম ফিল্ডে ব্রাউজারের জন্য অর্থপূর্ণ বৈশিষ্ট্য নেই। পরিবর্তে, এটি শুধুমাত্র n300 এর একটি name বৈশিষ্ট্য।

ক্ষেত্রটি স্ট্রাকচার্ড ডেটার সেটের একটি মানের সাথে সঙ্গতিপূর্ণ নয় যা এটিকে Chrome অটোফিলের জন্য উপযুক্ত করে তুলবে, তবে Chrome এখনও ব্যবহারকারীকে সাহায্য করতে পারে যদি এটি ভবিষ্যতে এই নামের একটি ফিল্ডের সম্মুখীন হয়।

নতুন Chrome DevTools অটোফিল বৈশিষ্ট্য পরীক্ষা করুন

অটোফিল সমস্যাগুলি ডিবাগ করতে সাহায্য করার জন্য Chrome DevTools সমস্যা প্যানেলের জন্য নতুন ক্ষমতা পরীক্ষা করছে।

আপনি Chrome ক্যানারিতে এই নতুন ক্ষমতাগুলি ব্যবহার করে দেখতে পারেন৷ চেক করুন সেটিংস > পরীক্ষা-নিরীক্ষা > DevTools-এ এলিমেন্ট প্যানেল DOM ট্রিতে একটি লঙ্ঘনকারী নোড বা বৈশিষ্ট্য হাইলাইট করে এবং অনুরোধ করা হলে DevTools পুনরায় লোড করে।

বিকল্পভাবে, আপনি AutofillEnableDevtoolsIssues পতাকা সহ কমান্ড লাইন থেকে Chrome ক্যানারি চালাতে পারেন:

• উইন্ডোজ: shell start chrome --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues
• ম্যাক: shell open -a "Google Chrome Canary" --args --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues

সমস্যাগুলি পরীক্ষা করতে, একটি ফর্ম আছে এমন একটি পৃষ্ঠায় DevTools সমস্যা প্যানেল খুলুন। form-problems.glitch.me শুরু করার জন্য একটি ভাল জায়গা।

আপনি দেখতে পারেন, এই ফর্ম একটি জগাখিচুড়ি! সেখানে:

• একটি id বা name বৈশিষ্ট্য ছাড়া ইনপুট ক্ষেত্র.
• ডুপ্লিকেট আইডি সহ উপাদান।
• একটি for সহ একটি <label> যা একটি এলিমেন্ট আইডির সাথে মেলে না।
• একটি খালি autocomplete বৈশিষ্ট্য সহ একটি ক্ষেত্র৷

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

প্রতিটি সমস্যার জন্য প্রভাবিত সম্পদ দেখতে লঙ্ঘন নোড ক্লিক করুন. এই ফর্মটিতে একটি for সহ আটটি লেবেল রয়েছে যা একটি ফর্ম ক্ষেত্রের id সাথে মেলে না৷

ফর্ম অ্যাক্সেসযোগ্যতা উন্নত করতে DevTools ব্যবহার করুন

DevTools অটোফিল অ্যাক্সেসিবিলিটি সমস্যাগুলিকেও হাইলাইট করতে পারে, যেমন একটি ফর্ম ফিল্ড যেখানে aria-labelledby অ্যাট্রিবিউট বা কোনও যুক্ত <label> নেই।

এই উদাহরণে, একটি <input> উপাদানের একটি মিল লেবেল আছে। এর অর্থ হল সহায়ক ডিভাইসগুলি উপাদানটির উদ্দেশ্য ঘোষণা করতে পারে। যাইহোক, নিম্নলিখিত উদাহরণে, কোনো মিলিত লেবেল বা aria-labelledby অ্যাট্রিবিউট পাওয়া যায়নি।

DevTools-এ নতুন অটোফিল ফিচারের বিষয়ে মতামত দিন

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

• crbug.com-এ ছাতা বাগ-এর মাধ্যমে আমাদের কাছে একটি পরামর্শ বা প্রতিক্রিয়া জমা দিন।
• DevTools থেকে একটি সমস্যা রিপোর্ট করুন: আরও বিকল্প > সাহায্য > একটি DevTools সমস্যা রিপোর্ট করুন ।
• @ChromeDevTools- এ টুইট করুন।

আরও খোঁজ

• ফর্ম শিখুন : আপনার ওয়েব ডেভেলপার দক্ষতা উন্নত করতে সাহায্য করার জন্য HTML ফর্ম সম্পর্কে একটি কোর্স। ফর্ম এবং স্বতঃপূরণের জন্য নতুন যে কারো জন্য আদর্শ।
• web.dev/tags/forms : অর্থপ্রদান, লগইন এবং ঠিকানা ফর্মের জন্য নির্দেশিকা, সেরা অনুশীলন এবং কোডল্যাব।