크롬 확장프로그램 비주얼 인스펙터 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > DESIGN > 유용한 사이트 > 크롬 확장프로그램 비주얼 인스펙터 상세정보

클라우드태그

Javascript

php

CSS

html

asp

API

jquery

mysql

image

Mobile

slide

게시판

메뉴

현재접속자 44명

크롬 확장프로그램 비주얼 인스펙터

해피팀

네티즌

소스분류

유용한 사이트

다운로드 횟수

0 회

간단설명

css의 컬러값, 이미지 종류 등을 바로 확인할 수 있도록 사용자 경험 분석 도구를 제공하는 비주얼 인스펙터

평가하기

[F12]를 누르면 나오면 개발자도구는 무척 유용합니다.

개발자도구는 웹페이지의 구성요소를 확인할 수 있고 바로 코드를 삽입하거나 수정해서 변화된 페이지를 바로 볼 수 있습니다.

그러나 개발자도구는 css의 컬러값이 몇개가 사용되고 몇개의 이미지가 사용되는지 바로 확인할 수가 없습니다.

이러한 문제를 해결해줄수 있는 프로그램이 크롬의 확장 프로그램인 비주얼 인스펙터입니다.

[비주얼 인스펙터 설치]

크롬에서 비주얼 인스펙터를 설치하시면 오른쪽 상단에 하늘색 아이콘이 생성될것입니다.

해당 아이콘을 클릭하면 위 이미지처럼 팝업이 나타납니다.

비주얼 인스펙터 분석 화면을 띄운 후, 마우스로 웹페이지를 클릭해보면

확인하는 화면에 빨간색 라인으로 영역의 경계가 표시되고 팝업에 분석 내용이 나타납니다.

웹페이지에서 해당 객체의 위치, 이미지 종류 및 사이즈, 컬러값 등 다양한 정보를 표시합니다.