GoogleChrome拡張機能は、ブラウザ上で手軽に追加できる便利なツールの一つとして多種多様な機能が存在し、あまりの多さに迷ってしまうほどです。
弊社エンジニアの間でもChrome拡張機能は活用されていますので、その中から実際に使っているオススメ拡張機能を厳選してご紹介します。

中には、エンジニアの方に限らず、Webサイトに携わる方であればインストールして欲しい拡張機能もありますので、ぜひ参考にしてみてください。

※執筆時(2015年9月24日)時点では、どれも無料で使用することができます。

エンジニアにオススメのChrome拡張機能まとめ

1.JSONView

JSONView.png
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc

JSONデータを自動で整形してくれるChrome拡張機能です。
JSONViewを入れておくだけで、改行やスペースなどで読みにくくなっているJSONデータを自動で整形してくれます。
整形されたソースコードを見ると、該当部分はハイライトされ、分かりやすく表示されています。

2.Tag Asisstant

Tag_Asisstant.png
https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk

Google AnalyticsやAdWordsなどの計測タグの設置状況を調べることができるChrome拡張機能です。
インストール後にURLバーの横に表示されるアイコンをクリックすると、設置状況を確認することができます。
正常に動作している場合は「working」、正常に動作していない場合は「not working」と表示されます。
ここをクリックすると、詳細情報を確認することもできます。

オプション機能も充実しており、全ページ検証、検証レベルの設定などが可能です。
トラッキングコードや計測タグなどを設置した後やトラブルが起きた場合などにチェックする際に活用しましょう。

3.ADB plugin

ADB_plugin.png
https://chrome.google.com/webstore/detail/adb/dpngiggdglpdnjdoaefidgiigpemgage
パソコンのChrome上で、実機AndroidのリモートデバックができるChrome拡張機能です。
あらかじめ、パソコンとAndroid端末をUSB接続しておきます。
Android端末でChromeを起動して、設定画面から「USBウェブデバック」をONにしておきます。

パソコンでは、インストール後にURLバーの横に表示されるアイコンをクリックし、「Start ADB」をクリックすると、パソコン上でAndroid端末の動作状況を確認することが可能になります。

4.EditThisCookie

EditThisCookie.png
https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg?hl=ja

Google Chromeに保存されているクッキーを表示、編集することができるChrome拡張機能です。
該当のWebサイトで、インストールするとURLバーの横に表示されるチョコチップクッキーのアイコンをクリックすると、値、ドメイン、パス、有効期限といったクッキーの詳細情報が表示され、編集可能になります。

他にも、クッキーのインポートまたはエクスポート、検索、削除などを行うことができます。

5.Chat++ for Chatwork

Chat___for_Chatwork.png
https://chrome.google.com/webstore/detail/chat%20%20-for-chatwork/amhfnpimdfcdcpnchjionbddjjbmofnl

情報共有サービス「Chatwork」をより便利にしてくれるChrome拡張機能です。
FacebookやTwitter、Githubなどと同じようにToを送信することができます。

また、ショートカットが豊富に用意されているので、マウスを使用せずに操作することも可能です。
画像リンクの下には小さなサムネイルが表示されたり、コードがハイライトされたりするので、特にWebサイト制作に携わるエンジニアの方の情報共有ツールとして、オススメしたい拡張機能です。

6.Colorpick Eyedropper

Colorpick_Eyedropper.png
https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

カラーコードを手軽に調べることができるChrome拡張機能です。
インストール後にURLバーの横に表示されるアイコンをクリックすると、動作が開始します。
カラーコードが知りたい画像やロゴなどの上にマウスオンすると、カラーコードが表示されます。

Webサイトで表示されている色はラスタ形式のため、カラーコードがドット単位で構成されています。
そのため、なるべく色の濃い中心部分を調べると、正確なカラーコードを調べることができます。

7.Page Analytics

Page_Analytics.png
https://chrome.google.com/webstore/detail/page-analytics-by-google/fnbdnhhicmebfgdgglcdacdapkcihcoh

現在閲覧中のWebサイトのアクセス状況などを簡単に調べることができるChrome拡張機能です。
わざわざGoogle Analyticsを開かなくても調べられるので非常に便利です。
なお、あらかじめGoogle Analyticsにログインして該当のWebサイトを登録しておくことが必要です。

使い方は、調べたいWebサイトを閲覧している状態で、URLバーの横に表示されるアイコンをクリックすると、ページ上部に各指標やWebページ内のクリック分析が記載されたスコアカードが表示されます。
また、画面右上に表示されている、色のアイコンをクリックすると、ヒートマップのような表示に切り替えることも可能です。

エンジニアの方だけではなく、ディレクターの方やメディアを運営されている方にオススメの拡張機能です。

8.Full Page Screen Capture

Full_Page_Screen_Capture.png
https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl

Webページを丸ごとスクリーンショットすることができるChrome拡張機能です。
現在ブラウザ枠で見えている部分だけではなく、表示されていない部分まで撮影することができます。
インストール後にURLバーの横に表示されるカメラアイコンをクリックするだけで、撮影が可能です。
撮影後の画像はpngで保存されます。

まとめ

いかがだったでしょうか。
どれもかゆいところに手が届くような拡張機能ばかりで、インストールしておくと作業効率が格段にあがるものばかりです。
エンジニアの方に限らず、Webサイトに関わる方なら拡張機能のような便利ツールを最大限に活用すると作業効率もあがります。

今回ご紹介した拡張機能は、どれも弊社のエンジニア陣が自信を持ってオススメする珠玉の13選です。
ぜひ参考にしてみてください。

このニュースを読んだあなたにオススメ

【ライター必見】記事を書くときに便利なクロームの拡張機能15選
ブラウザ上で簡単に競合調査ができるオススメのChrome拡張機能10選

このニュースに関連するカリキュラム

ホームページを強化するタグ貼り付けをマスターしよう

ホームページを強化するタグ貼り付けをマスターしよう

facebookのソーシャルボタン、Googleアナリティクスのトラッキングコード、AdWordsのコンバージョンタグ・・・など、Web担当者はいろいろなタグを貼り付けなくてはなりません。タグ管理が重要業務です。