F12키나 Ctrl+Shift+i을 누르면 개발자 도구가 나오는 것은 이쪽에서 일하는 사람은 다 알 것이다. 개발자 도구는 웹페이지의 구성요소를 확인할 수 있고, 바로 코드를 삽입하거나 수정해서 변화된 페이지를 바로 볼 수 있다. UI개발자라면 이 페이지에서는 CSS의 칼라값이 몇 개가 사용되고 몇개의 이미지가 사용 되는지 바로 확인할 수가 없다. 이 문제를 해결 해줄 수 있는 프로그램이 비주얼 인스펙터다.
구글 크롬 확장프로그램으로 이동

Visual Inspector 유투브 동영상 보기

예전에 CSS 사용빈도수를 보려고 할 때는 CSS Dig를 사용했었다. CSS Dig에 대한 포스팅은 예전에도 올렸었다. CSS Dig 글 보러가기

비주얼 인스펙터 소개 페이지 갈무리

비주얼 인스펙터 소개 페이지 갈무리

비주얼 인스펙터 소개 페이지 갈무리

비주얼 인스펙터 소개 페이지 갈무리

비주얼 인스펙터 소개 페이지 갈무리

비주얼 인스펙터 소개 페이지 갈무리

비주얼 인스펙터 소개 페이지 갈무리

비주얼 인스펙터 소개 페이지 갈무리

웹 사이트의 색상 구성, 글꼴, 이미지 등을 한눈에 확인할 수 있게 보여주는 도구이다.

다음 사이트 뉴스박스 색상을 바꿔보았다.

개발자 도구와 같이 구성요소 중 어떤 요소인지 파악이 가능하며, 직접 수정할 수 있다. 위치, 사이즈, 색상, 정렬 등 수정 모두 가능하다. 그리고 수정한 결과물을 이미지 파일로 받을 수 있다.

다른 확장프로그램