Chrome DevTools팀은 양식 문제를 찾고 자동 완성을 디버그하는 데 도움이 되는 새로운 기능을 추가로 빌드하고 있습니다.
Chrome Canary에서는 개발자가 양식 자동 완성의 작동 방식과 가끔 실패하는 이유를 이해하는 데 도움이 되는 DevTools의 새로운 기능을 테스트하고 있습니다.
- 브라우저 자동 완성은 저장된 값을 양식 필드에 매핑하는 방법
- 자동 완성에서 양식 필드를 채우는 데 사용하는 기준은 무엇인가요?
- 자동 완성으로 채워지지 않은 필드는 무엇인가요?
- 자동 완성으로 양식 필드가 채워지지 않는 이유는 무엇인가요?
이 도움말에서는 Chrome DevTools의 새로운 기능을 간략히 설명하고 이를 테스트하고 의견을 제공하는 방법을 설명합니다.
자동 완성이란 무엇인가요?
Chrome은 데이터 세트를 안전하게 저장하고 사용자가 텍스트를 입력하지 않아도 양식 필드를 채울 수 있도록 제공하여 사용자가 주소, 결제, 로그인 정보를 관리하는 데 도움을 줍니다. 이를 자동 완성이라고 합니다.
Chrome에서는 양식을 제출할 때 자동 완성 데이터를 저장할지 묻는 메시지를 표시합니다. 휴대기기에서는 다음 단계를 따르세요.
그러면 Chrome에서 저장된 데이터로 양식을 자동 완성할지 묻습니다.
휴대기기에서는 다음 단계를 따르세요.
데스크톱의 경우
Chrome 설정에서 자동 완성 데이터를 관리할 수 있습니다.
휴대기기에서는 다음 단계를 따르세요.
데스크톱의 경우
Chrome에서 주소, 신용카드, 로그인 데이터와 관련 없는 입력란에 대한 제안을 표시하는 경우도 있었을 수 있습니다. Chrome은 주소 및 결제 세부정보와 같은 구조화된 데이터 세트에 자동 완성을 제공할 뿐만 아니라 사용자가 자동 완성에서 처리할 수 없는 단일 양식 필드의 데이터를 다시 입력하지 않아도 되도록 지원합니다. 양식에 Chrome에서 이전에 접했던 이름 속성이 있는 필드가 있으면 Chrome에서 값을 제안할 수 있으므로 데이터를 다시 입력할 필요가 없습니다.
다음 예를 참조하세요.
Chrome DevTools에 표시된 대로 이 양식 필드에는 브라우저에 의미 있는 속성이 없습니다. 대신 n300의 name 속성일 뿐입니다.
이 필드는 Chrome 자동 완성에 적합하도록 구조화된 데이터 세트의 값과 일치하지 않지만, 나중에 이 이름의 필드가 발견되면 Chrome에서 사용자를 도울 수 있습니다.
새로운 Chrome DevTools 자동 완성 기능 테스트
Chrome에서는 자동 완성 글리치 디버깅에 도움이 되는 DevTools 문제 패널의 새로운 기능을 테스트하고 있습니다.
Chrome Canary에서 이 새로운 기능을 사용해 볼 수 있습니다. DevTools에서 
설정 > 실험 > 
요소 패널 DOM 트리에서 위반 노드 또는 속성을 강조 표시를 선택하고 메시지가 표시되면 DevTools를 새로고침합니다.
또는 명령줄에서 AutofillEnableDevtoolsIssues 플래그를 사용하여 Chrome Canary를 실행할 수 있습니다.
- Windows:
shell start chrome --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues - Mac:
shell open -a "Google Chrome Canary" --args --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues
문제를 확인하려면 양식이 있는 페이지에서 DevTools Issues(문제) 패널을 엽니다. form-problems.glitch.me에서 시작하는 것이 좋습니다.
보시다시피 이 양식은 엉망입니다. 다음과 같은 옵션이 있습니다.
id또는name속성이 없는 입력란- ID가 중복된 요소
- 요소 ID와 일치하지 않는
for속성이 있는<label> autocomplete속성이 비어 있는 필드
DOM 트리에서 강조 표시된 요소 위로 마우스를 가져가 문제 보기를 클릭하여 자세히 알아보세요.
위반 노드를 클릭하여 각 문제의 영향을 받는 리소스를 확인합니다. 이 양식에는 양식 필드의 id와 일치하지 않는 for 속성이 있는 라벨이 8개 있습니다.
DevTools를 사용하여 양식 접근성 개선
DevTools는 aria-labelledby 속성 또는 연결된 <label>가 없는 양식 필드와 같은 자동 완성 접근성 문제를 강조 표시할 수도 있습니다.
이 예에서 <input> 요소에는 일치하는 라벨이 있습니다. 즉, 보조 기기가 요소의 목적을 알릴 수 있습니다. 그러나 다음 예에서는 일치하는 라벨이나 aria-labelledby 속성을 찾을 수 없습니다.
DevTools의 새로운 자동 완성 기능에 관한 의견 보내기
게시물의 새로운 기능 및 변경사항 또는 DevTools와 관련된 다른 사항을 논의하려면 다음 옵션을 사용하세요.
- crbug.com의 범용 버그를 통해 제안사항이나 의견을 제출하세요.
- DevTools에서 문제 신고: 옵션 더보기 > 도움말 > DevTools 문제 신고
- @ChromeDevTools에 트윗하세요.
자세히 알아보기
- 양식 알아보기: 웹 개발자 전문성을 개선하는 데 도움이 되는 HTML 양식에 관한 과정입니다. 양식 및 자동 완성을 처음 사용하는 사용자에게 적합합니다.
- web.dev/tags/forms: 결제, 로그인, 주소 양식에 관한 안내, 권장사항, Codelab