Chrome 유용한 확장앱 정리

• React Developer Tools

※ 사용하는 이유
- Components : 컴포넌트를 트리구조로 보여주고 해당 컴포넌트의 상태정보를 확인할 수 있다.
- Profile : 렌더링된 컴포넌트를 소요시간과 함께 보여준다.


※ 설치
- Chrome 웹 스토어 : https://chrome.google.com/webstore/search/react%20developer%20tools?hl=ko

※ Components

 

컴포넌트마다 상태값 확인 가능

※ Profile
- 녹화 시작

파란색 레코딩 버튼 클릭

- 녹화 중지

- 컴포넌트마다 렌더링 시간 확인 가능

 

 

 

• Lighthouse (Chrome 사용 시 기본 설치)

※ 사용
- 페이지 로드 분석

- 성능, 접근성, 권장사항, SEO 등 점수표

- 개선점 확인

 

 

 

• 색상 선택 도구 - Geco

※ 사용하는 이유
- 웹 페이지에서 원하는 색상들을 추출하기 위해 사용한다.


※ 설치
- Chrome 웹 스토어 : https://chromewebstore.google.com/?hl=ko&pli=1

color picker 검색

 

색상 선택 도구 Chrome에 추가

 

확장 프로그램 추가

※ 실행

확장 프로그램 고정

 

Click to pick color from web을 통해 원하는 색상 추출

 

마우스를 통해 색상 선택