자동 완성 패널을 사용하여 Chrome에 저장된 주소 정보를 검사하고 디버그합니다.
개요
Chrome 자동 완성은 저장된 주소로 웹사이트의 양식을 자동으로 채울 수 있는 편리한 방법을 제공합니다. DevTools의 자동 완성 패널을 사용하면 양식 필드, 예측된 자동 완성 값, 저장된 데이터 간의 매핑을 검사할 수 있습니다.
Chrome에 주소 정보 저장하기
기본적으로 Chrome에서는 웹 양식을 제출할 때 양식에 입력한 주소 정보를 저장할지 묻는 메시지를 표시합니다.
이러한 메시지가 표시되지 않으면 Chrome의 오른쪽 상단에서 Google Chrome 맞춤설정 및 제어 > 비밀번호 및 자동 완성 > 주소 등으로 이동하여 주소 저장 및 자동 완성을 사용 설정합니다. 여기에서 새 주소를 추가할 수도 있습니다.
주소 데이터가 저장되어 있지 않거나 저장하고 싶지 않다면 자동 완성 패널에서 제공하는 테스트 주소 데이터를 사용할 수 있습니다.
자동 완성 패널 열기
기본적으로 자동 완성 패널은 DevTools가 열려 있고 웹사이트에서 양식을 자동 완성하면 자동으로 열립니다. 이 기능을 사용 중지하려면 패널을 수동으로 열고 이 패널 자동으로 열기 체크박스를 선택 해제합니다.
자동 완성 패널을 수동으로 열려면 다음 단계를 따르세요.
- DevTools를 엽니다.
다음을 눌러 명령어 메뉴를 엽니다.
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
autofill를 입력하고 자동 완성 표시를 선택한 다음 Enter 키를 누릅니다.DevTools는 기본적으로 DevTools 창 하단의 창에 패널을 엽니다. 상단으로 이동할 수도 있습니다.
또는 다음과 같은 방법으로 자동 완성 패널을 열 수 있습니다.
- 상단의 작업 표시줄에서 패널 더보기를 클릭하고 드롭다운 목록에서 자동 완성을 선택합니다.
- 오른쪽 상단에서 DevTools 맞춤설정 및 제어 > 도구 더보기 > 자동 완성을 선택합니다.
자동 완성 데이터 검사
자동 완성 데이터를 검사하려면 다음 안내를 따르세요.
- Chrome에서 자동 완성이 사용 설정되어 있고 주소 정보가 저장되어 있는지 확인하세요. 또는 다음 섹션에 설명된 대로 테스트 주소 데이터를 사용할 수 있습니다.
- 예를 들어 이 데모 페이지에서 DevTools를 엽니다.
- 데모 페이지의 주소 웹 양식에서 양식 입력란에 포커스를 맞춥니다. Chrome에 데이터 자동 완성 옵션이 있는 드롭다운 메뉴가 표시됩니다.
- 메뉴에서 옵션을 선택합니다. 자동 완성은 저장된 데이터로 양식을 채우고, 자동 열기가 사용 설정된 경우 DevTools는 자동 완성 패널을 엽니다. 또는 자동 완성 패널을 수동으로 엽니다.
테스트 주소 데이터 사용
주소 데이터가 저장되어 있지 않거나 저장하고 싶지 않은 경우 자동 완성 패널에서 제공하는 테스트 데이터를 사용할 수 있습니다.
테스트 데이터를 사용하려면 다음 단계를 따르세요.
- 자동 완성 패널을 열고 패널 상단의 자동 완성 메뉴에 테스트 주소 데이터 표시를 사용 설정합니다.
- 페이지에서 제출된 주소 양식을 마우스 오른쪽 버튼으로 클릭하고 개발자 도구 메뉴에서 옵션 중 하나를 선택합니다.
데이터 및 매핑
자동 완성 패널에는 양식 필드에 삽입된 데이터와 다음 간의 매핑이 포함된 표가 표시됩니다.
- 페이지에서 양식 필드가 감지되었습니다.
- 예측된 자동 완성 값. 자동 완성이 휴리스틱을 사용하여 결정합니다.
- 자동 완성이 인식한 필드에 삽입한 값입니다(있는 경우).
