開発の際に必ず入れるChrome拡張まとめ 2018/12月

[AutoScale Advent Calendar 2018](https://qiita.com/advent-calendar/2018/auto-scale) 3日目の担当の[t0m0120](https://twitter.com/t0m0120)です。

スマートで効率的な Twitter アカウント運用ツール[SocialDog](https://web.social-dog.net)の開発をしています！
最近では主にReact/ReactNative周りの開発CI周りを担当しています！

せっかく会社で記事を書くので自分の使っている開発便利系の記事を書こうと思い初回はChrome拡張機能を晒そうと思います。
この記事にない便利な拡張機能があれば教えていただければ幸いです！


### [Octotree](https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc?hl=ja)

Githubのリポジトリやプルリクの変更したツリー構造をエディタのようにブラウザ左側に表示してくれるChrome拡張機能です。
この拡張機能を書くためにこの記事を書いたと言ってもいいほど今回紹介する中で一押しの拡張機能です。

<img width="945" alt="スクリーンショット 2018-12-02 23.37.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/226100/eca053fc-4270-5829-0398-1693e293d32a.png">

### [Vimium](https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb?hl=ja)

Chromeの操作をVimライクに使える拡張機能
極力キーボードから手を離したくないのでキーボードだけでネットサーフィンができる環境用に入れています。

設定参考
[Chromeをvimライクに使えるようにするvimium](https://qiita.com/satoshi03/items/9fdfcd0e46e095ec68c1)

<img width="948" alt="スクリーンショット 2018-12-02 23.45.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/226100/eef60642-01af-533c-96de-d447a4eb6224.png">

### [Twitcher](https://chrome.google.com/webstore/detail/twitcher-twitter-account/gmngpagflejjoblmmamaonmnkghjmebh?hl=ja)

Twitterのアカウント切り替えツール
ちょいちょい本垢でテストツイートや確認を誤爆していますがアカウントをワンクリックで切り替える事ができてテスト以外でも便利です。

<img width="221" alt="スクリーンショット 2018-12-02 23.53.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/226100/05534695-fe3e-7b7d-73a1-9047e1808f91.png">


### [react-developer-tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ja)

HTMLではなくReactのコンポーネント名で表示され右カラムに選択したコンポーネントのPropsとStateが表示され確認と編集ができるのでコンポーネントがどのコードで何を持って動いているのかの確認がしやすく便利です。

<img width="1053" alt="スクリーンショット 2018-12-03 0.00.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/226100/c5fc41aa-638a-2209-4455-8f029f91750a.png">


### [Redux Dev Tools](http://extension.remotedev.io/)

Actionに何が渡されてStateがどう変更が加わったのかの確認に主に使っています。
前のActionに戻したり順番を入れ替えたりできこれの為にReduxがある拡張機能。

Reduxの初心者はこれを使いながらReduxの一連の動きを掴むといいのではないでしょうか。
<img width="1054" alt="スクリーンショット 2018-12-03 0.07.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/226100/82deade0-0398-cbb2-380e-e30705201dd2.png">

###[React Native Debugger](https://github.com/jhen0409/react-native-debugger)

拡張機能ではないですが、ついでにReactNativeの開発時に使用するreact natie debugger
上記のreactとreduxのdevtoolを合わせたReactNative版。


###[Window Resizer](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh)

iphone/ipad。基本的なディスプレイサイズにワンクリックでウィンドウをリサイズしてくれてレスポンシブなデザインのパット見の確認に使っています。

<img width="399" alt="スクリーンショット 2018-12-03 0.20.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/226100/9f19c2aa-9678-068a-329a-689d3963a416.png">


###[ColorPick Eyedropper](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg)

カーソルを置いた箇所の色のカラーコードの取得ができる拡張機能。
画像などのカラーコードが知りたい際に使っています。

<img width="540" alt="スクリーンショット 2018-12-03 0.30.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/226100/acf23b71-49ec-b088-bb8a-4bb57de2b702.png">





他にもWappalyzerやVisbugなど面白そうな物を色々入れていますが日々の業務で使っているのを列挙してみました！参考になれば幸いです！