Show GN: 리액트 컴포넌트 소스코드를 찾아주는 크롬 확장 프로그램

(chromewebstore.google.com)

브라우저에 렌더링 된 요소를 통해 리액트 컴포넌트의 소스코드를 빠르게 찾을 수 있는 크롬 익스텐션입니다.

사내에서 리액트 소스코드 톺아보기 스터디를 하다가 "리액트 소스코드를 읽으면 이런 것도 할 수 있어요" 라는 컨셉으로 만든 익스텐션입니다. 딱히 홍보나 소개를 한 적은 없는데 알음알음 미국, 인도 개발자분들이 꽤 사용하고 계셔서 소개차 올려봅니다.

익스텐션 설치 후 개발자 도구에 있는 React Code Finder 탭을 여시면 개발 환경에서 컴포넌트 코드를 빠르게 찾아 IDE로 열거나 편집할 수 있습니다.

앱의 규모가 커지면서 렌더링 된 요소를 바탕으로 소스코드를 빠르게 찾기 어려운 분들, react-devtools 익스텐션의 사용성이 아쉬웠던 분들, 코드를 실시간으로 수정하고 브라우저에서 변경 사항을 확인하고 싶은 분들에게 유용할 것 같습니다.

자세한 사용법은 아래 README.md를 참고해주세요~!

Github 링크

참고로 익스텐션을 배포하고 보니 이미 유사한 익스텐션/라이브러리로 Locatorjs 라는 이름의 제품이 있더라구요!

개인적인 사용 경험에서는 제 익스텐션이 좀 더 편했는데, 단순이 제가 익숙해서 그럴 수도 있다고 생각합니다 ㅎㅎㅎ

이러한 기능에 관심이 있으신 분은 해당 제품도 참고해보시면 좋을 것 같습니다.