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

Sofia Emelianova

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

概要

Chrome の自動入力は、保存されている住所がウェブサイトのフォームに自動入力できる便利な機能です。DevTools の [自動入力] パネルで、フォーム フィールド、自動入力の予測値、保存済みデータ間のマッピングを検査できます。

Chrome に住所情報を保存する

デフォルトでは、ウェブフォームに入力すると、入力した住所情報をウェブフォームに保存するかどうかを尋ねられます。

このようなプロンプトが表示されない場合は、Chrome の右上で more_vert [Google Chrome のカスタマイズと制御] > [キー] > [パスワードと自動入力] > [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 によって [自動入力] パネルが開きます。それ以外の場合は、[自動入力] パネルを手動で開きます。

データとそのマッピング

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

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