プログラマー・開発者必見！開発効率が上がるChrome拡張機能15選

プログラマーでありながらChromeを使っていない人は、もう少数派かもしれません。

プログラミングにChromeが好まれる理由はたくさんあります。Googleがウェブの方向性に大きな影響力を持っていること、開発のストレスを軽減する内蔵機能、そして何より膨大な数の拡張機能が存在することなどが挙げられます。

この最後のポイントが特に重要です。2018年2月時点で、Chromeはデスクトップ市場で60%以上のシェアを獲得しています。だからこそ、多くの拡張機能開発者はまずChrome向けに開発を行うのです。ここでは、あらゆる種類の開発者、とりわけWeb開発者にこそ使ってほしい、厳選のChrome拡張機能をご紹介します。

汎用開発向け拡張機能

1. Session Buddy

Chromeには「カスタムユーザープロファイル」という優れた機能があり、ブックマーク、設定、タブ、履歴などを目的別に分けて管理できます。まだの方は、プログラミング専用のプロファイルを作成しておくことを強くおすすめします。

さらにSession Buddyを使えば、特定の「タブセッション」を保存し、いつでも自由に切り替えられます。複数のプロジェクトを並行して進める際に非常に便利な拡張機能です。

2. iMacros for Chrome

iMacrosは、繰り返し発生する作業を自動化できる拡張機能です。マウスクリックやキー入力などの操作を「録画」してマクロとして保存し、ワンクリックで何度でも実行できます。フォーム入力や変更内容のテストなどで、大幅な時間短縮を実現します。なお、Chrome以外の環境でマクロ自動化を行いたい場合は、AutoHotkeyスクリプトがおすすめです。

3. Web Timer

Web Timerは、各ウェブサイトにどれだけの時間を費やしているのか（あるいは無駄にしているのか）を追跡し、先延ばし癖の抑制に役立つ拡張機能です。Chromeがアクティブなときのみ計測し、アイドル状態になると賢く計測を停止してくれます。

より高機能な時間トラッカーをお探しなら、クロスプラットフォーム対応のTogglが断然おすすめです。

4. Awesome Screenshot

Awesome Screenshotは、スクリーンショット撮影、画面動画の録画、画像への注釈追加やぼかし処理、ワンクリック共有までを1つにまとめたオールインワン拡張機能です。特に便利なのが、ページ全体を縦長に撮影して1枚の巨大な画像としてつなぎ合わせる機能です。Chrome外でも使えるソリューションが必要な場合は、高機能なスクリーンショットツールをチェックしてみてください。

5. Marmoset

Marmosetは、コードの3Dスクリーンショットを作れる楽しいツールです。撮影した画像は3D空間で回転・傾斜・拡大縮小でき、スニペットを共有する際にぐっと印象的になります。コードを使ったストック画像の作成や、プロジェクトのホームページでソースコードを見栄えよく見せる場面でも活躍します。

Web開発向け拡張機能

6. Web Developer

Web開発支援のために1つだけ拡張機能を入れるなら、これを選びましょう。Web Developerには、JavaScriptやプラグインのワンクリック切り替え、レスポンシブデザイン確認のためのウィンドウサイズ変更、画像のテストやデバッグなど、便利な機能が多数詰め込まれています。

7. User-Agent Switcher

Chromeウェブストアには多数の「ユーザーエージェント切り替え」拡張機能がありますが、その中で最も優れているのがこれです。現在も更新が続けられており、リンクを乗っ取ることがなく、デフォルトのUA文字列が多数付属しつつ、独自のカスタムUA文字列も作成できます。確実に動作する数少ない拡張機能の一つと言えるでしょう。

8. Wappalyzer

あるサイトがどんなWeb技術で動いているのか知りたければ、Wappalyzerならワンクリックで判明します。CMS（WordPressなど）、Webフレームワーク（Reactなど）、解析ツール（Google Analyticsなど）、ECプラットフォーム（Shopifyなど）など、多彩な技術を賢く検出できます。

9. IE Tab

2018年2月時点でも、デスクトップユーザーの13%以上が依然としてInternet Explorerを使っていました。IEは現代のWeb標準から大きくかけ離れているため、これは開発者にとって悩みの種です。そこで役立つのがIE Tabです。新しいタブでIEをエミュレートし、IE6〜IE9やActiveXコントロールなど、さまざまなバージョンでサイトの表示をテストできます。古いブラウザーを含むすべての環境との互換性が求められる場合に本当に重宝します（なお、Internet Explorer自体は2022年6月にサポートを終了しましたが、社内システムなどレガシー環境の検証用途では今なお有用です）。

10. Click&Clean

サイト開発中に厄介なのが、最新の変更を読み込ませるために閲覧データを何度もクリアする作業です。Click&Cleanなら、その操作を素早く行えるだけでなく、削除対象を細かく制御できます（データベースやプラグインデータの削除、特定サイトのCookie保持など）。

11. WhatFont

WhatFontは、Web上のフォントを最速で特定できるツールです。通常なら要素を右クリックして「検証」を選び、スタイルシートを掘り起こす必要がありますが、WhatFontなら要素にマウスを乗せるだけでフォント名が分かり、さらにそのフォントの提供元（Google Fonts、Typekitなど）まで教えてくれます。

12. ColorPick Eyedropper

ColorPick Eyedropperは、任意のWebページ上のどのピクセルでもズームして正確なカラーコードを取得できるツールです。カラーコードはHEX、RGB、HSL形式で取得可能。スタイルシートを調べたり、画像をダウンロードしてエディターで色を拾ったりするよりも、はるかに手軽で高速です。

13. Lorem Ipsum Generator

サイト開発では、ダミーテキストが必要になる場面が必ず訪れます。Lorem ipsumジェネレーターはWeb上にたくさんありますが、Lorem Ipsum Generatorなら現在開いているタブからすぐに呼び出せます。動作も軽快で、段落の数や各段落の文の数も自由にカスタマイズ可能です。

14. Check My Links

Web開発プロジェクトの仕上げには、主要ページを一通り見直して、すべてのリンクが正常に機能しているか確認したいものです。Check My Linksはその作業を極限まで簡単にしてくれます。ボタンをクリックするだけで現在のページ上の全リンクをスキャンし、正常なリンクと壊れたリンクを色分けしてハイライト表示します。

15. Dimensions

Dimensionsは、Web開発というよりもWebデザイン寄りのツールですが、両者の領域は重なることが多いので、導入しておいて損はありません。テキスト、画像、動画、フォームフィールドなど、ページ上の2つの要素間の距離を瞬時に測定できます。マウスカーソルから各要素までの距離を測ることも可能です。

合わせて活用したいその他のChrome拡張機能

上記に加えて、タブ管理系のChrome拡張機能やビジネス生産性向上系のChrome拡張機能も強くおすすめします。Chromeを使う開発者がストレスを感じやすいポイントこそ、この2つの領域だからです。

また、セキュリティからエンターテイメント、ショッピングから一般的な生産性向上まで幅広く網羅した、厳選Chrome拡張機能の特集記事もぜひチェックしてみてください。