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

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

Sam Dutton

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

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

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

自動入力とは

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

Chrome では、フォームの送信時に自動入力データを保存するかどうかを尋ねられます。モバイルでの操作:

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

その後、保存されたデータがフォームに自動入力されます。

モバイルでの操作:

パソコンの場合:

パソコンで住所フォームを自動入力する Chrome サービス

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

モバイルでの操作:

Chrome の設定（Android） 住所の編集

パソコンの場合:

chrome://settings/addresses ページ、2 つのサンプル アドレスが表示されている

住所、クレジット カード、ログインデータに関係のない入力フィールドの候補が提示される場合もあります。Chrome では、住所やお支払いの詳細などの構造化データのセットが自動入力されるほか、自動入力では処理できない単一フォーム項目のデータの再入力を回避できます。フォームに name 属性を含む項目があり、以前に Chrome で検出された場合は、値の候補が表示されるため、データを再入力する必要はありません。

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

Chrome では 1 つのフォーム項目で非構造化データの候補を

Chrome DevTools には、このフォーム フィールドにブラウザにとって意味のある属性がないことが示されています。n300 の name 属性です。

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

このフィールドが、Chrome の自動入力に適した構造化データのセットの値に対応していませんが、今後 Chrome でこの名前のフィールドが見つかった場合は、ユーザーを支援します。

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

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

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

Chrome DevTools の設定ページ。[Highlights a appropriate node ...]

または、コマンドラインから 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 が用意されています。