Spacing Palette Overlay 용 Google Chrome

개발자를 위한 효율적인 간격 시각화 도구

Spacing Palette Overlay는 웹 페이지의 여백, 패딩 및 간격 크기를 명확하게 시각화하여 개발자를 지원하기 위해 설계된 Chrome 확장 프로그램입니다. 이 도구는 여백 검사를 위해 DevTools를 탐색할 필요를 없애고 직관적인 색상 코드 오버레이를 통해 빠른 검사를 가능하게 합니다. 오버레이는 픽셀 값을 서로 다른 색상 계열로 분류합니다: 짝수에 대해 주황색에서 빨간색, 4 또는 8의 배수에 대해 노란색-녹색, 홀수에 대해 연한 파란색에서 인디고까지입니다. 오버레이 위에 마우스를 올리면 특정 여백 값을 표시하는 툴팁이 나타나 검사를 향상시킵니다.

이 확장 프로그램은 픽셀 값과 해당 여백, 패딩 및 간격 수를 나열하는 플로팅 메뉴를 특징으로 하여 여백 일관성을 쉽게 추적할 수 있도록 합니다. 사용자는 오버레이에 픽셀 레이블을 표시하기 위해 레이블 모드를 활성화하여 여백이 쌓여 있을 때도 가독성을 보장합니다. 컨텍스트 메뉴는 확장 프로그램과 모드 전환을 쉽게 전환할 수 있게 하여 디자인 무결성을 유지하는 데 집중하는 웹 디자이너, 프론트엔드 개발자 및 QA 팀을 위한 원활한 경험을 제공합니다.