개발시 반드시 넣는 Chrome 확장 정리 2018/12월

AutoScale Advent Calendar 2018 3일째 담당의 t0m0120 입니다.

스마트하고 효율적인 Twitter 계정 운영 도구 SocialDog 개발 중입니다!
최근에는 주로 React/ReactNative 주위의 개발 CI 주위를 담당하고 있습니다!

모처럼 회사에서 기사를 쓰므로 자신이 사용하고 있는 개발 편리계의 기사를 쓰려고 생각해 처음에는 Chrome 확장 기능을 노출하려고 합니다.
이 기사에없는 유용한 확장 기능이 있다면 알려 주시면 감사하겠습니다!

옥토트리

Github의 리포지토리나 풀릭의 변경한 트리 구조를 에디터처럼 브라우저 왼쪽에 표시해주는 Chrome 확장 기능입니다.
이 확장 기능을 쓰기 위해서 이 기사를 썼다고 해도 좋을 정도로 이번 소개하는 가운데 한번의 확장 기능입니다.

Vimium

Chrome의 조작을 Vim 라이크에 사용할 수 있는 확장 기능
최대한 키보드에서 손을 떼고 싶지 않기 때문에 키보드만으로 넷 서핑을 할 수 있는 환경용으로 넣고 있습니다.

설정 참고
Chrome을 vim과 함께 사용할 수 있도록 허용 vimium

Twitcher

Twitter 계정 전환 도구
조금 본고에서 테스트 트윗이나 확인을 오폭하고 있습니다만 계정을 원 클릭으로 바꿀 수 있어 테스트 이외에도 편리합니다.

react-developer-tools

HTML이 아니라 React의 컴포넌트명으로 표시되어 오른쪽 컬럼에 선택한 컴포넌트의 Props와 State가 표시되어 확인과 편집이 가능하므로 컴포넌트가 어떤 코드로 무엇을 가지고 움직이고 있는지 확인하기 쉽고 편리합니다.

Redux Dev Tools

Action에 무엇이 건네지고 State가 어떻게 변경이 더해졌는지 확인에 주로 사용하고 있습니다.
이전 Action으로 되돌리거나 순서를 바꾸거나 할 수 있고 이것을 위해 Redux가 있는 확장.

Redux의 초보자는 이것을 사용하면서 Redux의 일련의 움직임을 잡는 것이 좋지 않을까요?

React Native Debugger

확장 기능은 아니지만 드디어 ReactNative를 개발할 때 사용하는 react natie debugger
위의 react와 redux의 devtool을 맞춘 ReactNative판.

Window Resizer

iphone/ipad. 기본적인 디스플레이 사이즈에 원 클릭으로 윈도우를 리사이즈 해 주어 반응형인 디자인의 퍼트견의 확인에 사용하고 있습니다.

ColorPick Eyedropper

커서를 둔 부분의 색의 컬러 코드를 얻을 수 있는 확장 기능.
이미지 등의 컬러 코드를 알고 싶을 때 사용하고 있습니다.



그 밖에도 Wappalyzer나 Visbug 등 재미있는 것들을 여러가지 넣고 있습니다만 일상 업무로 사용하고 있는 것을 열거해 보았습니다! 도움이되면 다행입니다!