Chrome 開發人員工具團隊正在開發其他新功能，協助您找出表單問題並對自動填入功能進行偵錯。
我們在 Chrome Canary 中測試 DevTools 的新功能，目的是協助開發人員瞭解表單自動填入功能的運作方式，以及為何有時會失敗：
- 瀏覽器自動填入功能如何將儲存的值對應至表單欄位？
- 自動填入功能會根據哪些條件填入表單欄位？
- 哪些欄位沒有透過自動填入功能填入？
- 為什麼系統未使用自動填入功能填入表單欄位？
本文將概略說明 Chrome 開發人員工具中的新功能，並說明如何測試這些功能及提供意見回饋。
什麼是自動填入功能？
Chrome 會安全地儲存資料組，並提供填寫表單欄位的功能，讓使用者不必輸入文字，就能管理地址、付款和登入資訊。這就是所謂的「自動填入」功能。
提交表單時，Chrome 會提供儲存自動填入資料的選項。使用行動裝置：
接著，Chrome 會使用已儲存的資料自動填寫表單。
使用行動裝置：
使用電腦：
你可以在 Chrome 設定中管理自動填入資料。
使用行動裝置：
使用電腦：
你也可能會發現，Chrome 會針對與地址、信用卡或登入資料無關的輸入欄位提供建議。除了為集合結構化資料 (例如地址和付款詳細資料) 提供自動填入功能，Chrome 還可協助使用者避免重新輸入單一表單欄位資料，因為這些欄位無法由自動填入功能處理。如果表單中有 Chrome 曾經遇到過的名稱屬性欄位，Chrome 就會建議值，讓您不必重新輸入資料。
以下提供一個簡單的範例：
Chrome 開發人員工具顯示，此處的表單欄位沒有對瀏覽器有意義的屬性。而是 n300 的 name 屬性。
這個欄位不對應於一組結構化資料中的值，因此不符合 Chrome 自動填入功能的使用方式，但如果 Chrome 日後遇到這個名稱的欄位，仍可協助使用者。
測試新的 Chrome 開發人員工具自動填入功能
Chrome 正在測試開發人員工具「Issues」面板的新功能，以便偵錯自動填入功能的異常情形。
你可以在 Chrome Canary 中試用這些新功能。勾選 
「設定」>「實驗」> 
在「開發人員工具」中，醒目顯示「元素」面板 DOM 樹狀結構中的違規節點或屬性，並在系統提示時重新載入「開發人員工具」。
或者，您也可以使用 AutofillEnableDevtoolsIssues 標記，從指令列執行 Chrome Canary：
- 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
如要檢查問題，請在含有表單的網頁上開啟開發人員工具的「Issues」面板。form-problems.glitch.me 是個不錯的起點。
如您所見，這個表單很混亂！包括：
- 輸入欄位未含
id或name屬性。 - 含有重複 ID 的元素。
<label>的for屬性與元素 ID 不符。- 含有空白
autocomplete屬性的欄位。
將滑鼠游標懸停在 DOM 樹狀圖中醒目顯示的元素上，然後按一下「View issue」，即可瞭解詳情。
按一下「違規節點」，即可查看每個問題的受影響資源。這個表單有八個標籤，其中 for 屬性與表單欄位的 id 不相符。
使用開發人員工具改善表單無障礙
開發人員工具也可以突顯自動填入功能的無障礙性問題，例如表單欄位沒有 aria-labelledby 屬性或相關聯的 <label>。
在這個範例中，<input> 元素有相符的標籤。這表示輔助裝置可以宣告元素的用途。不過，在下列範例中，系統找不到相符的標籤或 aria-labelledby 屬性。
針對開發人員工具中的新自動填入功能提供意見
請使用下列選項，討論文章中的新功能和變更，或任何與開發人員工具相關的內容：
- 透過 crbug.com 上的總體錯誤，向我們提交建議或意見回饋。
- 透過開發人員工具回報問題：依序點選「更多選項」 >「說明」 >「回報開發人員工具問題」。
- 在 Twitter 上傳送訊息給 @ChromeDevTools。
瞭解詳情
- 學習表單：HTML 表單課程，可協助您提升網頁開發人員專業知識。適合剛開始使用表單和自動填入功能的使用者。
- web.dev/tags/forms：提供付款、登入和地址表單的相關指南、最佳做法和程式碼研究室。