Chrome DevTools を使用してフォームの問題を見つける

Chrome DevTools チームは、フォームの問題の検出と自動入力のデバッグに役立つ新機能を追加で開発しています。

Sam Dutton

Chrome Canary では、フォーム自動入力の仕組みと、自動入力が失敗する理由をデベロッパーが把握できるようにする目的で、DevTools の新しい機能をテストしています。

  • ブラウザの自動入力は、保存された値をフォームのフィールドにどのようにマッピングしますか？
  • 自動入力でフォーム フィールドに入力する際の条件は何ですか？
  • 自動入力で入力されなかった項目はどれですか？
  • フォーム項目に自動入力されないのはなぜですか？

この記事では、Chrome DevTools の新機能の概要と、新機能をテストしてフィードバックを提供する方法を説明します。

自動入力とは

Chrome では、データセットを安全に保存し、ユーザーがテキストを入力しなくてもフォーム フィールドに入力できるようにすることで、ユーザーが住所、支払い情報、ログイン情報を管理できるようにしています。これは自動入力と呼ばれます。

Chrome では、フォームを送信する際に自動入力データを保存するよう求めるメッセージが表示されます。モバイルでの操作:

Android のスクリーンショット 3 枚: Chrome の住所フォーム、住所の保存を提案する Chrome 自動入力、新しい自動入力エントリを編集するためのダイアログの表示。

その後、保存したデータを使用してフォームを自動入力するよう Chrome から提案されます。

モバイルでの操作:

パソコンの場合:

パソコン版 Chrome で住所フォームの自動入力を案内する

自動入力データは Chrome の設定で管理できます。

モバイルでの操作:

Android 版 Chrome の設定: 住所の編集

パソコンの場合:

2 つの住所のサンプルが表示された chrome://settings/addresses ページ

また、住所、クレジット カード、ログイン データに関連しない入力フィールドの候補が Chrome に表示されることもあります。Chrome では、住所や支払い情報などの構造化データのセットに対して自動入力を提供しているほか、自動入力で処理できない単一のフォーム フィールドのデータの再入力を回避できるようにしています。フォームに、Chrome が以前に遭遇した name 属性を持つフィールドがある場合、Chrome は値を提案できるため、データを再入力する必要はありません。

たとえば、次のような例が考えられます。

1 つのフォーム フィールドで非構造化データの候補を提供する Chrome

Chrome デベロッパー ツールは、このフォーム フィールドにブラウザにとって意味のある属性がないことを示しています。代わりに、n300 の name 属性です。

前の例のように、フォーム内の非構造化データに関する情報を表示する Chrome DevTools（type=text と name=n300 の属性のみを持つ単一の入力）。

このフィールドは、Chrome の自動入力に適した構造化データセット内の値に対応していませんが、今後、この名前のフィールドが検出された場合、Chrome はユーザーをサポートできます。

Chrome DevTools の新しい自動入力機能をテストする

Chrome では、自動入力のグリッチのデバッグに役立つ、DevTools の [問題] パネルの新しい機能をテストしています。

これらの新機能は Chrome Canary で試すことができます。DevTools で 設定] をタップします。 [設定] > [試験運用版] > チェックボックス。 [要素パネルの DOM ツリーで違反しているノードまたは属性をハイライト表示] をオンにして、プロンプトが表示されたら DevTools を再読み込みします。

Chrome DevTools の設定ページ。[違反ノード ... をハイライト表示] が表示されています

または、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 から始めることをおすすめします。

フォーム要素の for 属性に関する問題を示す Chrome DevTools。

ご覧のとおり、このフォームは混乱しています。次のものがあります。

  • id 属性または name 属性のない入力フィールド。
  • ID が重複している要素。
  • 要素 ID と一致しない for 属性を持つ <label>。
  • autocomplete 属性が空のフィールド。

DOM ツリーでハイライト表示された要素にカーソルを合わせ、[問題を表示] をクリックして詳細を確認します。

Chrome DevTools で問題を拡張: 属性のラベルの誤った使用。

[違反ノード] をクリックして、各問題の影響を受けるリソースを表示します。このフォームには、フォーム フィールドの id と一致しない for 属性を持つラベルが 8 つあります。

DevTools を使用してフォームのユーザー補助機能を改善する

DevTools では、aria-labelledby 属性または関連する <label> がないフォーム フィールドなど、自動入力のユーザー補助に関する問題もハイライト表示できます。

フォーム内の入力要素のラベルが検出されたことを示す、Chrome DevTools のユーザー補助パネル。

この例では、<input> 要素に一致するラベルがあります。つまり、支援デバイスは要素の目的を読み上げることができます。ただし、次の例では、一致するラベルまたは aria-labelledby 属性が見つかりません。

Chrome DevTools の [ユーザー補助] パネル。フォーム内の入力要素に一致するラベルまたは aria-labelledby 属性が見つからないことを示しています。

DevTools の新しい自動入力機能に関するフィードバックを送信する

投稿の新しい機能や変更点、DevTools に関連するその他の内容について説明するには、次のオプションを使用します。

  • crbug.com の傘バグから、ご提案やフィードバックを送信してください。
  • DevTools から問題を報告する: [その他アイコン] > [ヘルプ] > [DevTools の問題を報告]
  • @ChromeDevTools にツイートします。

補足説明

  • フォームの学習: ウェブ デベロッパーとしての専門知識を深めるのに役立つ HTML フォームに関するコースです。フォームと自動入力を初めて使用する方に最適です。
  • web.dev/tags/forms: 支払いフォーム、ログイン フォーム、住所フォームに関するガイダンス、ベスト プラクティス、Codelab。