http://e-rooms.tistory.com/287

Chrome Extension (유용한 크롬 확장 프로그램)

웹 개발을 하는데 유용한 크롬 확장 프로그램에 대해 간략히 알아봅니다.

확장 프로그램 추출하는 방법(CRX)

온라인 연결이 불가능한 개발망 같은 환경(오프라인)에서 크롬 웹 스토어의 확장 프로그램을 추출하여 사용가능하도록 할 수 있습니다.

1. 먼저 온라인이 가능한 환경에서 Give Me CRX 를 다운로드 및 설치합니다.

2. 이제 사용자가 오프라인에서 사용하고자 하는 확장프로그램을 선택하도록 합니다.

여기서는 GitHub Mate 라는 확장 프로그램을 다운받도록 하겠습니다.

다운로드 받으려한 확장 프로그램 팝업에 우측 마우스를 클릭하면 다음과 같은 항목이 나타납니다.

위 그림의 Get CRX of this extension 을 클릭하여 확장 프로그램을 추출하도록 합니다.

3. 오프라인에서 크롬 브라우저가 설치되어 있다면 주소창에 chrome://extensions/ 입력합니다.

굳이 위와 같이 입력하지 않아도 GUI 메뉴를 클릭하여 크롬 브라우저의 확장프로그램으로 이동해도 무방합니다.

만약에 사용자가 추출한 확장 프로그램 항목이 다음과 같이 있다면

위의 항목들을 확장 프로그램창에 드래그 앤 드롭하면 설치는 완료됩니다.

유용한 확장 프로그램 목록

Adobe Edge Inspect CC

이 프로그램은 사용자의 컴퓨터에서 무선으로 iOS & Android 기기와 브라우저간의 싱크를 통해 inspect 및 디버깅을 할 수 있습니다.

즉, 사용자 브라우저를 무선으로 각각의 디바이스와 연결할 수 있도록 도와줍니다.

Reticle

이 프로그램은 사용자 브라우저에서 웹 페이지 엘리먼트의 dimensions 을 빠르게 확인할 수 있습니다.

Emmet Re:View

emmet view는 사용자의 현재 페이지의 미디어쿼리 브레이크포인트에 대한 뷰를 모두 보여줍니다.

N-WAX

N-WAX 는 접근성 문제를 진단하고 수정하는 데 도움을 주는 도구입니다.

Screencastify (Screen Video Recorder) 

Screencastify는 크롬 내부의 비디오 캡쳐를 가능하게 해주는 확장 프로그램입니다. UI 동작 구현 같은 모션을 캡쳐할때 도움받을 수 있습니다.

Pesticide Pesticide for Chrome

이 확장 프로그램은 현재 페이지의 각 엘리먼트에 CSS의 outline 속성을 적용해서 시각적으로 더 편리하게 위치나 영역을 파악할 수 있게 도와줍니다. 

PerfectPixe

PerfectPixel 디자인 PSD와 한치의 오차도 허용하기 싫으신 분들을 위한 도구입니다. 현재 페이지에 이미지 레이어를 생성, 투명도와 위치 조절을 통해 비교가 가능한 상태로 만들어 줍니다. 

HTML5 Outliner 

HTML5 Outliner는 현재 페이지의 헤딩과 섹션 엘리먼트의 구조를 생성해주며 또 헤딩들의 링크를 제공해서 페이지 상의 이동 역시 가능하게 해줍니다.