找出 Chrome 開發人員工具的表單問題

Chrome 開發人員工具團隊致力打造其他新功能，協助您找出表單問題及偵錯自動填入功能。

Sam Dutton

我們正在 Chrome Canary 中為開發人員工具測試新功能，以協助開發人員瞭解表單自動填入功能的運作方式，以及有時失敗的原因：

  • 瀏覽器自動填入功能如何將儲存的值對應至表單欄位？
  • 自動填入功能填寫表單時會使用哪些條件？
  • 自動填入功能未填入哪些欄位？
  • 為什麼自動填入功能沒有填寫表單？

本文將概述 Chrome 開發人員工具的新功能，並說明測試這些功能和提供意見回饋的方法。

什麼是「自動填入」？

Chrome 可安全地儲存多組資料集，並讓使用者自行填寫表單欄位，讓使用者不必輸入文字，就能管理地址、付款和登入資訊。這就是所謂的自動填入

在你提交表單時，Chrome 會詢問是否儲存自動填入資料。使用行動裝置：

三個 Android 螢幕截圖：Chrome 中的地址表單，Chrome 自動填入功能會儲存地址，再顯示對話方塊，用於編輯新的自動填入項目。

隨後 Chrome 就會根據已儲存的資料自動填入表單內容。

使用行動裝置：

使用電腦：

Chrome 在電腦上顯示自動填入地址表單的選項

你可以在 Chrome 設定中管理自動填入資料。

使用行動裝置：

Android 上的 Chrome 設定：編輯地址

使用電腦：

chrome://settings/addresses 頁面，顯示兩個範例地址

您可能也會看到 Chrome 針對與地址、信用卡或登入資料無關的輸入欄位提供建議。除了提供結構化資料組合的自動填入功能 (例如地址和付款資料)，Chrome 也有助於使用者避免重新輸入「單一」表單欄位無法由自動填入功能處理的資料。如果表單含有 Chrome 先前使用過的名稱屬性欄位，Chrome 可以提供建議值，這樣你就不必重新輸入資料。

以下提供一個簡易範例：

Chrome 在單一表單欄位中提供非結構化資料的建議

Chrome 開發人員工具顯示，這裡的表單欄位沒有對瀏覽器有意義的屬性。而是 n300 的 name 屬性。

Chrome 開發人員工具會以表單形式顯示非結構化資料的相關資訊，如上例所示：只有一個屬性的 type=text 和 name=n300。

這個欄位並不會對應一組結構化資料中的值，該值適合用於 Chrome 自動填入功能，但 Chrome 日後如有包含這個名稱的欄位，仍可協助使用者解決問題。

測試新的 Chrome 開發人員工具自動填入功能

Chrome 正在測試開發人員工具的「Issues」面板新功能，以便對自動填入功能故障進行偵錯。

您可以在 Chrome Canary 中試用這些新功能。檢查 [設定]。 設定 > 實驗 > 核取方塊。 在開發人員工具面板的 DOM 樹狀結構中醒目顯示違規的節點或屬性，並在出現提示時重新載入開發人員工具。

Chrome 開發人員工具設定頁面，顯示「醒目顯示違規的節點 ...」

或者，您也可以在指令列中加上 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

如要檢查問題，請在含有表單的頁面上開啟 DevTools 的「Issues」面板。form-problems.glitch.me 很適合從此著手。

Chrome 開發人員工具會顯示表單元素的屬性相關問題。

如您所見，這個表單一團亂！你會看到以下問題：

  • 沒有 id 或 name 屬性的輸入欄位。
  • 具有重複 ID 的元素。
  • <label> 的 for 屬性與元素 ID 不符。
  • 含有空白 autocomplete 屬性的欄位。

將滑鼠遊標懸停在 DOM 樹狀結構中醒目顯示的元素上，然後按一下「查看問題」瞭解詳情。

更棒的是，Chrome 開發人員工具：屬性的標籤使用方式有誤。

按一下「Violating node」(違規節點)，查看每個問題受影響的資源。這份表單中有八個標籤的 for 屬性與表單欄位的 id 不符。

使用開發人員工具改善表單無障礙體驗

開發人員工具也可以醒目顯示自動填入的無障礙功能問題，例如表單欄位沒有 aria-labelledby 屬性或相關聯的 <label>。

Chrome 開發人員工具的無障礙面板，顯示已找到表單輸入元素的標籤。

在這個範例中，<input> 元素具有相符的標籤。這表示輔助裝置可以朗讀元素的用途。但在以下範例中，找不到相符的標籤或 aria-labelledby 屬性。

Chrome 開發人員工具的「無障礙設定」面板顯示，系統找到表單的輸入元素沒有相符的標籤或 aria-labelledby 屬性。

針對開發人員工具中的全新自動填入功能提供意見

您可以使用下列選項，討論發布的新功能和異動，或與開發人員工具相關的任何其他項目：

  • 透過 crbug.com 的綜合錯誤向我們提交建議或意見回饋。
  • 透過開發人員工具回報問題：依序點選「更多選項」 >「說明」 >「回報開發人員工具問題」。
  • 在 @ChromeDevTools 張貼推文。

瞭解詳情

  • Learn Forms：這門課程介紹 HTML 表單，協助您提升網頁程式開發人員的專業知識。適用於剛填寫表單和自動填入功能的新手。
  • web.dev/tags/forms：適用於付款、登入和地址表單的指南、最佳做法和程式碼研究室。