Web系のエンジニアであれば開発ツールとしてブラウザをハードに使っているのではないでしょうか。日々使うツールだからこそ、自分の好みにカスタマイズしたいという方も多いはず。

本記事では、最もブラウザでシェアを誇るGoogle Chromeの拡張機能についてまとめました。開発業務を効率化するためにも、便利な拡張機能は大いに利用していきましょう。

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

Facebookをさらに便利に！オススメのChrome拡張機能12選
作業効率がアップ！オススメのChrome拡張機能20選
誰でも一瞬でできる！WordPressのプラグインを使ってAMPに対応する方法

必携の拡張機能4つ

まずは、SEやディレクターなど、エンジニア向けの拡張機能からご紹介しましょう。

1. Tag Assistant

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

ホームページやウェブサービスの開発において、アクセス解析サービスのGoogleアナリティクス（Google Analytics）やインターネット広告サービスのGoogle AdWordsなど、複数のタグを使用することが多いです。

こういったタグの管理に使えるのが、Tag Assistantです。ページに埋め込まれているタグを確認したり、それぞれのタグが正常に動作しているのかを確認することができます。ホームページを立ち上げた時、トラブルの検証にも活躍してくれるでしょう。

2. YSlow

https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh

Yahoo!のパフォーマンスツールをベースにしている拡張機能で、ホームページの表示速度をはじめ、パフォーマンスのチェックができます。各項目に沿って、ページのグレードが計算・表示されます。

ページのパフォーマンスだけでなく、問題となっているポイント（ファイル）もリストアップしてくれるため、ページの改善にも活かしていきましょう。

3. EditThisCookie

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

ページに保存されているCookie（ページに一時的に保存されている情報のこと）が閲覧できる拡張機能です。ドメインや名称、値、有効期限などの詳細なCookie情報が確認できます。閲覧以外にも、追加や編集、削除、保護、ブロックなどの豊富な機能が使えます。

なおCookie情報は、JSON形式でエクスポート/インポートをしたり、検索することも可能です。

4. ColorPick Eyedropper

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

写真などの画像素材に使われている、カラーコードが調べられる拡張機能です。URLの横にあるアイコンをクリックし、カラーコードを調べたい要素にマウスオーバーすると、該当するカラーコードが表示されます。