[React] React 디버깅 툴 설치하기 (React Developer Tools)

어떠한 언어로 개발을 하더라도 오류를 쉽게 찾아내려면 디버깅이 가능한 툴이 필요합니다.

자바스크립트를 개발할 때에는 크롬의 개발자 도구를 이용합니다.

리액트가 개발환경이 되어 디버깅이 필요하다면, 크롬 확장 프로그램으로 하나 더 설치하면 됩니다.

 

 

React 디버깅 툴 설치하기 (React Developer Tools)

 

크롬 웹 스토어에 접속하셔서 react를 검색합니다.

chrome.google.com/webstore/search/react?hl=ko

Chrome 웹 스토어

 

크롬의 확장 프로그램인 React Developer Tools 역시 페이스북에서 제공했습니다.

 

설치된 React Developer Tools의 설정으로 들어갑니다.

 

 

설정 내용 중에 파일 URL에 대한 액세스 허용을 활성화합니다.

 

 

 

설치 및 설정을 완료했습니다.

 

 

만들어 두었던 리액트 프로젝트를 실행시킵니다.

 

> npm start

 

크롬의 개발자 도구로 들어가서 확장 프로그램이 추가되었는지 확인합니다.