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 문제 패널을 엽니다. 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