웹솔루션개발 25년 노하우! 해피CGI의 모든것

사이트에 대한 텍스트와 이미지정보를 자세하게 알려주는 크롬 확장프로그램입니다. 설치를 하면 브라우저 상단에 peeper아이콘이 생깁니다. 이제 확인하고 싶은 사이트에 이동하여 아이콘을 누르면 아래와같이 별도의 창이 뜨고 사이트에 대한 기본정보가 먼저 노출이 됩니다. . 이제 확인하고 싶은 요소를 브라우저에서 클릭하면 별도의 창에서 폰트 및 이미지에 대한 정보가 노출이 됩니다. 크롬 뿐많이 아닌 웨일브라우저에서도 설치가 잘되니 참고하세요 ^^ ​​

[F12]를 누르면 나오면 개발자도구는 무척 유용합니다. 개발자도구는 웹페이지의 구성요소를 확인할 수 있고 바로 코드를 삽입하거나 수정해서 변화된 페이지를 바로 볼 수 있습니다. 그러나 개발자도구는 css의 컬러값이 몇개가 사용되고 몇개의 이미지가 사용되는지 바로 확인할 수가 없습니다. 이러한 문제를 해결해줄수 있는 프로그램이 크롬의 확장 프로그램인 비주얼 인스펙터입니다. 팝업에서 구성요소 중 하나를 클릭하면 어떤 요소인지 알려주며 직접 수정도 할 수 있습니다. 색상은 물론 위치와 사이즈도 변경할 수 있습니다. 또한 이렇게 고쳐본 결과물을 이미지 파일로 받을 수도 있습니다.