CSS 정의되지 않은 변수 확인기
CSS 정의되지 않은 변수 확인기는 Google Chrome의 Devtools 확장 프로그램으로, 정의되지 않은 CSS 변수의 사용을 감지하는 데 도움이 됩니다. 사용자 정의 속성/변수를 사용하여 CSS를 작성하는 경우, 이 도구는 완벽합니다. 이 도구는 Chrome 개발자 도구에 탭을 추가하여 "var()" 표현식 내에서 사용된 정의되지 않은 CSS 변수를 확인할 수 있도록 합니다.
이 확장 프로그램은 스타일시트와 인라인 스타일 속성 모두를 분석하며, 결과를 사용자 친화적인 테이블로 표시하고 개발자 도구의 Elements 탭 내에서 문제가 있는 요소로 연결하는 링크를 제공합니다. 확장 프로그램을 사용하려면 Google Chrome에서 웹사이트를 열고 개발자 도구를 열고 "CSS Undefined Variable Checker" 탭으로 이동하면 됩니다. "정의되지 않은 변수 확인" 버튼을 클릭하면 분석이 시작되고 테이블에 발견된 정의되지 않은 CSS 변수가 표시됩니다.
결과 테이블에는 정의되지 않은 변수의 이름, 발견된 스타일시트 또는 인라인 스타일, 그리고 페이지에서 사용된 요소가 제공됩니다. 테이블의 링크를 클릭하면 개발자 도구의 Elements 탭에서 문제가 있는 요소가 강조 표시되어 정의되지 않은 변수를 찾기 쉬워집니다.
이 확장 프로그램은 스타일시트 정보에 액세스하기 위한 API에 의존하며, 이는 Cross-Origin Resource Sharing에 의해 제한됩니다. 필요한 액세스 헤더가 없는 다른 출처의 스타일시트는 분석되지 않습니다. 그러나 이는 확장 프로그램이 다른 API에 액세스할 수 있는 스타일을 분석하는 능력에는 영향을 주지 않습니다.
관심이 있는 분들을 위해, 이 확장 프로그램 뒤에 있는 분석 로직은 "npm" 패키지로도 사용할 수 있습니다.
