تیم Chrome DevTools در حال ایجاد ویژگی‌های جدید اضافی برای کمک به شما در یافتن مشکلات فرم و اشکال‌زدایی تکمیل خودکار است.
در Chrome Canary در حال آزمایش ویژگی‌های جدیدی در DevTools هستیم که هدف آن کمک به توسعه‌دهندگان است تا بفهمند تکمیل خودکار فرم چگونه کار می‌کند و چرا گاهی اوقات شکست می‌خورد:
- چگونه تکمیل خودکار مرورگر مقادیر را برای تشکیل فیلدها ذخیره می کند؟
- تکمیل خودکار برای پر کردن فیلد فرم از چه معیارهایی استفاده می کند؟
- کدام فیلدها توسط تکمیل خودکار پر نشدند؟
- چرا یک فیلد فرم با تکمیل خودکار پر نمی شود؟
این مقاله به تشریح ویژگی‌های جدید در Chrome DevTools می‌پردازد، و توضیح می‌دهد که چگونه می‌توانید آنها را آزمایش کنید و بازخورد ارائه دهید.
تکمیل خودکار چیست؟
Chrome با ذخیره ایمن مجموعه ای از داده ها و پیشنهاد پر کردن فیلدهای فرم بدون نیاز کاربر به وارد کردن متن، به کاربران کمک می کند تا اطلاعات آدرس، پرداخت و ورود به سیستم را مدیریت کنند. که به عنوان تکمیل خودکار شناخته می شود.
Chrome پیشنهاد می‌کند هنگام ارسال فرم، داده‌های تکمیل خودکار را ذخیره کند. در موبایل:
متعاقباً، Chrome پیشنهاد می‌کند تا فرم‌ها را با داده‌های ذخیره‌شده به‌طور خودکار تکمیل کند.
در موبایل:
روی دسکتاپ:
می‌توانید داده‌های تکمیل خودکار خود را در تنظیمات Chrome مدیریت کنید.
در موبایل:
روی دسکتاپ:
همچنین ممکن است دیده باشید که Chrome برای فیلدهای ورودی که به آدرس، کارت اعتباری یا داده‌های ورود به سیستم مرتبط نیستند، پیشنهادهایی ارائه می‌دهد. علاوه بر ارائه تکمیل خودکار برای مجموعه‌ای از داده‌های ساختاریافته مانند آدرس و جزئیات پرداخت، Chrome به کاربران کمک می‌کند از وارد کردن مجدد داده‌ها برای فیلدهای تک فرمی که توسط تکمیل خودکار قابل مدیریت نیست، اجتناب کنند. وقتی فرمی دارای فیلدی با ویژگی نام است که Chrome قبلاً با آن مواجه شده است، Chrome می‌تواند مقادیری را پیشنهاد کند تا نیازی به وارد کردن مجدد داده‌ها نباشد.
در اینجا یک مثال ساده آورده شده است:
Chrome DevTools نشان می‌دهد که فیلد فرم در اینجا ویژگی‌هایی ندارد که برای مرورگر معنادار باشد. در عوض، این فقط یک ویژگی name n300 است.
این فیلد با مقداری در مجموعه‌ای از داده‌های ساختاریافته مطابقت ندارد که آن را برای تکمیل خودکار Chrome مناسب کند، اما Chrome همچنان می‌تواند به کاربر کمک کند اگر در آینده با فیلدی با این نام مواجه شود.
ویژگی‌های تکمیل خودکار Chrome DevTools جدید را آزمایش کنید
Chrome در حال آزمایش قابلیت‌های جدیدی برای پانل DevTools Issues است تا به رفع اشکالات تکمیل خودکار کمک کند.
می‌توانید این قابلیت‌های جدید را در Chrome Canary امتحان کنید. بررسی 
تنظیمات > آزمایش‌ها > 
یک گره یا ویژگی ناقض را در درخت DOM پانل عناصر در DevTools برجسته می کند و وقتی از شما خواسته شد DevTools را بارگیری مجدد می کند.
همچنین، می‌توانید Chrome Canary را از خط فرمان با پرچم AutofillEnableDevtoolsIssues اجرا کنید:
- Windows:
shell start chrome --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues - Mac:
shell open -a "Google Chrome Canary" --args --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues
برای بررسی مشکلات، پانل DevTools Issues را در صفحه ای که دارای فرم است باز کنید. form-problems.glitch.me مکان خوبی برای شروع است.
همانطور که می بینید، این فرم بهم ریخته است! وجود دارد:
- فیلدهای ورودی بدون مشخصه
idیاname. - عناصر با شناسه های تکراری.
- یک
<label>با ویژگیforکه با شناسه عنصر مطابقت ندارد. - فیلدی با ویژگی
autocompleteخالی.
ماوس را روی یک عنصر برجسته در درخت DOM نگه دارید و برای کسب اطلاعات بیشتر روی مشاهده مشکل کلیک کنید.
برای مشاهده منابع آسیب‌دیده برای هر موضوع، روی Violing node کلیک کنید. این فرم دارای هشت برچسب با ویژگی for است که با id فیلد فرم مطابقت ندارد.
از DevTools برای بهبود دسترسی به فرم استفاده کنید
DevTools همچنین می‌تواند مشکلات دسترسی تکمیل خودکار را برجسته کند، مانند فیلد فرمی که دارای ویژگی aria-labelledby یا <label> مرتبط نیست.
در این مثال، یک عنصر <input> دارای یک برچسب منطبق است. این بدان معنی است که دستگاه های کمکی می توانند هدف عنصر را اعلام کنند. با این حال، در مثال زیر، هیچ برچسب منطبقی یا ویژگی aria-labelledby یافت نشد.
در مورد ویژگی های تکمیل خودکار جدید در DevTools بازخورد ارائه دهید
از گزینه های زیر برای بحث در مورد ویژگی ها و تغییرات جدید در پست یا هر چیز دیگری مربوط به DevTools استفاده کنید:
- پیشنهاد یا بازخورد خود را از طریق باگ چتر در crbug.com برای ما ارسال کنید.
- گزارش یک مشکل از DevTools: گزینه های بیشتر > راهنما > گزارش مشکل DevTools .
- توییت در @ChromeDevTools .
اطلاعات بیشتر
- Learn Forms : دوره ای در مورد فرم های HTML برای کمک به شما در بهبود تخصص توسعه دهنده وب. ایده آل برای افرادی که تازه وارد فرم ها و تکمیل خودکار هستند.
- web.dev/tags/forms : راهنما، بهترین روش و کدها، برای فرم‌های پرداخت، ورود به سیستم و آدرس.