開発スピードをアップする便利なGoogle Chrome 拡張機能５選

こんにちは、SiTest事業部エンジニアの牧です。

みなさん、ブラウザの拡張機能は使用されていますか？
Google Chrome、Firefox、Safariなどの主要ブラウザでは便利な拡張機能が多数配信されています。

今回はGoogle Chromeで開発する時に便利な拡張機能を5つご紹介します！

AppspectorはWebサイトを分析する時に便利な拡張機能です。
Appspectorのアイコンをクリックすると、ポップアップが表示されそのページで使用されている技術がアイコン形式で表示されます。
精度はあまり高くはありませんが、気になっているアプリケーションが何で動いているのかを知りたい時に重宝しています。
また、jQueryなどのライブラリが入っているかどうかなどわざわざ開発者ツールのコンソール画面やソースコードを見る必要がなくなります。
類似拡張機能はほかにもいくつかありますので、自分にあった使いやすいものを選択するといいと思いいます。

ColorZillaはブラウザでカラーピッカーが使えるようになる拡張機能です。
右上のスポイトアイコンをクリックし「Pick Color From Page」を選択します。
あとは色情報を取得したい箇所にカーソルを合わせクリックすると、色情報が保存されます。
また、スポイトアイコンをクリックし「Color Picker」を選択すると、過去保存した色情報が表示されます。
ColorZillaは設定をすることで保存した色情報を直接クリップボードにコピーしたり、
保存する色情報の形式をRGBや16進数など好きな形式に変換することができますのでちょっと色情報を調べたいときにはとても便利です！

Webアプリケーション開発をする時Cookieはとても重宝します。
Cookieの確認だけならば開発者ツールからでも確認することができるのですが、
EditThisCookieはCookieの追加、変更、削除を行うことができます。
使い方はとても簡単で、クッキーアイコンをクリックするとファーストパーティCookieの一覧が表示されます。
右上の「＋」アイコンをクリックすると新規Cookie作成画面になり名前・値を記入して下のチェックマークをクリックするだけでCookieの作成が完了します。
また、CookieはJSON形式でインポート・エクスポートすることもできますので、デバッグする時にとても重宝しています。

jquery-injectorはその名の通り、jQueryを注入してくれる拡張機能です。
オプションでjQueryのバージョンもv1.2からv2.1.1まで好きなバージョンを選択することができます。
使い方も簡単でjQueryアイコンをクリックするだけです。
jQueryが入っていないサイトでjQueryを使いたい時にとても便利です。
私はよくAppspectorでjQueryが入っているかどうか確認し、入っていなければjquery-injectorを使用するという使い方をしています。

PostmanはWebAPIのテストクライアントです。
こちらはChromeアプリケーションとなっておりアプリケーションとして起動します。
CRUDに対応したHTTPリクエストを作成することができますので、気軽にAPIを試してみることができます。
また、Basic認証やOAuthにも対応していますのでPostmanだけでほぼ全てのAPIを叩くことが可能です。
一度試した内容は履歴に残りますので、デバッグ中に最初のリクエストは何を送っていたかなとすぐに見ることができます。
API開発をしている方や外部APIを利用して開発を行われている方にはとてもおすすめな拡張機能です。

今回ご紹介した5つ以外にもまだまだ便利な拡張機能は日々増えています。
また、拡張機能を個別に使うのではなく組み合わせて使うことにより意外な使い方が見つかる時もあります。
自分にあった拡張機能を探しつつ、拡張機能を使いこなして開発スピードをあげていきましょう！