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 Issues 패널의 새로운 기능을 테스트하고 있습니다.
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가 중복된 요소
<label>의for속성이 요소 ID와 일치하지 않습니다.- 빈
autocomplete속성이 있는 필드
DOM 트리에서 강조표시된 요소 위로 마우스를 가져간 후 문제 보기를 클릭하여 자세히 알아보세요.
노드 위반을 클릭하여 각 문제와 관련하여 영향을 받는 리소스를 확인합니다. 이 양식에 for 속성이 포함된 라벨이 8개 있으며 이 속성은 양식 필드의 id와 일치하지 않습니다.
DevTools를 사용하여 양식 접근성 향상
또한 DevTools는 aria-labelledby 속성 또는 연결된 <label>가 없는 양식 필드와 같은 자동 완성 접근성 문제를 강조 표시할 수 있습니다.
이 예에서 <input> 요소에는 일치하는 라벨이 있습니다. 즉, 보조 기기가 요소의 용도를 알릴 수 있습니다. 그러나 다음 예에서는 일치하는 라벨 또는 aria-labelledby 속성을 찾지 못했습니다.
DevTools의 새로운 자동 완성 기능에 관한 의견 보내기
게시물에서 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 항목에 대해 논의하려면 다음 옵션을 사용합니다.
- crbug.com의 상위 버그를 통해 제안 또는 의견을 제출하세요.
- DevTools에서 문제 신고: 옵션 더보기 > 도움말 > DevTools 문제 신고
- @ChromeDevTools로 트윗을 보냅니다.
자세히 알아보기
- 양식 알아보기: 웹 개발자의 전문성을 향상시키는 데 도움이 되는 HTML 양식에 관한 과정입니다. 양식과 자동 완성을 처음 사용하는 모든 사용자에게 적합합니다.
- web.dev/tags/forms: 결제, 로그인, 주소 양식에 대한 안내, 권장사항, Codelab입니다.