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

Sofia Emelianova
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 によって [自動入力] パネルが開きます。それ以外の場合は、[自動入力] パネルを手動で開きます。

自動入力データのオプションが選択されている。

データとそのマッピング

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

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

自動入力パネル。

[Issues] パネルで検出されたオートコンプリートの問題。