自動入力: 保存した住所の検査とデバッグ

Sofia Emelianova

[自動入力] パネルを使用して、Chrome に保存されている住所情報を検査してデバッグします。

概要

Chrome の自動入力を使用すると、保存した住所を使ってウェブサイトのフォームに自動的に入力できます。DevTools の [自動入力] パネルでは、フォーム フィールド、予測された自動入力値、保存されたデータ間のマッピングを検査できます。

住所情報を Chrome に保存する

デフォルトでは、ウェブフォームに記入して送信する際に、住所情報を保存するかどうかを確認するメッセージが表示されます。

そのようなメッセージが表示されない場合は、Chrome の右上にあるmore_vert [Google Chrome の設定] > key [パスワードと自動入力] > location_on [住所など] に移動し、[toggle_on 住所を保存して入力] をオンにします。新しい住所を追加することもできます。

住所データを保存しておらず、保存したくない場合は、[自動入力] パネルで提供されているテスト住所データを使用できます。

自動入力パネルを開く

デフォルトでは、DevTools が開いている場合や、ウェブサイトでフォームに自動入力を行うと、[自動入力] パネルが自動的に開きます。この機能をオフにするには、パネルを手動で開き、[check_box_outline_blank このパネルを自動的に開く] チェックボックスをオフにします。

[自動入力] パネルを手動で開くには:

1. DevTools を開きます。

2. 以下のボタンを押してコマンド メニューを開きます。

   • macOS: Command+Shift+P
   • Windows、Linux、ChromeOS: Ctrl+Shift+P

   

3. 「autofill」と入力し、[自動入力を表示] を選択して Enter キーを押します。

   デフォルトでは、DevTools ウィンドウの下部にあるドロワーにパネルが開きます。上部に移動することもできます。

または、次の方法で [自動入力] パネルを開くこともできます。

• 上部にあるアクションバーで、double_arrow [その他のパネル] をクリックし、プルダウン リストから [自動入力] を選択します。
• 右上のmore_vert [DevTools のカスタマイズと制御] > [その他のツール] > [自動入力] を選択します。

自動入力データを検査する

自動入力データを検査するには:

1. Chrome で自動入力がオンになっていて、住所情報が保存されていることを確認します。または、次のセクションで説明するように、テスト用住所データを使用することもできます。
2. たとえば、こちらのデモページで DevTools を開きます。
3. デモページの住所ウェブフォームで、フォーム フィールドにフォーカスします。自動入力データのオプションを含むプルダウン メニューが表示されます。
4. メニューからオプションを選択します。自動入力によって保存されたデータがフォームに入力され、自動開くがオンになっている場合は、DevTools の [自動入力] パネルが開きます。それ以外の場合は、[自動入力] パネルを手動で開きます。

テスト用住所データを使用する

住所データを保存しておらず、保存したくない場合は、[自動入力] パネルで提供されるテストデータを使用できます。

テストデータを使用するには:

1. [自動入力] パネルを開き、パネルの上部にある [check_box 自動入力メニューにテスト住所データを表示する] をオンにします。
2. ページで住所フォーム ファイルを右クリックし、[デベロッパー ツール] メニューのオプションのいずれかを選択します。

データとそのマッピング

[自動入力] パネルには、フォーム フィールドに挿入されたデータと、次の間のマッピングを含む表が表示されます。

• ページで検出されたフォームの項目。
• 自動入力の予測値: 自動入力がヒューリスティックを使用して決定します。
• 自動入力が認識したフィールドに挿入された値（存在する場合）。