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