مشکلات فرم را با Chrome DevTools پیدا کنید

تیم Chrome DevTools در حال ایجاد ویژگی‌های جدید اضافی برای کمک به شما در یافتن مشکلات فرم و اشکال‌زدایی تکمیل خودکار است.

سام داتون

در Chrome Canary در حال آزمایش ویژگی‌های جدیدی در DevTools هستیم که هدف آن کمک به توسعه‌دهندگان است تا بفهمند تکمیل خودکار فرم چگونه کار می‌کند و چرا گاهی اوقات شکست می‌خورد:

  • چگونه تکمیل خودکار مرورگر مقادیر را برای تشکیل فیلدها ذخیره می کند؟
  • تکمیل خودکار برای پر کردن فیلد فرم از چه معیارهایی استفاده می کند؟
  • کدام فیلدها توسط تکمیل خودکار پر نشدند؟
  • چرا یک فیلد فرم با تکمیل خودکار پر نمی شود؟

این مقاله به تشریح ویژگی‌های جدید در Chrome DevTools می‌پردازد، و توضیح می‌دهد که چگونه می‌توانید آنها را آزمایش کنید و بازخورد ارائه دهید.

تکمیل خودکار چیست؟

Chrome با ذخیره ایمن مجموعه ای از داده ها و پیشنهاد پر کردن فیلدهای فرم بدون نیاز کاربر به وارد کردن متن، به کاربران کمک می کند تا اطلاعات آدرس، پرداخت و ورود به سیستم را مدیریت کنند. که به عنوان تکمیل خودکار شناخته می شود.

Chrome پیشنهاد می‌کند هنگام ارسال فرم، داده‌های تکمیل خودکار را ذخیره کند. در موبایل:

سه اندروید تصاویر صفحه: یک فرم آدرس در Chrome، تکمیل خودکار کروم برای ذخیره آدرس و سپس نمایش داده می‌شود گفتگو برای ویرایش ورودی تکمیل خودکار جدید.

متعاقباً، Chrome پیشنهاد می‌کند تا فرم‌ها را با داده‌های ذخیره‌شده به‌طور خودکار تکمیل کند.

در موبایل:

روی دسکتاپ:

کروم برای تکمیل خودکار فرم آدرس در دسک‌تاپ پیشنهاد می‌کند

می‌توانید داده‌های تکمیل خودکار خود را در تنظیمات Chrome مدیریت کنید.

در موبایل:

تنظیمات کروم روشن است اندروید: ویرایش آدرس

روی دسکتاپ:

صفحه chrome://settings/addresses که دو آدرس نمونه را نشان می دهد

همچنین ممکن است دیده باشید که Chrome برای فیلدهای ورودی که به آدرس، کارت اعتباری یا داده‌های ورود به سیستم مرتبط نیستند، پیشنهادهایی ارائه می‌دهد. علاوه بر ارائه تکمیل خودکار برای مجموعه‌ای از داده‌های ساختاریافته مانند آدرس و جزئیات پرداخت، Chrome به کاربران کمک می‌کند از وارد کردن مجدد داده‌ها برای فیلدهای تک فرمی که توسط تکمیل خودکار قابل مدیریت نیست، اجتناب کنند. وقتی فرمی دارای فیلدی با ویژگی نام است که Chrome قبلاً با آن مواجه شده است، Chrome می‌تواند مقادیری را پیشنهاد کند تا نیازی به وارد کردن مجدد داده‌ها نباشد.

در اینجا یک مثال ساده آورده شده است:

ارائه کروم پیشنهادهایی برای داده های بدون ساختار در یک فیلد فرم واحد

Chrome DevTools نشان می‌دهد که فیلد فرم در اینجا ویژگی‌هایی ندارد که برای مرورگر معنادار باشد. در عوض، این فقط یک ویژگی name n300 است.

Chrome DevTools نشان دادن اطلاعات در مورد داده های بدون ساختار در یک فرم، همانطور که در مثال قبلی نشان داده شده است: a ورودی تکی که فقط دارای ویژگی های type=text و name=n300 است.

این فیلد با مقداری در مجموعه‌ای از داده‌های ساختاریافته مطابقت ندارد که آن را برای تکمیل خودکار Chrome مناسب کند، اما Chrome همچنان می‌تواند به کاربر کمک کند اگر در آینده با فیلدی با این نام مواجه شود.

ویژگی‌های تکمیل خودکار Chrome DevTools جدید را آزمایش کنید

Chrome در حال آزمایش قابلیت‌های جدیدی برای پانل DevTools Issues است تا به رفع اشکالات تکمیل خودکار کمک کند.

می‌توانید این قابلیت‌های جدید را در Chrome Canary امتحان کنید. بررسی کنید تنظیمات. تنظیمات > آزمایش‌ها > چک باکس. یک گره یا ویژگی ناقض را در درخت DOM پانل عناصر در DevTools برجسته می کند و وقتی از شما خواسته شد DevTools را بارگیری مجدد می کند.

Chrome 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 مکان خوبی برای شروع است.

Chrome DevTools نشان دادن مشکل با ویژگی for یک عنصر فرم.

همانطور که می بینید، این فرم بهم ریخته است! وجود دارد:

  • فیلدهای ورودی بدون مشخصه id یا name .
  • عناصر با شناسه های تکراری.
  • یک <label> با ویژگی for که با شناسه عنصر مطابقت ندارد.
  • فیلدی با ویژگی autocomplete خالی.

ماوس را روی یک عنصر برجسته در درخت DOM نگه دارید و برای کسب اطلاعات بیشتر روی مشاهده مشکل کلیک کنید.

موضوع گسترش یافته در Chrome DevTools: استفاده نادرست از برچسب برای ویژگی.

برای مشاهده منابع آسیب‌دیده برای هر موضوع، روی Violing node کلیک کنید. این فرم دارای هشت برچسب با ویژگی for است که با id فیلد فرم مطابقت ندارد.

از DevTools برای بهبود دسترسی به فرم استفاده کنید

DevTools همچنین می‌تواند مشکلات دسترسی تکمیل خودکار را برجسته کند، مانند فیلد فرمی که دارای ویژگی aria-labelledby یا <label> مرتبط نیست.

Chrome DevTools پانل دسترس‌پذیری، نشان می‌دهد که یک برچسب برای عنصر ورودی در یک فرم پیدا شده است.

در این مثال، یک عنصر <input> دارای یک برچسب منطبق است. این بدان معنی است که دستگاه های کمکی می توانند هدف عنصر را اعلام کنند. با این حال، در مثال زیر، هیچ برچسب منطبقی یا ویژگی aria-labelledby یافت نشد.

Chrome DevTools پانل دسترس‌پذیری، نشان می‌دهد که هیچ برچسب منطبقی یا ویژگی aria-labelledby برای یک یافت نشد عنصر ورودی در یک فرم

در مورد ویژگی های تکمیل خودکار جدید در DevTools بازخورد ارائه دهید

از گزینه های زیر برای بحث در مورد ویژگی ها و تغییرات جدید در پست یا هر چیز دیگری مربوط به DevTools استفاده کنید:

  • پیشنهاد یا بازخورد خود را از طریق باگ چتر در crbug.com برای ما ارسال کنید.
  • گزارش یک مشکل از DevTools: گزینه های بیشتر > راهنما > گزارش مشکل DevTools .
  • توییت در @ChromeDevTools .

بیشتر بدانید

  • Learn Forms : دوره ای در مورد فرم های HTML برای کمک به شما در بهبود تخصص توسعه دهنده وب. ایده آل برای افرادی که تازه وارد فرم ها و تکمیل خودکار هستند.
  • web.dev/tags/forms : راهنما، بهترین روش و کدها، برای فرم‌های پرداخت، ورود به سیستم و آدرس.