Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

AutoScale Advent Calendar 2018 3日目の担当のt0m0120です。

スマートで効率的な Twitter アカウント運用ツールSocialDogの開発をしています!
最近では主にReact/ReactNative周りの開発CI周りを担当しています!

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

Octotree

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

スクリーンショット 2018-12-02 23.37.44.png

Vimium

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

設定参考
Chromeをvimライクに使えるようにするvimium

スクリーンショット 2018-12-02 23.45.18.png

Twitcher

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

スクリーンショット 2018-12-02 23.53.28.png

react-developer-tools

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

スクリーンショット 2018-12-03 0.00.18.png

Redux Dev Tools

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

Reduxの初心者はこれを使いながらReduxの一連の動きを掴むといいのではないでしょうか。
スクリーンショット 2018-12-03 0.07.26.png

React Native Debugger

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

Window Resizer

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

スクリーンショット 2018-12-03 0.20.46.png

ColorPick Eyedropper

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

スクリーンショット 2018-12-03 0.30.43.png

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

t0m0120
autoscale
Twitter アカウント管理サービス「SocailDog」を開発・運営するスタートアップ
https://autoscale.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away