웹 개발자를 위한 크롬 확장프로그램 Web Developer 활용하기

웹 개발자를 위한 크롬 확장 프로그램 Web Developer 활용하기

구글 크롬 브라우저는 크롬 안에서 실행될 수 있는 여러 가지 확장 프로그램 설치를 지원하고 있다. 계산기, 시계, 캔린더 등 기본 프로그램과 문서, 스프레드시트, 프레젠테이션 등 오피스 도구, 화면 캡처, 소셜 연결, 채팅 등 다 확인하지 못할 만큼 수만은 확장 프로그램을 대부분 무료로 제공하고 있다는 것이 얼마나 좋은 일인지 감사할 따름이다.

 

 

이 중에서 웹 개발자를 위한 확장 프로그램이 있어서 소개하려고 한다. 예전 Microsoft 익스플로러에는 기본으로 있었던 기능인데 크롬은 바로 확인할 수 없어서 불편했던 웹에서 보이는 이미지의 크기와 경로는 확인할 수 있는 프로그램이다. 이 확장 프로그램에는 이미지 정보에 더 많은 기능이 있지만 이번에는 이미지 정보를 확인하는 용도로만 설치해 봅니다.

크롬의 확장기능은 사이트에서 다운로드하여서 실행파일로 설치되는 것이 아니라 Chrome 웹 스토어에서 간단하게 크롬 속으로 기능이 포함되게 되도록 설계되어 있다.

설치를 위해 Chrome 웹 스토어 ( https://chrome.google.com/webstore )에 방문한다.

URL 을 클릭해서 들어갈 수도 있지만 언제나 외울 순 없으니 크롬 메뉴에서 들어가도록 한다.

크롬 오른쪽 상단의 Chrom 맞춤설정 및 제어 버튼을 눌러 [도구 더보기] - [확장 프로그램]을 선택한다.

 

현재 본인의 크롬에 설치되어 있는 확장 프로그램 목록에서 왼쪽 [확장 프로그램] 을 선택하고 아래쪽에 Chrome 웹 스토어 열기를 선택한다.

 

Chrome 웹 스토어 화면에서 스토어 검색에 Web Delevoper를 입력하고 엔터를 치면 관련된 확장 프로그램 리스트로 나오게 된다. 여기에서 WEB DEVELOPER (제공업체 chrispederick.com)를 Chrome에 추가하도록 한다.

 

"Web Develpoer 을(를) 추가하시겠습니까?" 대화 상자에 확장 프로그램 추가를 선택한다.

 

추가가 되고 나면 개발자 홈페이지로 자동으로 연결되니 소개와 설명을 확인해 볼 수 있다.

Web Developer 가 설치되고 나면 우측 상단에 톱니 모양의 아이콘이 생긴다. 여기를 클릭하면 여러 가지 메뉴가 나온다.

여기서 Images 를 선택하여 Display Image Dimensions (이미지 속성), Display Image Paths (이미지 경로)를 체크하면 현재 페이지의 모든 이미지에 정보가 표시된다.

 

바로 전 사용한 Images 외 여러 가지 개발자를 위한 기능이 있으므로 상황에 맞도록 유용하게 사용하도록 하면 되겠다.

 

이상으로 크롬 확장 프로그램 Web Developer 에 대하여 알아봤습니다.